一、什么是AJAX

AJAX的全称：

Asynchronous JavaScript and XML（异步的JavaScript和XML）

·Ajax不是某种编程语言

是一种在无需重新加载整个网页的情况之下能够更新部分网页的技术。

·使用AJAX的优势：

AJAX改变了WEB开发的格局

二、概念介绍

- 同步

- 异步

1).为何实现异步？

因为XMLHttpRequest（XHR）的出现

三、如何实现AJAX技术？

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

XMLHttpRequest对象创建
XMLHttpRequest发送请求
XMLHttpRequest取得响应

（一）XMLHttpRequest对象创建

XMLHttpRequest对象

var request= new XMLHttpRequest();

兼容性写法：

var request;
if(window.XMLHttpRequest){
    request=new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari...
}else{
    request=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5
}

（二）HTTP请求

1).什么是HTTP？

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

HTTP是一种无状态协议

即：

没有记忆.gif

2).一个完整的HTTP请求过程，通常有下面7个步骤：

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

3)一个HTTP请求一般由四部分组成：

1.HTTP请求的方法或动作，比如是GET还是POST请求
2.正在请求的URL，需要知道请求的地址是什么
3.请求头，包含一些客户端环境信息，身份验证信息等
4.请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等。
【备注】请求头与请求体一般来说有一个空行
【案例】

HTTP请求的组成.png

GET和POST请求：

- GET：（幂等）

一般用于信息获取
使用URL传递参数
对所发送信息的数量也有限制，一般在2000个字符

【备注】默认的HTTP请求方法，一般来说，GET请求是获取信息而不是修改信息。换句话说，它一般用来查询，查询不会影响数据本身。我们一般不用它进行新建和修改操作。
【注意】GET请求发送的信息对任何人是可见的，因为所有的变量名和值都显示在URL。可见的好处是，可直接将页面添加到书签里使用。
【幂等】
GET请求是幂等的即，一个GET请求执行一次和一万次它的效果是一样的，也就是它的影响是相同的。通常来说GET方法也是安全的，它也有例外可以修改信息，但是一般不推荐使用。

- POST:

向服务器发送信息，一般用于修改服务器上的资源。
POST请求和GET请求不一样，对所发送信息的数量无限制。

【备注】相比GET请求，POST更安全。POST是发送信息。一般用来从表单发送一些数据，这些数据并不在URL中显示，对其他人是不可见的，所以的名称和值都会被嵌入HTTP请求的请求体中，除非被拦截则属例外。用POST请求发送表单数据，新建，修改，删除等等操作。

4).一个HTTP响应一般由三部分组成：

1.一个数字和文字组成的状态码，用来显示请求成功还是失败
2.响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等
3。响应体，也就是响应正文

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

1XX:信息类，表示收到web浏览器请求，正在进一步的处理中
2XX:成功，表示用户请求被正确接收，理解和处理【例如】：200 OK
3XX：重定向，表示请求没有成功，客户必须采取进一步的动作
4XX：客户端错误，表示客户端提交的请求有错误，【例如】：404 NOT Found,意味着请求中所引用的文档不存在。
5XX：服务器错误，表示服务器不能完成对请求的处理：【例如】：500

了解HTTP状态码，有利于web调试的效率和准确性

（三）XMLHttpRequest发送请求

• open(method,url,async)
  【参数】
  method发送请求方法GET/POST
  url请求地址（可以相对地址，也可以绝对地址）
  async请求同步/异步
  一般ajax都采用异步请求，即async为true；若同步则为false，默认值为true，所以一般可不填写

• send(string)
  GET请求无主体，所有参数都在URL中。所以参数可以不填写或者填写none；
  POST请求一般都需要填写参数，否则无意义

【案例】

（四）XMLHttpRequest取得响应

• responseText：获得字符串形式的响应数据

• responseXML：获得XML形式的响应数据

• status和statusText：以数字和文本形式返回HTTP状态码

• getAllResponseHeader()：获取所有的响应报头

• getResponseHeader():查询响应中的某个字段的值
  以上方法只是获取响应值

• readyState属性（在响应返回成功的时候得到通知，共5次，有些浏览器无0-1则4次）
  0：请求未初始化，open还没有调用
  1：服务器连接已建立，open已经调用了
  2：请求已接收，也就是接收到头信息了
  3：请求处理中，也就是接收到响应主体了
  4：请求已完成，且响应已就绪，也就是响应完成了

var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadyStatechange = function(){
if(request.readyState===4&&request.status===200){
//做一些事情 request.responseText
}
}

end.
本笔记整理自慕课网