利用Ajax脚本化HTTP

load事件

使用load事件代替onreadystatechange事件，响应完毕后就触发load事件，没有必要再去检查readystate属性。
只要浏览器接收到服务器的响应，无论状态如何，都会触发load事件，所以需要确定status属性值从而确定数据是否可用。

举个栗子

var xml = new createXML();xml.onload = function(event){ 
 if((xml.status >= 200 && xml.status < 300) || xml.status === 304){ 
 var request = document.getElementById("request");
 request.innerHTML = xml.responseText;
 }else{
 console.log("request is not ok" + xml.status);
 }
}xml.open("get","hello-world.html",false);xml.send(null);

progress事件

这个时间会在浏览器接受新数据期间周期性的触发。而progress事件处理程序会接收到一个event对象，其中target属性就是XHR对象，还有其他三种属性：lengthConputable表示进度信息是否可用的布尔值，loaded表示已经接收到的字节数，total表示根据Content-Length响应头部确定的预期字节数。

举个栗子

var xml = new createXML();xml.onload = function(event){ 
 if((xml.status >= 200 && xml.status < 300) || xml.status === 304){ 
 var request = document.getElementById("request");
 request.innerHTML = xml.responseText;

 }else{
 console.log("request is not ok" + xml.status);
 }
}xml.onprogress = function(event){ 
 var p = document.getElementById("data"); 
 if(event.lengthComputable){
 console.log(event.position);
 p.innerHTML = "Received " + event.loaded + " of " + event.total + " bytes";
 }
}/*需要注意的是，必须保证调用open之前定义onprogress事件处理程序*/xml.open("get","hello-world.html",true);xml.send(null);

终止请求和请求超时abort()

举个栗子

function timeGetText(url,timeout,callback){
 var request = new XMLHttpRequest(); 
 var timedout = false; //判断是否超时
 var timer = setTimeout(function(){
 timedout = true;//超时
 request.abort();//触发终止事件
 },timeout);//如果超时，触发一个启动器
 request.open("GET",url);//发起请求
 request.onreadystatechange = function(){
 if(request.readyState !== 4) return;//忽略未完成程序
 if(timedout) return;//忽略超时程序
 clearTimeout(timer);//取消等待的超时
 if(request.status === 200){
 callback(request.responseText);//成功
 }
 }
 request.send(null);
}

图像ping

图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。图像Ping有两个主要的缺点，一是只能发送GET请求，二是无法访问服务器的响应文本。

var img = new Image();
img.onload = img.onerror = function(){
 console.log("Done!");
};
img.src = "hello-world.html";

借助<script>发送HTTP请求：JSONP

举个栗子

var bd = document.body;function callbackFunction(result, methodName)
 {
 bd.innerText = result;
 }
 var script = document.createElement("script");
 script.src = "***/jsonp.php?jsoncallback=callbackFunction";
 bd.insertBefore(script,bd.firstChild);

举个栗子

function getJSONP(url,callback){
 var cbnum = "cb" + getJSONP.counter++; 
 var cbname = "getJSONP." + cbnum; 
 if(url.indexOf("?") === -1){
 url += "?jsonp=" + cbname;
 }else{
 url += "&jsonp=" + cbname;
 } var script = document.createElement("script");
 getJSONP[cbname] = function(response){
 try{
 callback(response);
 } finally{ delete getJSONP[cbname];
 script.parentNode.removeChild(script);
 }
 }
 script.src = url;
 document.body.appendChild(script);
}
getJSONP.counter = 0;

Conmet技术(服务器推送)

举个栗子

function createStreamingClient(url, progress/*接收到数据时调用的函数*/, finished/*关闭连接时调用的函数*/) {
 var xhr = new XMLHttpRequest(),
 received = 0;
 xhr.open("get", url, true);
 xhr.onreadystatechange = function() {
 var result; if (xhr.readyState == 3) {
 result = xhr.responseText.substring(received);
 received += result.length;
 progress(result);
 } else if (xhr.readyState == 4) {
 finished(xhr.responseText);
 }
 };
 xhr.send(null); return xhr;
}var client = createStreamingCilent("streaming.php", function(data) {
 alert("Received:" + data);
}, function(data) {
 alert("Done!");
});

服务器发送事件

SSE（ Server - Sent Events， 服务器发送事件） 是围绕只读Comet交互推出的API或者模式。 SSE API用于创建到服务器的单向连接， 服务器通过这个连接可以发送任意数量的数据。 服务器响应的MIME类型必须是text / event - stream， 而且是浏览器中的Javascript API能解析的格式输出。 SSE支持短轮询， 长轮询和HTTP流， 而且能够在断开连接时自动确定何时重新连接。

SSE API

var source = new EventSource("myevents.php");/*必须同源*/

open： 在建立连接时触发
message： 在从服务器接收到新事件时触发
error： 在无法建立连接时触发
- 服务器返回的数据以字符串的格式保存在event.data中。 如果想强制立即断开并且不再重新连接， 可以调用close() 方法。

事件流

Web Sockets

var Socket = new WebSocket(url, [protocol]/*可接受的子协议*/ );//创建对象

参考文档——websocket

AJax的主要特点是使用脚本操纵HTTP和web服务器之间的数据交换，不会导致页面重载。