如何在JS中使用AJAX技术

Ajax是一个特别特别重要的技术，获取数据，局部刷新，都得用它！

Ajax是什么呢：Asynchronous JavaScript And XML（异步的 JavaScript 和 XML）。

注意啦，Ajax不是某种编程语言，只是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。

那么如何实现Ajax技术？

1、运用HTML和CSS来实现页面，表达信息；

2、运用XMLHttpRequest和web服务器进行数据的异步交换；

3、运用JavaScript操作DOM，实现动态局部刷新。

在学习怎样使用Ajax技术之前，得先了解下HTTP请求：

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

HTTP是一种无状态的协议（无状态协议指的是浏览器与服务器不建立持久的连接）。

一个完整的http请求过程，通常有下面7个步骤：

　　1、建立TCP连接

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

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

　　4、web服务器应答

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

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

　　7、web服务器关闭TCP连接

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

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

　　2、正在请求的URL，总得知道请求的地址是什么吧

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

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

　　我们以百度首页的HTTP请求当实例来看看：

看上图中，我标注出来的，就是一般情况下，我们做请求需要注意的地方。

请求地址，很好理解，就是我们发起请求的url。

请求方式有两种：

GET:一般用于信息获取

　　使用URL传递参数

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

POST:一般用于修改服务器上的资源

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

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

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

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

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

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

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

再就是请求参数，这里需要注意，参数名称，格式等不要弄错了。

以上是请求图解，下面我们看下响应是啥样的：

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

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

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

　　3、响应体，也就是响应正文

　　一个典型的响应内容如下：

截图内容，就是完成请求后，接口返回的数据内容也就是响应正文啦。

下面我们看一下，创建一条Ajax的请求的具体流程是什么样的呢？

第一步：创建XMLHttpRequest对象：

var request = new XMLHttpRequest();

如何兼容IE5、IE6甚至更早的版本？

 第二步：XMLHttpRequest发送请求

open(method,url,async)

　　method:get/post 不区分大小写

　　url:请求地址　　

　　async:同步或者异步，true为异步处理，false为同步请求，一般默认为异步请求

send(string)

　　一般get不填参数，post要填参数

第三步：XMLHttpRequest取得响应

获取响应值：

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

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

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

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

　　getResponseHeader()：查询响应中的某个字段的值

在响应返回成功时得到通知：

　　readyState属性：

　　　　0：请求未初始化，open还没有调用

　　　　1：服务器连接已建立，open已经调用了

　　　　2：请求已接收，也就是接收到头信息了

　　　　3：请求处理中，也就是接收到响应主体了

　　　　4：请求已完成，且响应已就绪，也就是响应完成了

　　　　如果我们想知道服务器响应有没有成功，就需要监听以上的属性值变化

　　　　监听方法：

具体的请求过程代码示例如下（一个搜索请求，一个保存请求）：