高程3总结#第21章Ajax与Comet

摘要：页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到有数据可发送。

IE5是第一款引入XHR对象的浏览器，在IE5中，XHR对象是通过MSXML库中的一个ActiveX对象实现的

//适用于 IE7 之前的版本
function createXHR(){
if (typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp"],
i, len;
for (i=0,len=versions.length; i < len; i++){
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (ex){
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}

这个函数会尽力根据IE中可用的MSXML库的情况创建最新版本的XHR对象

IE7+、Firefox、Opera、Chrome、Safari都支持原生的XHR对象，这些浏览器中创建XHR对象，可以使用XMLHttpRequest构造函数

var xhr=new XMLHttpRequest();

如果还必须要支持IE的更早版本，可以在createHXR()函数中加入对原生XHR对象的支持

function createXHR(){
if (typeof XMLHttpRequest != "undefined"){
  return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined"){
  if (typeof arguments.callee.activeXString != "string"){
    var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                    "MSXML2.XMLHttp"],
        i, len;
    for (i=0,len=versions.length; i < len; i++){
      try {
        new ActiveXObject(versions[i]);
        arguments.callee.activeXString = versions[i];
        break;
      } catch (ex){
        //跳过
      }
    }
  }
  return new ActiveXObject(arguments.callee.activeXString);
} else {
  throw new Error("No XHR object available.");
}
}

这个函数中新增的代码首先检测原生XHR对象是否存在，如果存在则返回它的新实例，如果原生对象不存在，则检测ActiveX对象，如果这两种对象都不存在，就抛出一个错误，然后就可以使用下面的代码在所有浏览器中创建XHR对象了

var xhr=createXHR();

在使用XHR对象时，要调用的第一个方法是open()，接收3个参数：要发送的请求的类型(get或者post)、请求的URL和表示是否异步发送请求的布尔值

xhr.open("get","example.php",false);

这行代码会启动一个针对example.php的GET请求

URL相对于执行代码的当前页面

open()方法并不会真正发送请求，而是启动一个请求以备发送

要想发送特定的请求，调用send()方法

xhr.open("get","example.txt",false);
xhr.send(null);

send()方法接收一个参数，要作为请求主体发送的数据，如果不需要通过请求主体发送数据，必须传入null

响应的数据会自动填充XHR对象的属性

responseText，作为响应主体被返回的文本

responseXML，如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的XML DOM文档

status，响应的HTTP状态

statusText，HTTP状态的说明

XHR对象的readyState属性表示请求响应过程的当前活动阶段

0，未初始化，尚未调用open()方法

1，启动，已经调用open()方法，但尚未调用send()方法

2，发送，已经调用send()方法，但尚未接收到响应

3，接收，已经接收到部分响应数据

4，完成，已经接收到全部响应数据，而且已经可以在客户端使用了

必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性

var xhr = createXHR();
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      alert(xhr.responseText);
    } else {
      alert("Request was unsuccessful: " + xhr.status);
    }
  }
};
xhr.open("get", "example.txt", true);
xhr.send(null);

在接收到响应之前还可以调用abort()方法来取消异步请求

在发送XHR请求的同时，还会发送下列头部信息

Accept，浏览器能够处理的内容类型

Accept-Charset，浏览器能够显示的字符集

Accept-Encoding，浏览器能够处理的压缩编码

Accept-Language，浏览器当前设置的语言

Connection，浏览器与服务器之间连接的类型

Cookie，当前页面设置的任何Cookie

Host，发出请求的页面所在的域

Referer，发出请求的页面的URI

User-Agent，浏览器的用户代理字符串

setRequestHeader()方法，可以设置自定义的请求头部信息，这个方法接收两个参数：头部字段名称和头部字段的值。要成功发送头部信息，必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()

var xhr = createXHR();
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      alert(xhr.responseText);
    } else {
      alert("Request was unsuccessful: " + xhr.status);
    }
  }
};
xhr.open("get", "example.php", true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);

GET是最常见的请求类型，最常用于向服务器查询某些信息，必要时可以将查询字符串参数追加到URI的末尾，以便将信息发送给服务器

使用GET请求经常会发生一个错误，就是查询字符串的格式问题。

查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL的末尾，而且所有的名-值对都必须由&分隔

xhr.open("get","example.php?name1=value1&name2=value2",true)

向现有URL的末尾添加查询字符串参数

function addURLParam(url, name, value) {
  url += (url.indexOf("?") == -1 ? "?" : "&");
  url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
  return url;
}

addURLParam()函数接收3个参数：要添加参数的URL、参数的名称和参数的值

POST请求，通常用于向服务器发送应该被保存的数据

function submitData(){
  var xhr = createXHR();
  xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        alert(xhr.responseText);
      } else {
        alert("Request was unsuccessful: " + xhr.status);
      }
    }
  };
  xhr.open("post", "postexample.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  var form = document.getElementById("user-info");
  xhr.send(serialize(form));
}

FormData为序列化表单以及创建与表单格式相同的数据，提供了便利

var data=new FormData();
data.append("name","Nicholas");

这个append()方法接收两个参数，键和值

创建了FormData的实例后，可以将它直接传给XHR的send()方法

var xhr = createXHR();
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      alert(xhr.responseText);
    } else {
      alert("Request was unsuccessful: " + xhr.status);
    }
  }
};
xhr.open("post","postexample.php", true);
var form = document.getElementById("user-info");
xhr.send(new FormData(form));

IE8为XHR对象添加了一个timeout属性，表示请求在等待响应多少毫秒之后就会终止，在给timeout设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发timeout事件，进而会调用ontimeout事件处理程序

var xhr = createXHR();
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){
    try {
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        alert(xhr.responseText);
      } else {
        alert("Request was unsuccessful: " + xhr.status);
      }
    } catch (ex){
      //假设由 ontimeout 事件处理程序处理
    }
  }
};
xhr.open("get", "timeout.php", true);
xhr.timeout = 1000; // 将超时设置为 1  秒钟（仅适用于 IE8+ ）
xhr.ontimeout = function(){
  alert("Request did not return in a second.");
};
xhr.send(null);

Firefox最早引入了overrideMimeType()方法，用于重写XHR响应的MIME类型

通过调用overrideMimeType()方法，可以保证把响应当做XML而非纯文本来处理

var xhr = createXHR();
xhr.open("get", "text.php", true);
xhr.overrideMimeType("text/xml");
xhr.send(null);

6个进度事件

loadstart，在接收到响应数据的第一个字节时触发

progress，在接收响应期间持续不断地触发

error，在请求发生错误时触发

abort，在因为调用abort()方法而终止连接时触发

load，在接收到完整的响应数据时触发

loadend，在通信完成或者触发error、abort或load事件后触发

var xhr = createXHR();
xhr.onload = function(){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
  alert(xhr.responseText);
} else {
  alert("Request was unsuccessful: " + xhr.status);
}
};
xhr.open("get", "altevents.php", true);
xhr.send(null);

var xhr = createXHR();
xhr.onload = function(event){
if ((xhr.status >= 200 && xhr.status < 300) ||
    xhr.status == 304){
  alert(xhr.responseText);
} else {
  alert("Request was unsuccessful: " + xhr.status);
}
};
xhr.onprogress = function(event){
var divStatus = document.getElementById("status");
if (event.lengthComputable){
  divStatus.innerHTML = "Received " + event.position + " of " +
    event.totalSize +" bytes";
}
};
xhr.open("get", "altevents.php", true);
xhr.send(null);

为确保正常执行，必须在调用open()方法之前添加onprogress事件处理程序

CORS，跨资源共享，定义了在必须访问跨源资源时，浏览器远服务器应该如何沟通。CORS基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是应该失败

微软在IE8中引入了XDR类型，这个对象与XHR类型，但是能实现安全可靠的跨域通信

cookie不会随请求发布，也不会随响应返回

只能设置请求头部信息中的Content-Type字段

不能访问响应头部信息

只支持GET和POST请求

XDR对象的使用方法与XHR对象非常相似，也是创建一个XDomainRequest的实例，调用open()方法，再调用send()方法，与XHR对象的open()方法不同，XDR对象的open()方法只接收2个参数：请求类型和URL

所有XDR请求都是异步执行的，不能用它来创建同步请求，请求返回之后，会触发load事件，响应的数据也会保存在responseText属性中

var xdr = new XDomainRequest();
xdr.onload = function(){
  alert(xdr.responseText);
};
xdr.open("get", "http://www.somewhere-else.com/page/");
xdr.send(null)

请求返回前调用abort()方法可以终止请求

xdr.abort();//终止请求

与XHR一样，XDR对象也支持timeout属性以及ontimeout事件处理程序

var xdr = new XDomainRequest();
xdr.onload = function(){
  alert(xdr.responseText);
};
xdr.onerror = function(){
  alert("An error occurred.");
};
xdr.timeout = 1000;
xdr.ontimeout = function(){
  alert("Request took too long.");
};
xdr.open("get", "http://www.somewhere-else.com/page/");
xdr.send(null);

为支持POST请求，XDR对象提供了contentType属性，用来表示发送数据的格式

var xdr = new XDomainRequest();
xdr.onload = function(){
  alert(xdr.responseText);
};
xdr.onerror = function(){
  alert("An error occurred.");
};
xdr.open("post", "http://www.somewhere-else.com/page/");
xdr.contentType = "application/x-www-form-urlencoded";
xdr.send("name1=value1&name2=value2");

要请求位于另一个域中的资源，使用标准的XHR对象并在open()方法中传入绝对URL

var xhr = createXHR();
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      alert(xhr.responseText);
    } else {
      alert("Request was unsuccessful: " + xhr.status);
    }
  }
};
xhr.open("get", "http://www.somewhere-else.com/page/", true);
xhr.send(null);

安全限制

不能使用setRequsetHeader()设置自定义头部

不能发送和接收cookie

调用getAllResponseHeaders()方法总会返回空字符串

通过Preflighted Request的透明服务器验证机制支持开发人员使用自定义的头部、GET和POST之外的方法，以及不同类型的主体内容

这种请求使用OPITONS方法，发送下列头部

Origin，与简单的请求相同

Access-Control-Method，请求自身使用的方法

Access-Control-Headers，自定义的头部信息，多个头部以逗号分隔

Origin: http://www.nczonline.net
Access-Control-Request-Method: POST
Access-Control-Request-Headers: NCZ

服务器可以决定是否允许这种类型的请求，服务器在响应中发送如下头部与浏览器进行沟通

Access-Control-Allow-Origin，与简单的请求相同

Access-Control-Allow-Methods，允许的方法，多个方法以逗号分隔

Access-Control-Allow-Headers，允许的头部，多个头部以逗号分隔

Access-Control-Max-Age，应该将这个Preflight请求缓存多长时间，以秒表示

Access-Control-Allow-Origin: http://www.nczonline.net
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: NCZ
Access-Control-Max-Age: 1728000

通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据

Access-Control-Allow-Credentials:true

如果发送的是带凭据的请求，但服务器的响应中没有包含这个头部，那么浏览器就不会把响应交给JavaScript，于是responseText中将是空字符串，status的值为0，而且会调用onerror()事件处理程序

function createCORSRequest(method, url){
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr){
  xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined"){
  vxhr = new XDomainRequest();
  xhr.open(method, url);
} else {
  xhr = null;
}
return xhr;
}
var request = createCORSRequest("get", "http://www.somewhere-else.com/page/");
if (request){
request.onload = function(){
  //对 request.responseText 进行处理
};
request.send();
}

Firefox、Safari和Chrome中的XMLHttpRequest对象与IE中的XDomainRequest对象类似，都提供了够用的接口，这两个对象共同的属性方法如下

abort()，用于停止正在进行的请求

onerror()，用于替代onreadystatechange检测错误

onload()，用于替代onreadystatechange检测成功

responseText()，用于取得响应内容

send()，用于发送请求

一个网页可以从任何网页中加载图像，不用担心跨域不跨域

通过图像Ping，浏览器得不到任何具体的数据，但通过侦听load和error事件，它能知道响应什么时候接收到的

var img = new Image();
img.onload = img.onerror = function(){
  alert("Done!");
};
img.src = "http://www.example.com/test?name=Nicholas";

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

JSONP由两部分组成：回调函数和数据，回调函数是当响应到来时应该在页面中调用的函数，回调函数的名字一般是在请求中指定的，而数据就是传入回调函数中的JSON数据

function handleResponse(response){
  alert("You’re at IP address " + response.ip + ", which is in " +
        response.city + ", " + response.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

优点在于能够直接访问响应文本，支持在浏览器与服务器之间双向通信

两种实现Comet的方式

长轮询

短轮询时间线

长轮询把短轮询颠倒了一下。页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据之后，浏览器关闭连接，随即又发起一个到服务器的新请求，这一过程在页面打开期间一直持续不断

流

在页面的整个生命周期内只使用一个HTTP连接，具体来说就是浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性的向浏览器发送数据

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 回调函数
      progress(result);
    } else if (xhr.readyState == 4){
      finished(xhr.responseText);
    }
  };
  xhr.send(null);
  return xhr;
}
var client = createStreamingClient("streaming.php", function(data){
  alert("Received: " + data);
}, function(data){
  alert("Done!");
});

这个createStreamingClient()函数接收三个参数：要连接的URL、在接收到数据时调用的函数以及关闭连接时调用的函数

SSE是围绕只读Comet交互推出的API或者模式

var source=new EventSource("myevents.php");

EventSource的实例有一个readyState属性，值为0表示正连接到服务器，值为1表示打开了连接，值为2表示关闭了连接

另外还有三个事件

open，在建立连接时触发

message，在从服务器接收到新事件时触发

error，在无法建立连接时触发

Web Sockets的目标是在一个多带带的持久连接上提供全双工、双向通信

要创建Web Socket，先实例一个WebSocket对象并传入要连接的URL

var socket = new WebSocket("ws://www.example.com/server.php");

实例化WebSocket对象后，浏览器会马上尝试创建连接，与XHR类似，WebSocket也有一个表示当前状态的readyState属性，这个属性的值与XHR并不相同

WebSocket.OPENING(0)，正在建立连接

WebSocket.OPEN(1)，已经建立连接

WebSocket.CLOSING(2)，正在关闭连接

WebSocket.CLOSE(3)，已经关闭连接

WebSocket没有readystatechange事件，不过有其他事件，对应着不同的状态，readyState的值永远从0开始

要关闭Web Socket连接，可以在任何时候调用close()方法

socket.close();

调用close()之后，readyState的值立即变为2，而关闭连接后就会变成3

使用send()方法并传入任意字符串

var socket = new WebSocket("ws://www.example.com/server.php");
socket.send("Hello world!");
//将数据序列化为JSON字符串，然后发送到服务器
var message = {
  time: new Date(),
  text: "Hello world!",
  clientId: "asdfp8734rew"
};
socket.send(JSON.stringify(message));
//当服务器收到消息时，WebSocket对象就会触发message事件，这个message事件与其他传递消息的协议类似，也是把返回的数据保存在event.data属性中
socket.onmessage = function(event){
  var data = event.data;
  //处理数据
};

其他事件

open，在成功建立连接时触发

error，在发生错误时触发，连接不能持续

close，在连接关闭时触发

var socket = new WebSocket("ws://www.example.com/server.php");
socket.onopen = function(){
  alert("Connection established.");
};
socket.onerror = function(){
  alert("Connection error.");
};
socket.onclose = function(){
  alert("Connection closed.");
};

考虑是使用 SSE 还是使用 Web Sockets 时，可以考虑如下几个因素。

首先，你是否有自由度建立和维护 Web Sockets服务器？因为 Web Socket 协议不同于 HTTP，所以现有服务器不能用于 Web Socket 通信。SSE 倒是通过常规 HTTP 通信，因此现有服务器就可以满足需求。

第二个要考虑的问题是到底需不需要双向通信。如果用例只需读取服务器数据（如比赛成绩），那么 SSE 比较容易实现。如果用例必须双向通信（如聊天室），那么 Web Sockets 显然更好。在不能选择 Web Sockets 的情况下，组合 XHR 和 SSE 也是能实现双向通信的。

为确保通过 XHR 访问的 URL 安全，通行的做法就是验证发送请求者是否有权限访问相应的资源

要求以 SSL 连接来访问可以通过 XHR 请求的资源。

要求每一次请求都要附带经过相应算法计算得到的验证码。请注意，下列措施对防范 CSRF 攻击不起作用。

要求发送 POST 而不是 GET 请求——很容易改变。

检查来源 URL 以确定是否可信——来源记录很容易伪造。

基于 cookie 信息进行验证——同样很容易伪造