ajax（1）

详情参考慕课网视频《ajax全接触》

第一部分：AJAX技术简介

ajax的概念：首先它不是一种编程语言，它是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。

ajax技术特点：使用了ajax技术的网页，通过在后台跟服务器进行少量的数据交换，网页就可以实现异步局部更新。

ajax技术使用范围：搜索建议、博客、微博、微信、社交网站、在线地图、表单等都有运用。

怎样运用ajax技术 实现异步请求和页面局部刷新？？？包括三个方面的内容：

• 运用HTML和CSS来实现页面，表达信息；
• 运用XMLHttpRequest同web服务器进行数据异步交换；
• （当数据拿回来之后）运用javascript操作DOM，实现页面动态局部更新；

第二部分：同步与异步

同步交互的概念：客户端发出一个请求，然后服务器端处理、响应，在服务器端响应未完成前，客户端只能等待，不能进行其他任何操作。当服务器端响应完成后，客户端会重新载入页面。如果有错误，那么客户端只能再次发出请求，再次等待服务器的处理响应，再次重载页面。

异步交互的概念：客户端向服务器端发出一个请求，然后服务器端处理、响应，响应完成后，客户端更新局部页面。在异步交互的过程中，客户端不用等待服务器端响应，直接就能进行其他的操作；客户端能在不重载页面的情况下，实时向服务器端发送请求，并处理响应，以更新页面局部数据。

异步交互的特点：页面上的操作和服务器端的操作不会相互堵塞。

异步交互的技术基础：客户端JavaScript需要使用XMLHttpRequest对象的属性和方法来同服务器端进行通信，实现后台与服务器的数据交换。

第三部分：HTTP请求

HTTP是计算机通过网络进行通信的规则。主要作用是：实现web客户端向服务器请求信息和服务。HTTP的特点：是一种无状态的协议（不建立长久的连接，也就是服务器端不保留连接的信息）。

一个HTTP请求的完整过程，分为以下7个步骤：

（1）客户端与服务器端建立TCP/IP连接

（2）web浏览器向web服务器发送请求命令   

（3）web浏览器发送请求头信息

（4）web服务器做出应答

（5）web服务器发送应答头信息

（6）web服务器向浏览器发送数据

（7）web服务器关闭TCP/IP连接

一个完整的HTTP请求一般由四部分组成：
（1）HTTP请求的方法或动作，比如是GET  或是 POST

（2）正在请求的URL ，即请求的地址。

（3）请求头，包含一些客户端环境信息，身份验证信息等。

（4）请求体，也就是请求正文（适用于POST请求）。请求正文中可以包含客户提交的查询字符串信息、表单信息等。

一般说来 请求头和请求体之间有一个空行，这个空行非常重要，是作为请求头和请求体的分隔。

GET 方法：（它是默认的HTTP请求方法）

一般用于信息获取，比如查询信息；使用url传递参数（请求的信息所有人都是可见的）；对所发送信息有限制，一般在2000个字符之内；GET请求是幂等的，也就是说执行一次与执行一万次，它的效果是相同的，不改变源数据。

注意：使用GET请求时，是没有请求主体的。GET请求所有的参数都会拼在url中。因此send方法可以为空，可以为null.

POST 方法：

一般用于修改服务器上的资源（比如修改、删除或新建数据，提交表单数据等），对所发送信息的数量无限制。

注意：使用POST请求时，首先不建议使用url传递参数；其次在open方法后，send方法前，一定要设置请求头的类型；最后，send方法一定要填写参数，以此来传递请求体的内容；

一个完整的HTTP响应由三部分组成：

（1）HTTP状态码 ，status 和 statusText 以数字和文本的形式返回HTTP状态码；用来告诉客户端请求是成功还是失败

（2）响应头，响应头也和请求头一样包含许多有用的信息，如服务器类型、日期时间、内容类型和长度等。

（3）响应体，也就是响应正文。

http状态码由三位数字构成，其中首位数字定义了状态码的类型

1XX 信息类，表示收到web浏览器请求，正在进一步处理中

2XX 成功，表示用户请求被正确接收，理解和处理，例如 200 ok

3XX 重定向，表示请求没有成功，客户必须采取进一步的动作

4XX 客户端有错误，表示客户端提交的请求有错误，例如 404 NOT FOND 意味着请求中所引用的文档不存在。

5XX 服务器错误，表示服务器不能完成对请求的处理，如500 

熟悉状态码，有助于我们调试web应用程序的效率和准确性。

status:判断服务器响应对应的状态码；

readyState：判断服务器响应的状态；

readyState 服务器响应的状态：
当 属性值为0 时，请求未初始化，open还没有调用；

当 属性值为1时，服务器连接已建立，open方法已调用，send方法未调用；

当 属性值为2时，请求已接收，也就是接收到头信息了；

当 属性值为3时，请求处理中，也就是接收到响应主体了；

当 属性值为4时，请求已完成，且响应已就绪，也就是响应完成了；

第四部分：AJAX技术实现异步请求

使用 XMLHttpRequest 发送请求 。XMLHttpRequest 简称 XHR。

（1）XHR创建

var request = new XMLHttpRequest();

（2）XHR发送请求：

XHR对象拥有的将请求发送到服务器的两个方法：

• open(method,url,async)   method 规定发送请求的方法，不区分大小写；url 请求的地址，可以是相对于源文件的地址，也可以是绝对地址；async 代表请求是同步的还是异步的；第三个参数可以不写，因为默认是true。 
• send(string)

使用open 方法调用http 请求；

使用send 方法将该请求发送到服务器；

注意：

（a）使用GET 请求时，send 方法中的参数可以不填写，或写为null，因为GET方法没有请求体，所有参数都是拼接到url中的；

例如：

request.open("GET","get.php",true);

request.send();

（b）如果使用POST 请求，那么send 方法就一定要填写参数，并且在open 和 send 方法中间还要必须设置请求的头信息，以便告诉服务器客户端 post 的是什么类型的数据。

例如：

request.open("POST","create.php",true);

request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

request.send("name=张飞&sex=男");

content-type一般有两种，如果我们不发送文件的话，都采用上面那种方式。

注意：发送请求后，send方法立即返回数据（send方法开始立即返回服务器端已响应的数据），直到响应完成（直到完整的响应数据被服务器端返回），前面列出的响应方法和属性才有效（才开始运行）。

（3）XHR取得响应：

XHR对象拥有用于获取服务器响应的一些属性和方法：

首先，获取服务器响应的状态信息：即监听XHR对象上的readyState属性值的变化，这个值的变化代表了服务器上响应状态的变化。

当 属性值为0 时，请求未初始化，open还没有调用；

当 属性值为1时，服务器连接已建立，open方法已调用，send方法未调用；

当 属性值为2时，请求已接收，也就是接收到响应头信息了；

当 属性值为3时，请求处理中，也就是接收到响应主体了；

当 属性值为4时，请求已完成，且响应已就绪，也就是响应完成了；

其次是获取服务器响应的值：

• responseText：会存储从服务器端返回的数据，用于获取字符串形式的响应数据；
• responseXML：获取 xml 形式的响应数据；
• status 和 statusText：以数字和文本形式返回HTTP状态码；
• getAllResponseHeader()：获取所有的响应报头
• getResponseHeader()：查询响应中某个字段的值，需要给方法传递参数

//具体代码

request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200){

//做一些事情 

}

}

小结一下：

一个典型的ajax请求（异步请求）包含以下四个步骤：

第一步：new一个XHR对象；

第二步：调用该对象的 open方法；

第三步：send一些数据；

第四步：对这个过程进行一个监听