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");

秒客网

Ajax笔记 XHR XMLHttpRequest

相关文章