简述AJAX

AJAX概念介绍：

• 运用HTML和CSS来实现页面，表达信息。
• 运用XMLHttpRequest和web服务器进行数据的异步交换。
• 运用JavaScript来操作DOM，实现动态局部刷新。

XMLHttpRequest对象：

我们需要实例化一个XMLHttpRequest对象。

var   request = new XMLHttpRequest();

HTTP请求：

• 什么是http呢？

http是计算机通过网络进行通信的规则。

浏览器经常向服务器请求信息和服务，HTTP是一种无状态协议。

• 什么是无状态协议呢？

无状态指的是 浏览器和服务器不建立持久的连接，也就是说服务器端不保留信息。当浏览器向服务器端发送请求，然后服务器端进行响应，响应过后，连接就被关闭了。

• HTTP请求的步骤

1. 建立TCP连接
2. Web浏览器向Web服务器发送请求命令
3. Web浏览器发送请求头信息
4. Web服务器应答
5. Web服务器发送应答头信息
6. Web服务器向Web浏览器发送数据
7. Web服务器关闭TCP连接

• HTTP请求组成：

1.HTTP请求的方法或者动作，比如是GET还是POST请求

2.正在请求的URL（总得知道请求的地址是什么吧）。

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

4.请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等。

一般来说，请求头和请求体中间有个空行，这个空行比较重要，表示请求头已经结束了。

• GET请求：

1.一般用于信息的获取

2.使用URL传递参数

3.对所发送的信息的数量也有限制，一般在2000个字符

• POST请求：

1.一般用于修改服务器上的资源

2.对所发送信息的数量无限制

• 一个HTTP响应一般由三部分组成：

1.一个数字和文字组成的状态码，用来显示请求是成功还是失败。

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

3.响应体，也就是响应正文。

• HTTP状态码

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

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

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

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

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

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

• XMLHttpRequest发送HTTP请求

1. open方法：open（method,url,async）
2. send方法：send（string）

这些方法可以将请求发送到服务器。

open方法：

method规定了发送请求的方法，GET还是POST

url 请求的地址

async表示了请求是同步的还是异步的，一般我们使用AJAX都是异步的，所以这个参数一般是true，如果是同步的请求，我们只需要将这个参数变为false，但是他一般默认为true的。

send方法：

string参数：如果使用的请求方法为GET，那么这个可以不填写，如果使用的请求方法为POST，一般来说要填写参数，否则就没什么意义。

例如：

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

request.send();

request.open("POST","get.php".true)

request.send();   //使用POST请求方法，而在send中没有参数，几乎没有意义，很少出现

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

request.setRequestHeader("Contest-type","application/x-www-form-urlencoded");

//这句话是用来设置请求头信息，告诉Web服务器，这个方法一定要写在open和send方法中间

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

• XMLHttpRequest取得响应

1. responseText：获得字符串形式的响应数据
2. responseXML：获得XML形式的响应数据
3. status和statusText：以数字和文本形式返回HTTP状态码
4. getAllResponseHeader()：获取所有的响应报头
5. getRespnseHeader()：查询响应中某个字段的值

为了在响应返回的时候得到通知“响应成功”，利用readyState属性。

当它为0的时候，请求还未初始化，open还没有调用

当它为1的时候，服务器连接已经建立，open已经调用了

当它为2的时候，请求已经被接收，已经收到头信息了

当它为3的时候，请求正在处理当中，已经接收到响应主体了。

当它为4的时候，请求已经完成，且响应已经完成

利用onreadystatechange这个时间来监听readyState属性的变化：

request.onreadystatechange=function(){

if(request.readyState===4request.status===200){

//做一些事情

}

}