[TimLinux] JavaScript 原生AJAX介绍

1. AJAX

异步JavaScript + XML，用于浏览器内部通过前端JavaScript语言操纵，与HTTP服务器进行连接通信的技术。

2. XMLHttpRequest对象

从IE7+，以及当前流行的Chrome，Firefox，Safri，Opera浏览器，提供用于AJAX操作的对象，均为XMLHttpRequest.

var xmlhttp = XMLHttpRequest();

3. 前端处理流程

流程包括以下几个步骤：

1. 创建XMLHttpRequest对象；
2. 注册onreadystatechange处理函数（用于异步操作，同步操作不需要注册该函数）
调用open(请求方法，请求url地址，是否为异步：true异步)
1. 如果是get|GET，那么建议在调用open之前，把请求url地址构造好，对传递的name=value，其中name和value必须是encodeUIRComponent函数返回后的值。
2. 如果是post|POST，那么可以在调用send方法的时候，传递post数据
3. 如果是post方法，则需要给发生给HTTP服务器的请求头部增加一个字段：xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
4. 然后调用send方法，该方法接受一个参数，有name=value&name=value组成的长字符串，其中name，value都是经过encodeURIComponent()函数处理后端值，get请求的数据不在这里提供，直接在open方法的url内提供，此时传递给send的为null参数值。

4. 接收数据

异步的AJAX请求，处理数据的流程，都存在于onreadystatechange处理函数内，首先xhr对象存在有以下几个属性：

• readyState属性：是一个int整数值，存在以下5个值，每当这个值发生变化，都会触发一次onreadystatechange事件，即：调用注册在该事件上的函数。
  • 0：只是创建了xhr, 没有调用open，没有调用send
  • 1：调用了open，没有调用send
  • 2：调用了send，还没有接收到数据
  • 3：接收到了数据，数据还不全
  • 4：接收到了全部数据，请求处理完成。
• status属性：HTTP响应头部状态码，比如：200响应成功，对应的statusText值为OK，是一个 int 正数值。
• statusText属性：HTTP响应头状态名，
• responseText属性：响应返回的主体部分内容，类型为字符串，格式为Text。
• responseXML属性：响应返回的主体部分内容，类型为字符串，格式为XML，

5. 示例

ttt