关于JS中的Ajax对象的兼容

自从Ajax出现以来，就成了一个前端工程师必不可少的知识点。但是，由于IE的“异样”性，使得我们不得不对其进行兼容性检查。

其实，为了图方便，我们可以采用jQuery里面的$.ajax()方法来使用Ajax，但是，总有那么一些时候，我们需要用原生Javascript来实现Ajax请求。毕竟，原生的速度是最快的。

---

原生JS实现Ajax请求

使用JS来实现Ajax请求，需要用到JS里面的XMLHttpRequest对象。

具体实现如下：

/* 原生JS实现在非IE浏览器中的Ajax请求 */

var xhr = new XMLHttpRequest(),
    url = '',
    response = '',
    data = '';

xhr.onreadystatechange = function () {
    if ( xhr.readyState === 4 && xhr.status === 200 ) {
        response = xhr.responseText;
    }
}

/* open()函数必须放在send()函数之前 */
xhr.open( 'POST', url, true );
xhr.send( data );

OK，这是最基本的一个JS的XMLHttpRequest实现。主流的浏览器比如Chrome，Safari，Firefox等都能使用这段代码发送Ajax请求。但是，唯独IE是个独苗。

在IE中，如果需要新建一个Ajax对象的话，就不是用XMLHttpRequest了，而是要使用ActiveXObject。

所以，在IE中，上面的代码就要改写为如下：

/* 原生JS实现在IE浏览器中的Ajax请求 */

var xhr = new ActiveXObject('Microsoft.XMLHttp'),
    url = '',
    response = '',
    data = '';

xhr.onreadystatechange = function () {
    if ( xhr.readyState === 4 && xhr.status === 200 ) {
        response = xhr.responseText;
    }
}

所以说，IE是这么另类的一个东西。

---

跨浏览器实现Ajax请求

虽说IE另类吧，但是，也不能不考虑他的用户们。所以，我们需要一个跨浏览器的解决方案来实现Ajax请求。

我们可以用一个函数来封装：

/**
 * 跨浏览器实现Ajax请求
 * @function createXMLHttpRequest
*/

var createXMLHttpRequest = function () {
    if ( window.XMLHttpRequest ) {
        return new XMLHttpRequest();
    }
    else if ( window.ActiveXObject ) {
        return new ActiveXObject('Microsoft.XMLHttp');
    }
    else {
        return;
    }
}

这样，我们创造了一个名为createXMLHttpRequest()的能够实现跨浏览器进行Ajax请求的函数。

我们可以这样使用它：

var xhr = new createXMLHttpRequest(),
    data = '',
    url = '',
    response = '';

xhr.onreadystatechange = function () {
    if ( xhr.readyState === 4 && xhr.status === 200 ) {
        response = xhr.responseText;
    }
}

xhr.open( 'POST', url, true );
xhr.send( data );

这样，这段代码就能够在各个浏览器上使用了。

---

使用jQuery实现Ajax请求

如果还是觉得原生JS麻烦，而且，对性能的追求不是那么极致，那么，我们可以使用更简单快捷的jQuery中的$.ajax()方法来进行Ajax请求。

jQuery中的Ajax方式使用如下：

/* 引入jQuery */

$.ajax({
    method: 'POST/GET',
    url: '',
    data: '',
    cache: ''

    //其他的参数设置
});

jQuery为我们考虑的特别周全，我们只需要调用$.ajax()方法就可以了。里面的参数都可以设置。

关于jQuery的$.ajax()的更多详细设置和使用，可以参考jQuery官方API。