Ajax原生XHR对象

前端学了有一段时间了，在项目中我一般使用的都是jQuery封装好的Ajax函数($.ajax、$.get、$.post)，使用很是的简单方便，但为了更清楚的了解Ajax，须要学习原生xhr对象。

 

先来明确什么是Ajax，Ajax：“Asynchronous JavaScript and XML”，翻译过来就是异步JavaScript和XML。

Ajax是一种用于建立快速动态网页的技术，经过在后台与服务器进行少许数据交换，AJAX可使网页实现异步更新。意味这能够再不从新加载整个网页的状况下，对网页的某部分进行更新。

 

建立Ajax：

 

要建立Ajax，主角是XMLHttpRequest（下简称XHR）对象。

第一步：建立XHR对象

var xhr = new XMLHttpRequest();

 

 

第二步：向服务器发送请求

方法：open(method,url,async) 和 send(string)

open()方法传入三参数

• method：请求的类型（GET/POST）
• url：文件在服务器上的位置
• async：布尔值，true表示异步，false表示同步（可选，默认为true）

send()方法将请求发送到服务器，有一个可选的参数string，仅用于POST类型的请求。

 

这里主要讨论一下async参数，XMLHttpRequest对象若是要用于AJAX的话，其open()方法的async参数必须设置为true。那若是参数设置为false会有什么样的后果呢？同步请求的后果是：JavaScript会等到服务器响应就绪才继续执行。若是是比较大型的请求或者服务器处于繁忙状态，应用程序会挂起或中止。简单点说就是页面会一直卡到响应内容回来才继续运行。

 

在发送GET请求的时候，可能获得缓存的信息（IE中），致使咱们发送的异步请求不能正确的返回咱们想要的最新的数据。

 

方法一：在url中添加一个惟一的ID：（随机数）

1 xhr.open("GET","demo.asp?t=" + Math.random(),true);
2 xhr.send();

这种方式能够避免拿到缓存中的旧消息，但它的每次请求仍然会被浏览器缓存起来，占用浏览器资源。

 

方法二：用setRequestHeader(header，value)方法向请求添加HTTP头。（关于setRequestHeader在后面讨论）

1 xhr.open("GET","demo.asp",true);
2 xhr.setRequestHeader("If-Modified-Since","0");  //设置浏览器不使用缓存
3 xhr.send();

GET中的url能够拼接字符串从而达到传参，而传送数据通常用POST。

若是咱们用POST方法向服务器发送数据，应该这样设置http头。

1 xhr.open("POST","postdemo.asp",true);
2 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  //不然数据没法被正常接收
3 xhr.send("name=amie");  //send里写要发送的数据

 

第三步：服务器响应

XMLHttpRequest对象的responseText和responseXML属性分别得到字符串形式的响应数据和XML形式的响应数据

能够在控制台里输出响应

console.log(xhr.responseText);

还有三个关于响应状态的属性也常常用到：

• readyState：存有XMLHttpRequest的状态。XHR对象会经历5种不一样的状态
• 0：请求未初始化（new完后）；
• 1：服务器链接已创建（对象已建立并初始化，还没有调用send方法）；
• 2：请求已接收；
• 3：请求处理中；
• 4：请求已完成，响应就绪；
• status：（HTTP状态码不少，请自行了解，举例常见的）
• 200：请求成功
• 404：未找到页面
• onreadystatechange：存储函数（或函数名），每当readyState属性改变时，就会调用该函数。

所以上面那行代码能够改成：

1 xhr.onreadystatechange = function () {
2     if (xhr.readyState == 4 && xhr.status == 200) {
3     console.log(xhr.responseText);
4 };

 

关于setRequestHeader

在HTTP协议里，客户端向服务器请求某个网页的时候，须要发送一个HTTP协议的头文件，而XMLHttp就是经过HTTP协议去的网站上的文件数据的，因此也要发送HTTP头给服务器。

发送请求时会默认发一个头文件，若是咱们须要修改或添加参数，就须要用到setRequestHeader方法。

Ps:

1.响应头包含了许多信息，有兴趣的小伙伴能够去了解一下。（HTTP涉及了许多计算机网络的知识）。

2.查看http请求头能够到开发者工具里的Network里查看。

 

(写在结尾：前端新人一枚~欢迎你们指出错误，谢谢阅览~)

 

【转发自http://www.cnblogs.com/YiminLiu/p/6078987.html】