【从0到1学Web前端】javascript中的ajax对象（一）

如今最流行的获取后端的（浏览器从server）数据的方式就是通过Ajax了吧。今天就来具体的来学习下这个知识吧。假设使用ajax来訪问后段的数据，浏览器和浏览器端的js做了那些工作呢？我做了一个图，请大家看一下：

1.原生js的Ajax请求的方式

由上面的图我们大致的知道了ajax訪问后端数据的一个过程。最重要的就是检測浏览器，创建XMLHttpRequest对象的过程：
代码例如以下：

/*
 推断是否支持XMLHttpRequest
 */
function createXHR() {
    if (typeof XMLHttpRequest != "undefined") {
        return new XMLHttpRequest();
    }
    else if (typeof ActiveXobject != "undefined") {
        if (typeof arguments.callee.activeXString != 'string') {
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len;
            for (i = 0, len = versions.length; i < len; i++) {
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                }
                catch (ex) {
                    console.log(ex);
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString());
    }
    else {
        throw new Error('no XHR')
    }
}

此处各自是依据浏览器是否支持XMLHttpRequest对象来推断是否是IE还是非IE，然后来创建响应的对象。

当XHR对象open()的时候。此时并没有向Webserver发送HTTP请求。而是当send()的时候，XHR对象才向Webserver发送请求。

xhr.send('');

这里有一个非常重要的地方。就是send的參数为null。

send()方法接收一个參数，须要作为请求主体发送的数据。假设不须要作为请求主体发送数据，则必须传入null，由于这个參数对于某些浏览器是必须的。

当浏览器接收到Webserver的响应后，会開始填充XHR对象的属性，基本的例如以下：

• responseText作为响应的主体被返回的文本
• responseXML假设响应的内容类型为text/xml或者application/xml这个属性中将包括着响应数据的XML DOM文档
• status响应的HTTP状态

• statusTextHTTP状态的说明

  一般通过XHR.status属性值为200表示成功的标志。

  此时能够获取responseText和responseXML的值。当XHR.status==304（响应是有效的）的时候，说明文件没有被改动，能够直接使用浏览器缓存的版本号。

检測的代码例如以下：

if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {
                console.log(xhr.responseText);
            }
            else {
                console.log(xhr.responseText);
            }

不要依赖responseText。由于在跨浏览器处理的时候这个属性获取的值是不可靠的。

上面的代码在同步发送请求验证和获取返会的数据是没有不论什么问题的。可是当我们发送异步请求的时候确实会出现故障，由于我们不知道服务端的Response在什么时候反回。那么我们该怎么办呢？

事实上在ajax在向Webserver发送请求的时候，会有一个readyState属性来检測XHR对象的请求/响应过程的当前活动阶段，值的列表例如以下：

• 0未初始化。

  尚未调用open()方法

• 1启动。已经调用open()方法。可是尚未调用send()方法
• 2发送。

  已经调用send()方法。可是还没有接收到响应。

• 3接收。已经接收到部分的响应数据。

• 4完毕。已经接收到所有的响应数据。并且已经在client能够使用了。

  每当XHR.readyState的属性值发生变化，都会触发一次onreadystatechange事件。通常我们仅仅对XHR.readyState==4的时候感兴趣（这时数据已经所有就绪）。

必须在调用open()之前指定onreadystatechange事件处理程序才干够保证夸浏览器的兼容性。

实例代码例如以下：

var xhr = new createXHR();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {
                console.log(xhr.responseText);
                //console.log(xhr.)
                //document.createElement()
                creatNode('script');
                creatNode('img');
            }
            else {
                console.log(xhr.responseText);
            }
        }
    }
    xhr.open('GET', 'test.js', true);
    xhr.send('');

2.jQuery发送Ajax的方式

參考jquery的文档，使用jquery来发送ajax请求比原生的js简单非常多。例如以下代码：

2.1GET方式

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

2.2POST方式

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

这里也仅仅是简单的实例，假设想要具体的了解jQuery中ajax的使用。能够參考Jquery的官方文档。

中文文档（点击转到）
英文文档（点击转到）