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

旧城等待， 2022-08-05 02:38 143阅读 0赞

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

![ajax获取后端数据][ajax]

### 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()`的时候，此时并没有向Web服务器发送HTTP请求，而是当`send()`的时候，XHR对象才向Web服务器发送请求。

xhr.send('');

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

> `send()`方法接收一个参数，需要作为请求主体发送的数据。如果不需要作为请求主体发送数据，则必须传入null，因为这个参数对于某些浏览器是必须的。

当浏览器接收到Web服务器的响应后，会开始填充XHR对象的属性，主要的如下：

*  `responseText`作为响应的主体被返回的文本
 *  `responseXML`如果响应的内容类型为`text/xml`或者`application/xml`这个属性中将包含着响应数据的`XML` `DOM`文档
 *  `status`响应的HTTP状态
 *  `statusText`HTTP状态的说明
    
    一般通过`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在向Web服务器发送请求的时候，会有一个readyState属性来检测XHR对象的`请求/响应过程的当前活动阶段`，值的列表如下：

*  `0`未初始化。尚未调用`open()`方法
 *  `1`启动。已经调用`open()`方法，但是尚未调用`send()`方法
 *  `2`发送。已经调用`send()`方法。但是还没有接收到响应。
 *  `3`接收。已经接收到部分的响应数据。
 *  `4`完成。已经接收到全部的响应数据，而且已经在客户端可以使用了。
    
    每当`XHR.readyState`的属性值发生变化，都会触发一次`onreadystatechange`事件。通常我们只对`XHR.readyState==4`的时候感兴趣（这时数据已经全部就绪）。

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

实例代码如下：

### 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的官方文档。  
中文文档（[点击转到][Link 1]）  
英文文档（[点击转到][Link 2]）

[ajax]: /images/20220805/22bf7163ca1141219238607dc5ef7bec.png
[Link 1]: http://www.css88.com/jqapi-1.9/jQuery.ajax/
[Link 2]: http://api.jquery.com/jquery.ajax/