ajax处理网络请求

Ajax模块在处理网络请求的时候包括以下四个步骤

1.通过XMLHttpRequest类创建xhr对象

​ 2.为xhr对象添加属性与回调方法 ​

3.令xhr对象执行open()方法，指明请求被发往某处 ​

4.令xhr对象执行send()方法，发出请求。

//1.创建对象
var xhr;
if (window.XMLHttpRequest){//普通浏览器    
	xhr=new XMLHttpRequest();
}else{//老版本IE
	xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//3.监听服务器响应
xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
          console.log(xhr.responseText);//将接收到的服务器数据显示到控制台中
    }
};
//2.打开链接
xhr.open("请求方式","请求地址",是否异步:默认为异步true);
//3.5 请求头（POST请求时设置）
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send();

post请求头格式

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8	表示客户端可以接受的内容类型,多个值使用;分号隔开q=0.9 表示权重优先级,/表示可以接受任意类型内容;
Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3	表示客户端可以接受的语言
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Win64x64;	浏览器信息,例如使用的是网井的内核, windows64位系统;
Accept-Encoding: gzip, deflate	支持的压缩格式
Host: localhost:8888	访问地址
Connection: keep-alive	保持连接 和HTTP1.1版本有关,默认保持3s
Content-Type: application/x-www-form-urlencoded	表单提交时才有可能出现,表示表单的数据类型,使用url编码,url编码 % 16位数
Content-Length: 7	post请求 请求体长度
Upgrade-Insecure-Requests: 1	告诉服务器，浏览器可以处理https协议、

请求参数

 // post参数在send中
            xhr.send("stuName=" + username + "&stuScore=" + score)
 // ajax发送get请求参数,永远在地址后面
            xhr.open("GET","04.php?uname=" + value,true)

xhr对象的常用属性与方法

1.onreadystatechange属性指向一个回调函数。当页面的加载状态发生改变的时候readyState属性就会跟随发生变化，而这时readystatechange属性所对应的回调函数就会自动被调用。 ​

语法：xhr.onreadystatechange = function(){};

2.状态码

语法：xhr.onreadystatechange = function(){ ​ if(xhr.readyState == n){ ​ // 执行对应的函数 ​ } ​ }

说明：

值为0,对应常量UNSENT ​ 表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。 ​ ​

值为1,对应常量OPENED ​ 表示send()方法还没有被调用，仍然可以使用setRequestHeader() 设定HTTP请求头 ​ ​

值为2,对应常量HEADERS_RECEIVED ​ 表示send()方法已经执行，并且头信息和状态码已经收到。 ​ ​

值为3,对应常量LOADING ​ 表示正在接收服务器传来的body部分的数据，如果responseType属性 ​ 是text或者空字符串，responseText就会包含已经收到的部分信息。

值为4,对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了

3.响应码

语法：if(xhr.readyState == n){ ​ if(xhr.status == 200){ ​ //通信成功 ​ } ​ } ​ 说明： ​ a.本属性是只读属性。 ​ b.本属性有以下可能值：

​ 200, OK，访问正常

​ 301, Moved Permanently，永久移动 ​

302, Move temporarily，暂时移动 ​

304, Not Modified，未修改 ​

307, Temporary Redirect，暂时重定向 ​

401, Unauthorized，未授权 ​ 403, Forbidden，禁止访问

404, Not Found，未发现指定网址 ​

500, Internal Server Error，服务器发生错误

补充：补充：一般来说认为200就是通信成功的标志。

4.statusText

描述： 表示服务器发送的状态提示，是一个只读字符串。 ​ 语法：xhr.statusText ​ 说明：不同于status属性，该属性返回状态码所对应

5. responseText

描述：返回从服务器接收到的字符串内容，该属性为只读。 ​ 如果本次请求没有成功或者数据不完整，该属性就会等于null。 ​ 如果服务器返回的数据格式是JSON，就可以使用responseText属性来进行数据解析。 ​ 语法：xhr.responseText

的状态信息。 ​ 比如OK