xhr和跨域问题

ajax简介
1.XHR出现之前都是通过一个隐藏的frame或者内嵌的farme实现这种操作

2.XMLHttpRequest对象
IE5是第一个引进XHR对象的浏览器，通过MSXML库中的一个ActiveX对象实现的。
在IE5中XHR有三种不同的XHR对象:MSXML2.XMLHttp,MSXML2.XMLHttp.3.0,MSXML2.XMLHttp.6.0
通用的XHR对象可以使用如下的函数
IE7和之前的版本


function craeteXHR()
{
if(typeof arguments.callee.activeXString!='string')
{
var versions=['MSXML2.XMLHttp','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp.6.0'],
i.len;
for(i=0,len=versions.length;i<len;i++)
{
try{
new ActiveXObjrct(versions[i]);
arguments.callee.activeXString=versions[i];
}
catch(ex)
{
//跳过
}
}
return new ActiveXObjrct(arguments.callee.activeXString); 
}
}


支持更高的版本


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


}


3.XHR
open(meth,url,boolean)
meth:GET|POST
url:需要传入的url
boolean:
1.false 表示异步，不用等上一个的xhr返回就接着发送下一个
2.true 表示同步，要等到上一个的xhr返回才能发送下一个
send(null)
如果不需要发送数据着一定是null


responseText:所有服务器返回的信息都会存在此
responseXML:若果返回的内容是"text/xml"或者是"application/xml"那么这里就保存着响应数据的XMLDOM文档，不然的话就是null
status:响应的http状态  其中200:表示成功 304表示请求的资源没有改变可以继续使用缓存
statusText:http的状态说明
readyStatus:表示请求或者响应的当前活动
0:为初始化 尚未调用open();
1:启动   调用open();未调用send()
2:发送     调用send()未收到返回信息
3:接收     收到部分返回信息
4:完成   收到全部返回信息
var xhr=createXHR()
onreadyStatus=function()
{
if(readyStatus==4)
{
if((xhr.status>=200&&xhr.status<=300)||xhr.status==304)
{
alert(resposeText);
}
else
{
alert(失败!)
}
}
}
xhr.open(meth,url,ture);
xhr.send(null);
最后还可以使用abort()来取消异步的请求
setRequsetHeader()//设置发送的头信息，放在open()和send()之间
getRequestHeader()//获取收到的头信息
getAllRequestHeader()//获取收到的所有的头信息的字符串


XMLHttpRequest 二级
FormData:表单的序列化
var data=new FormData();


data.append('name','value')
或者直接
form=document.getElementById('form')
data=new FormData(form)


然后send(data);


IE8+的超时设定
IE8为XHR设置了一个timeout的属性，如果时间超过timeout时就会直接停止调用回调的函数
eg:
timeout=1000;
xhr.ontime=function()
{
alert('时间超出！');
}
进度事件:
loadstart:接收到响应数据的第一个字节触发
progress:在接受响应期间持续不断的触发
可以接收到一个event事件里面有三个属性:
lengthComputable:表示进度条是否可用
position:已经接收到的数据字节数
totalSize:要接收的总的字节数
error:发生错误时触发
abort:值调用abort()强制中断时触发
load:在加载完后触发
loadend:在加载完或者发生abort，error，load时触发




跨域资源共享:
1.cors:主要是通过Access-Control-Allow-Origin实现所有的东西
1.1 IE对CORS的实现
IE8引入了XDR类型，cookie不会随请求发送，
只能设置请求头部信息的Content-Type字段
不能访问响应头部信息
只支持GET和POST请求
只有异步
error和load事件处理错误和加载完成的事情

1.2 其他浏览器的实现 CORS
1.Preflighted Requests

2.带凭据的请求

3.跨浏览器的CORS

4.图像Ping技术
是一种简单，单向的跨域技术
主要通过:load和error事件来执行，知道响应收到的时间
eg:
var img=new IMG();
img.load=img.error=function（）
{
alert(time);
}
img.src='http://test.png'
常用于跟踪用户点击页面或者动态广告曝光次数
5.JSONP技术
需要服务器配合，就是通过<script></script>标签达到跨域问题的解决
把函数传到后台，后台把函数和数据封装好在传到前端，前端把返回的封装好的字符串当做js代码来执行
6.通过修改document.domain来跨子域
针对多个frame框架而言
7.window.name跨域
在一个窗口里面，窗口载入的所有的页面都是共享一个window.name
8.window.postMessage方法跨域


Comet:服务器想浏览器推送东西的技术
1.长轮询:使用XHR和setTimeout()就可以实现
短轮询:服务器立即发生数据然后关闭链接
长轮询:服务器一直保持打开的直到有数据可以发送,发送完数据就立即结束
2.流:HTTP流在页面的整个过程中只有一个HTTP链接
浏览器向服务器发送一个请求然后服务器就周期性的向浏览器发送数据。
eg:
<?php
while(ture)
{
ehco "11111";
flush();
sleep(10)//休息几秒
}
?>
3.