Ajax笔记 XHR XMLHttpRequest

XMLHttpRequest
xhr    XmlHttpRequest

var request ;
if(Windows.XMLHttpRequest)
{    request = new XMLHttpRequest();//IE7 +,Firefox,Chrome,Opera,Safari
}else{
request=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5
}

HTTP
网络通信规则
无状态协议    不建立持久的连接

请求过程
1、建立TCP连接
2、浏览器向服务器发送请求命令
3、浏览器发送请求头
4、服务器应答
5、服务器发送相应命令
6、服务器向浏览器发送数据
7、服务器关闭TCP连接

四部分组成：
1、方法、动作   Get orPOST
2、Url        请求地址
3、Header    请求头   客户端环境信息、身份验证
4、请求体    请求正文   客户提交的查询字段   或表单数据

HTTP响应
1、数字和文字组成的状态码
2、响应头    服务器信息  内容长度
3、相应体    相应正文

响应状态码：
1XX： 信息类，表示收到浏览器请求，正在进一步处理中
2XX： 成功，表示用户请求被正确接收
3XX： 重定向，表示请求没有成功，客户必须采取进一步的动作
4XX： 客户端错误，表示客户端提交的请求有错误 例：404  请求文档不存在
5XX： 服务器错误，服务器不能完成对请求的处理

XMLHttpRequest发送请求

open(method,url,async);
open(GET,Http://baidu.com,True);
send(string);
send(name=lala&age=3);

例如：GET
var request = new XMLHttpRequest();
request.open("GET","Http://baidu.com",true);
request.send();

POST
var request = new XMLHttpRequest();
request.open("POST","http://baidu.com",true);
request.setRequestHeader("Content-Type","x-www-form-urlencoded");
request.send("kw=百度一下");

XMLHttpRequest取得响应
resposeText:        获取字符串格式的相应数据
resposeXMl:        获得XML格式的相应数据
status和statusText    以数字和文本形式返回HTTP状态码
getAllResposeHeader();    获取所有的响应报头
getResposeHeader();    查询相应中的某个字段的值
readyState属性
0：未初始化  open未调用
1：open调用  服务器已建立
2：服务器已接收    接收到头信息了
3：请求处理中    接收到相应主体了
4：请求已完成   响应完成

request.readState;
request.onreadyStatechange=function(){
if(request.readyState==4 && request.status ==200){
do something;
}
};

Content-Type:
text/plain        纯文本
application/json    Json
text/xml        XML
text/html        HTML
appliaction/javascript    Javascript

Json解析
var jsondata = '{"s":[{"name":"a"},{"name":"a"},{"name":"a"}]}
var json = eval('('+jsondata+')');//不判断是否合法  不能屏蔽javascript语句

var json = JSON.parse(jsondata);//校验字符串  屏蔽javascript

JQuery实现Ajax

$.ajax(
type:"POST|GET",
url:"http://baidu.com",
data:{id:id},
dataType:"json",//预期返回的数据类型
success:function(data){},请求成功回掉函数，传入返回后的数据
error:function(data){}//请求失败调用，传入xhr对象
)

跨域
处理跨域方法一        代理
处理跨域方法二        JSONP
处理跨域方法三        XHR2
XMLHttpRequest Level2
IE10以下都不支持
服务器添加响应头：
header('Access-Control-Allow-Origin:"*"');//*  所有域名
header("Acctss-Control-Allow-Methods:POST,GET");