[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必须是encodeURIComponent函数返回后的值。
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. 示例

/* get */
function testGet() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var myElement = document.getElementById('mydiv');
            myElement.innerHTML = xmlhttp.responseText;
        }
    };

    var url = "/my/ajax/url" + "?" + encodeURIComponent('name') + "=" + encodeURIComponent("Tim") + "&" + encodeURIComponent('sex') + "=" + encodeURIComponent('male');
    xmlhttp.open('get', url, true);
    xmlhttp.send(null);
}

/* post */
function testPost() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var myElement = document.getElementById('mydiv');
            myElement.innerHTML = xmlhttp.responseText;
        }
    };

    xmlhttp.open('post', '/my/ajax/url', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    var dataStr = encodeURIComponent('name') + “=” + encodeURIComponent('Tim') + '&' + encodeURIComponent('sex') + "=" + encodeURIComponent('male');
    xmlhttp.send(dataStr);    
}