原生js之四步走搞定Ajax

      说到Ajax，不得不先提一下HTTP（HTTP，HyperText Transfer Protocol)协议，中文名：超文本传输协议，是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。一次HTTP请求，包含了两个重要的部分：上行request（请求）和下行response（响应）。

　　HTTP协议定义了很多与服务器交互的方法，最基本的有4种，分别是GET,POST,PUT,DELETE. 一个URL地址用于描述一个网络上的资源，而HTTP中的GET, POST, PUT,DELETE就对应着对这个资源的查，改，增，删4个操作。 我们最常见的（也是我们关心的）就是GET和POST了。GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。

我们看看GET和POST的区别：

1. GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditPosts.aspx?name=test1&id=123456.  POST方法是把提交的数据放在HTTP包的Body中.

2. GET提交的数据大小有限制（因为浏览器对URL的长度有限制，本身并没有限制），而POST方法提交的数据没有限制。

3. GET方式提交数据，会带来安全问题，比如一个登录页面，通过GET方式提交数据时，用户名和密码将出现在URL上，如果页面可以被缓存或者其他人可以访问这台机器，就可以从历史记录获得该用户的账号和密码。

如果你使用chrome浏览器的话，可以再下面的页面中看到这两种请求携带的信息:

　　通常，浏览器产生HTTP请求，是由于用户输入了新的网址、或者点击了超级链接，使页面跳转，这将导致页面的全局刷新。而Ajax（Asynchronous Javascript And XML：异步JavaScript和XML）技术，可以使网页悄悄地、偷偷地发起HTTP请求，请求回来的数据在页面局部刷新呈递。ajax的使用其实很简单：

第一步，new出一个XMLHttpRequest对象：

这里变量名xhr可以随便起，只是一般工程师都喜欢使用这个名字，就像var arr一样，姑且当做一种约定俗成的东西就好，方便大家交流。
第二步，处理服务器上面返回的响应：

其中，if语句小括号中的的语句：readyState表示返回XMLHTTP请求的当前状态，具体数值示意如下：

 

0 （未初始化）	对象已建立，但是尚未初始化（尚未调用open方法）
1 （初始化）	已调用send()方法，正在发送请求
2 （发送数据）	send方法调用完成，但是当前的状态及http头未知
3 （数据传送中）	已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 （完成）	数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据

 

第三步，创建一个请求，第一个参数是请求的类型get或者post，第二个参数就是请求的路径，第三个参数叫做是否使用异步机制：

如果是post请求，在发送请求前需要做以下处理：

第四步，发送请求：

总结一下：