web即时聊天系统的实现
第【1】页
即时通讯方案：ajax轮询与ajax长轮询
什么是ajax？
AJAX (Asynchronous JavaScript and XML) 异步的JavaScript和XML
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
如果有人不清楚这个概念可以查看菜鸟教程-AJAX教程，我在此简单展示一下使用方法。
原生JavaScript
我对ajax进行简单封装
function ajax(object) {
var
xhr = window.XMLHttpRequest?(this.ajaxObject ||
new XMLHttpRequest()):new ActiveXObject("Microsoft.XMLHTTP"),
status = true,
responseType=object.dataType || "text";
//onabort中断事件，onerror错误事件，ontimeout超时事件
xhr.onabort = xhr.onerror = xhr.ontimeout = object.error;
//每当 readyState 改变时，就会触发 onreadystatechange 事件。
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (typeof object.success == "function") {
//如果readyState为4，执行ajax请求成功的回调函数success
responseType == "text"object.success(xhr.responseText):object.success(xhr.responseXML);
}
}
if (xhr.onabort || xhr.onerror || xhr.ontimeout) {
status = false;
}
}
xhr.timeout = object.timeout || 60000; //自定义超时或默认60s
xhr.open(object.type || 'get', object.url,object.async || true);//设置请求方式
xhr.setRequestHeader("Content-type",object.contentType || "application/x-www-form-urlencoded"); //设置请求头部
xhr.send(object.data || null); //请求发送Get请求则在url上以参数的形式发送并在send方法传入参数null
if (status) {
return true;
}
}使用时传参
ajax({
url: "****",
data: "****",
type: "post",
success: function(msg){},
error: function() {}
})jQuery
如果想学习jQuery可以查看菜鸟教程-jQuery教程
比较推荐使用jQuery的ajax方法，jQuery对ajax的封装非常的完善，常用用法。
$.ajax({
url:'url' //请求地址
type:'post', //请求方式
async:true, //是否异步
data:data, //请求数据
dataType: 'json', //请求发送的数据类型
success:function(data){}, //请求成功执行
error:function(){} //请求错误执行
})上面就是ajax 的用法了，接下来介绍本篇【0-2】重点
ajax轮询
通过上面我们初步了解ajax是什么东西吧，那我们来了解一下ajax轮询是什么东西吧
ajax轮询也叫ajax短轮询，客户端通过计时器事件setInterval函数隔一段事件重复向服务器HTTP请求，服务器端在收到请求后，不论是否有数据更新，都直接进行响应。这种方式实现的即时通信，本质上还是浏览器发送请求，服务器接受请求的一个过程，通过让客户端不断的进行请求，使得客户端能够模拟实时地收到服务器端的数据的变化。
轮询的作用就是在获取服务器上最新的message（用户之间交流的话我称为message）
方案思路：即时通信无外乎两个点：1.消息获取 2.消息发送
消息获取：如果用户B想从服务器得到用户A所发送的message，如何即时得到用户A所发送的message呢，那就是用户B要隔一段事件反复请求服务器，以便获取用户A存储在服务器上最新的message。
消息发送：用户A想回应用户B，则利用ajax请求将message发送给服务器存储，等待用户B的获取。
消息更新【前端】像这样调用我所封装好的ajax函数。通过ajax轮询反复发送请求以便获取最新的message
setInterval(ajax({
url: "****",
data: "****",
type: "post",
success: function(msg){
//将msg反封装后打印在页面上实现消息获取的更新
document.getElementById('result').innerHTML = msg;
},
error: function() {}
}),1000); //1s请求一次
data：你发送的请求的数据，在本次的项目中就是请求获取【用户A发送的即时通讯消息】，一般来说
success：回调函数的参数msg就是服务器响应的数据，其中就包含用户A的message。
消息发送 【前端】
ajax({
url: "****",
data: "****",
type: "post",
success: function(msg){
//获取响应的code，判断消息类型，把你发送的message打印在页面上
if(code == 1){
var myMSG = document.getElementById('sendMSG').value;
document.getElementById('result').innerHTML = myMSG;
}
},
error: function() {}
})ajax长轮询
长轮询的思路跟短轮询是差不多的，只不过短轮训是“无脑的”发送请求去获取更新，即使没有新的message。
而ajax长轮询则当服务器收到客户端发来的请求后,服务器端不会直接进行响应，而是先将这个请求挂起，然后判断服务器端数据是否有更新。如果有更新，则进行响应，如果一直没有数据，则到达一定的时间限制(服务器端设置超时)才返回。 客户端JavaScript响应处理函数会在处理完服务器返回的信息后，再次发出请求，重新建立连接。
【前端】
ajax({
url: "****",
data: "****",
type: "post",
success: function(msg){
//获得了响应，才再去获取数据
ajax();
//将msg反封装后打印在页面上实现消息获取的更新
document.getElementById('result').innerHTML = msg;
},
error: function() {}
})现阶段没有后端代码，后端的代码会在实现篇详细说明的（emmm脑壳疼，也许没有，因为我并不想采用这种方案），现在前端代码知识帮助我们理解即时通讯方案的原理
优缺点比较
ajax短轮询的优点是比较简单，易于理解，实现起来也没有什么技术难点。缺点是显而易见的，这种方式由于需要不断的建立http连接，严重浪费了服务器端和客户端的资源。尤其是在客户端，距离来说，如果有数量级想对比较大的人同时位于基于短轮询的应用中，那么每一个用户的客户端都会疯狂的向服务器端发送http请求，而且不会间断。人数越多，服务器端压力越大，这是很不合理的。
ajax长轮询和短轮询比起来，明显减少了很多不必要的http请求次数，相比之下节约了资源。长轮询的缺点在于，连接挂起也会导致资源的浪费。
由此得知轮询对于现在这种网络时代背景下，是很不理想的实现方案，尽管实现代码方法简单。因此我考虑HTML5新技术webSocket方案来实现。
[2019-10-25]
