AJax和comet

一，XMLHttpRequest对象
IE5是最早引入XHR对象的浏览器，XHR对象是通过MSXML库中的一个ActiveX对象实现的
使用MSXML库中的XHR对象，编写一个函数如下
function ceateXHR(){
if(typeof argument.callee.activeXString != "String"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
var 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(argument.callee.activeXString);
}
IE7+，Firefox,Opera,CHrome和safari中支持原生XHR对象，
var xhr = new XMLHttpRequest();
为了兼容以上所有，使用下列函数
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXobject != "undefined"){
if(typeof argument.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]);
argument.callee.activeXString = versions[i];
break;
}catch(ex){
//跳过
}
}
}
return new ActiveXObject(argument.callee.activeXString);
}else{
throw new Error("No XHR object available");
}
}
创建对象，var xhr = createXHR();
1，XHR的用法
open(请求的类型（get或post），请求的URL，是否异步发送的布尔值),
要点：URL相对于执行代码的当前页面（可以使用绝对路径），open方法不会真的发送请求只是启动一个请求以备发送
send(作为请求主体发送的数据),发送特定的请求，可以传人null，调用函数后请求会被派送到服务器
如果请求时同步的，js代码会等到服务器响应之后执行，响应的数据会自动填充XHR对象的属性
responseText：作为响应主体被返回的文本
responseXML：如果响应的内容类型是text/xml,application/xml，这个属性会保存包含响应数据的XML DOM文档
status：响应的http状态
status：http状态的说明
响应后，首先检查status属性，http状态200表示成功，此时responseText属性的内容就绪，内容类型正确的同时，responseXML也可以访问了
状态304表示请求的资源没有被修改，可以直接使用浏览器中缓存的版本，
xhr.open("get","example.text",false);
xhr.send(null);
if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
alert(xhr.responseText);
}else{
alert("Request was unsuccessful:" + xhr.status);
}
一般情况下使用异步请求，此时js会继续执行不必等待服务器的响应，此时检测XHR的readyState属性，属性值如下
0：未初始化，尚未调用open方法
1：启动，调用了opend方法，未调用send方法
2，发送，调用了send方法，未接受到响应
3，接收，接收到部分响应数据
4，完成，接收到全部的响应数据，而且在客户端使用了
只要readyState属性的值发生变化就会触发readystatechange事件，可以利用这个事件检测每次状态后的readyState的值
必须在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",true);
xhr.send(null);
响应之前调用xhr.abort(),可以取消异步请求，由于内存原因，不建议重用XHR对象
2，HTTP头部信息
每个http请求和响应都会带有相应的头部信息，XHR对象也提供了操作这两种头部信息的方式
发送XHR请求的同时，会发送下列头部信息
Accept：浏览器能够处理的内容类型
Accept-Charset：浏览器能够显示的字符集
Accept-Encoding：浏览器能够处理的压缩编码
Accept-Language：浏览器当前设置的语言
Connection：浏览器与服务器之间连接的类型
Cookie：当前页面设置的任何cookie
Host：发送请求的页面所在的域
Referer：发送请求的页面的URL
User-Agent：浏览器的用户代理字符串
setRequestHeader(头部字段的名称，头部字段的值)方法可以自定义设置头部信息，在open和send方法之前调用此方法
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
alert(xhr.reponseText);
}else{
alert("Request was unsuccessful :" + xhr.status);
}
}
};
xhr.open("get","example.php",true);
xhr.setRequestHeader("MyHeader","MyValue");
xhr.send(null);
调用XHR对象的getResponseHeader()方法，传人头部字段名称，可以返回相应的响应头部信息
getAllResponseHeaders()方法，取得一个包含所有头部信息的长字符串
var myheader = xhr.getResponseHeader("myHeader");
var allheader = xhr.getAllResponseHeader();
服务器端，可以利用头部信息向浏览器发送额外的，结构化的数据，没有自定义的情况下，getAllResponseHeader()方法会返回如下
Date：sun,14 Nov 2004 18:04:03 GMT
Server: Apache/1.3.29(Unix)
Vary:Accept
X-Powered-By:PHP/4.3.8
Connection:close
Content-Type:text/html;charset=iso-8859-1
3，GET请求
用于向服务器查询某些信息，可以将查询字符串追加到URL末尾，
查询字符串，每个参数的名称和值使用encodeURIComponent()进行编码，而且所有名值对使用&分隔
xhr.open("get","example.php?name1=value&name2=value2",true);
使用下面函数向现有的URL末尾添加查询字符串参数
function addURLParam(url,name,value){
url += (url.indexof("?") == -1 ? "?" : &);
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}
使用下面函数来构建请求URL示例
var url = "example.php";
url = addURLParam(url,"name","Nicholas");
xhr.open("get",url,true);
4，POST请求
用于向服务器发送应该被保存的数据，
post请求将数据作为请求的主体提交，请求的主体可以包含非常多的数据，格式不限
发送post请求，要向send()方法中传人某些数据，可以是XML DOM文档，可以使字符串
XHR模仿表单提交，首先将Content-type头部信息设置为application/x-www-form-urlencoded，然后以适当的格式创建一个字符串，可以使用serialize()函数来创建字符串
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));
}
php文件通过$_POST取得提交的数据
<?php
header("Content-type:text/plain");
echo <<<EOF
Name:{$_POST["user-name"]}
Email:{$_POST['user-email']}
EOF;
?>
如果不设置Content-type头部信息，那么发送给服务器的数据不会出现在$_POST超级全局变量中，
要访问同样的数据，使用$HTTP_RAW_POST_DATA
二，XMLHttpRequest2级
1，FormData
为了实现表单数据的序列化，FormData类型为序列化表单以及创建与表单格式相同的数据
var data = new FormData();
data.append("name","Nicholas");
append()方法接收两个参数，键值对，
通过向FormData构造函数中传人表单元素，可以用表单元素的数据预先向其中填入键值对
var data = new FormData(document.forms[0]);
创建了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));
XHR对象能够识别传人的数据类型是FormData的实例，并配置适当的头部信息
2，超时设定
XHR对象的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.timoeout = 1000;
xhr.ontimeout = function(){
alert("Request did not return in a second.");
};
xhr.send(null);
3，overrideMimeType()方法
Firefox最早引入了overrideMimeType()方法，用于重写XHR响应的MIME类型，可以把响应当做XML而非纯文本来处理
var xhr = createXHR();
xhr.open("get","text.php",true);
xhr.overrideMimeType("text/XML");
xhr.send(null);
三，进度事件
Progress Events规范定义了与客户端服务器通信有关的事件
loadstart：在接收到响应数据的第一个字节时触发
progress：在接收响应期间持续不断的触发
error：在请求发生错误时触发
abort：因为调用abort()方法而终止连接时触发
load：在接收到完整的响应数据时触发
loadend：在通信完成，或者触发了error，abort，load事件后触发（尚未被任何浏览器支持）
1，load事件
firefox引入了load事件，用于替代readystatechange事件
响应接收完毕后触发load事件，没有必要去检测readyState属性了，
onload会接收到event对象，target属性就指向XHR对象，可以访问到XHR对象的所有方法和属性
对于不支持的浏览器
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","alertEvents.php",true);
xhr.send(null);
2，progress事件
事件在浏览器接收数据期间周期性触发，
onprogress事件处理程序会接收到一个evnet对象，其target属性是XHR对象
包含额外的三个属性：lengthComputable(进度信息是否可用的布尔值),position(已经接收的字符数),totalSize(根据Content-Length响应头部确定的预期字节数)
var xhr = createXHR();
xhr.onload = function(){
if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
alert(xhr.responsText);
}else{
alert("Request was unsuccessful" + xhr.status);
}
};
xhr.onprogress = function(event){
var divStatus = document.getElementById("status");
if(event.lengthComputable){
divStatus.innerHTML = "Recevied " + event.position + "Of" + event.totalSize + "bytes";
}
};
xhr.open("get","alertEvent.php",true);
xhr.send(null);
四，跨源资源共享(CORS)
思想是使用自定义的http头部，让浏览器与服务器进行沟通，从而决定请求或响应的成功与否
请求的origin头部，包含请求页面的源信息（协议，域名，端口），
如果服务器认为是可接受的，在Origin-Control-Allow-Origin头部中回发相同的源信息，如果是公共资源，可以回发*
1，IE对CORS的实现
IE8引入XDR类型，类似XHR对象，但能实现安全可靠的跨域通信，区别如下
cookie不会随请求发送，也不会随响应返回
只能设置请求头部信息中的Content-type字段
不能访问响应头部信息
只支持GET和POST请求
XDR使用方法，创建一个XDomainRequest的实例，调用open()方法，再调用send()方法，
open()方法只接收两个参数，请求类型的UR，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);
接收到响应后，只能访问响应的原始文本，没有办法确定响应的状态代码，只要响应有效就会会触发load事件，
失败就会触发error事件，遗憾的是，除了错误本身外，没有其他信息可用，因此唯一能够确定的就是请求未成功，
检测错误可以指定一个onerror事件处理程序
var xdr = new XDomainRequest();
xdr.onload = function(){alert(xdr.responseText)};
xdr.onerror = function(){alert("An error occurred.")};
xdr.open("get","http://www.somewhere-else.com/page/");
xdr.send(null);
返回请求前调用abrot()方法会终止请求
同样支持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对象提供了contenType属性，用来表示发送数据的格式
var xdr = new XDomainRequest();
xdr.onload = function(){};
xdr.onerror = function(){};
xdr.open("post","http://www.somewhere-else.com/page/");
xdr.contentType = "application/x-www-form-urlencoded";
xdr.send("name1=value1&name2=value2");
2，其他浏览器对CORS的实现
通过XMLHttpRequest对象实现对CORS的原生支持，请求另一个域中的资源，使用标准的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","htt://www.somewhere-else.com/page/",true);
xhr.send(null);
跨域XHR对象有限制，
不能使用setRequestHeader()设置自定义头部
不能发送和接受cookie
调用getAllResponseHeader()方法总会返回空字符串
3，Preflighted Request
透明服务器验证机制支持开发人员使用自定义的头部，
使用下列高级选项来发送请求时，就会向服务器发送一个Preflight请求，使用OPTIONS方法，发送下列头部
Origin：与简单的请求相同
Access-Control-Request-Method：请求自身使用的方法
Access-Control-Request-Header：自定义的头部信息，多个头部用逗号分隔
Origin：http://www.nczonline.net
Access-Control-Request-Method:POST
Access-Control-Request-Header:NCZ
发送这个请求后，服务器可以决定是否允许这种类型的请求，服务器通过在响应中发送如下头部与浏览器进行沟通
Access-Control-Allow-Origin:与简单请求相同
Access-Control-Allow-Method：允许的方法，多个方法以逗号分隔
Access-Control-Allow-Header：允许的头部，多个头部以逗号分隔
Access-Control-Max-Age：应该将这个Prefight请求缓存多长时间（秒）
Access-Control-Allow-Origin:http://www.nczonline.net
Access-Control-Allow-Method：POST,GET
Access-COntrol-Allow-Header:NZC
Access-Control-Max-Age:1728000
第一次发送这种请求时会多一个http请求
4，带凭据的请求
默认情况下跨源请求不会提供凭据（cookie，HTTP认证，客户端SSL证明）
通过将withCredentials属性设置为true，可以指定某个请求应该发送凭据
如果服务器端接收带凭据的请求，会使用Access-Control-Allow-Credentials:true来响应
如果服务器的响应中没有这个头部，浏览器就不会把响应交给javascript，responseText中将是空字符串status的值为0，调用onerror事件处理程序
5，跨浏览器的CORS
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.send();
}
firefox,safari,chrome中的XMLHttpRequest对象和IE中XDomainRequest对象类似，共有属性方法如下
abort(),用于停止正在进行的请求
onerror()，用于替代onreadystatechange()检测错误
onload(),用于替代onreadystatechange()检测成功
responseText(),用于取得响应内容
send(),用于发送请求
五，其他跨域技术
1，图像Ping
使用img标签，动态的创建图像，使用onload和onerror事件处理程序来确定是否接收到了响应
图形Ping是与服务器进行简单，单向，的跨域通信的一种方式
请求的数据通过查询字符串形式发送的，响应的是任意内容，通常是像素图或204响应
var img = new Image();
img.onload = img.onerror = function(){};
img.src = "http://www.example.com/test?name=Nicholas";
请求从设置src属性那一刻开始，请求中发送了name参数
图像Ping用于跟踪用户点击页面或动态广告曝光次数，
两个缺点，只能发送get请求，无法访问服务器的响应文本，只能单向通信
2，JSONP
被包含在函数调用中的JSON，
callback({"name":"Nicholas"});
JSONP包含两部分，回调函数和数据，回调函数是当响应到来时应该在页面中调用的函数，函数名一般在请求中指定
数据就是传人回调函数中的JSON数据，例如:http://freegeoip.net/json/?callback=handleResponse，指定的函数名为handleResponse()
JSONP是通过动态script元素使用的，使用时可以为src属性指定一个跨域URL
function handleResponse(response){
alert("you're at IP address" + resopnse.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);
可以直接访问响应文本，支持在浏览器与服务器之间双向通信，但不能保证安全，确定JSONP请求是否失败不是很容易
html5给script提供onerror事件处理程序，尚未得到任何任何浏览器支持，为此常通过设置计时器检测指定时间内是否收到了响应
3，Comet
Ajax是一种从页面向服务器请求数据的技术，Comet是一种服务器向页面推送数据的技术
Comet能够让信息近乎实时的被推送到页面上，非常适合处理体育比赛的分数和股票报价
两种实现Comet的方式：长轮询和流
长轮询：页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到有数据可发送，
发送完数据之后，浏览器关闭连接，随即又发起一个到服务器的新请求，这一过程在页面打开期间持续不断
长轮询是服务器等待发送响应后发送数据
HTTP流：浏览器向服务器发送一个请求，服务器保持连接打开，然后周期性向浏览器发送数据
DOM浏览器中，通过监听readystatechange事件及检测readyState的值是否为3，利用XHR对象实现流
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!");
});
4，服务器发送事件
1）SSE API
创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据，
服务器响应的MIME类型必须是text/event-stream，支持长短轮询，和http流
首先创建一个新的EventSource对象，并传进一个入口点：
var source = new EventSource("Myevent.php");url要与创建对象的页面同域
EventSource实例有个readyState属性，0表示正连接到服务器，1表示打开了连接，2表示关闭了连接
还有open事件,在建立连接时触发，message事件，在服务器接收到新事件时触发，error事件，在无法建立连接时触发
服务器发回的数据以字符串形式保存在event.data中
默认情况下，EventSource对象会保持与服务器的活动连接，连接断开会重新连接
强制断开使用close()方法，source.close()
2）事件流
服务器事件会通过一个持久的http响应发送，这个响应的MIME类型为text/event-stream
响应的格式为纯文本，最简单的情况是每个数据项前有data
对于多个连续的以data开头的数据行，将作为多段数据解析，每个值之间有一个换行分隔符
只有包含data：的数据行后有空行，才会触发messge事件，
通过id：前缀可以给特定的事件指定一个关联的ID,位于data：行前面和后面皆可
设置了ID，EventSource对象会跟踪上一次触发的事件，连接断开时，会向服务器发送一个包含名为last-Event-ID的特殊HTTP头部的请求，以便服务器知道下一次触发的事件
5，Web Socket
在一个单独的持久的连接上提供全双工，双向通信
一个http请求发送到服务器已发起连接，取得服务器响应后，建立的连接使用http升级从http协议交换为web Socket协议
ws://;wss://
1）Web Socket API
首先实例一个WebSocket对象并传人要连接的URL
var socket = new WebSocket("ws://www.example.com/sever.php");
必须给websocket构造函数传人绝对的URL，
浏览器在实例化websocket对象后，马上尝试创建连接，readyState属性
WebSocket.OPENING(0)：正在建立连接
WebSocket.OPEN(1)：已经建立连接
WebSocket.CLOSING(2)：正在关闭连接
WebSocket.CLOSE(3)：已经关闭连接
没有readystatechange事件，readyState永远是从0开始的
关闭WebSocket，使用close方法
2）发送和接收数据
send()方法
var socke = new WebSocket("ws://www.example.com/server.php");
socket.send("hello world");
websocket只能发送纯文本数据，对于复杂的结构，将数据序列化为JSON字符串，使用stringify()方法
当服务器向客户端发来消息时，WebSocket对象会触发message事件，这个message事件与其他传递消息的协议类似，
也是把返回的数据保存在event.data属性中
socket.onmessage = function(event){
var data = event.data;
//处理数据
}
3）其他事件
open：在成功建立连接时触发
error：在发生错误时触发，连接不能持续
close：在连接关闭时触发
WebSocket对象不支持DOM2级事件监听器，必须使用DOM0级语法分别定义每个事件处理程序
var socket = new WebSocket("ws://www.example.com/server.php");
socket.onopen = function(){};
socket.onerror = function(){};
socket.onclose = function(){};
只有close事件对象包含额外的三个属性
wasClean：布尔值，表示连接是否已经明确的关闭
code：服务器返回的数据状态码
reason：字符串包含服务器发回的消息
6，SSE与Web Socket
SSE,支持单向的从服务器读取数据
WebSocket，支持双向通信
SEE和XHR组合也可以实现双向通信
六，安全
确保XHR访问的URl安全，通行的做法是验证发送请求者是否有权限访问相应的资源
要求以SSL连接来访问可以通过XHR请求的资源
要求每一次请求都附带经过相应算法计算得到的验证码
要求发送POST而不是GET请求（对CSRF攻击没有作用）
检查来源URL以确保是否可信，（对CSRF攻击没有作用，来源记录很容易伪造）
基于cookie信息进行验证（对CSRF攻击没有作用，容易被伪造）