您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Ajax 处理服务端响应

在浏览器发送 Ajax 请求之后,下一步骤自然是服务器响应。服务器在接收到请求之后会进行一系列处理步骤,最终返回结果。而与此同时,客户端会在接收到返回的结果之后进行界面的展示或者数据的处理。

本章节主讲 Ajax 收到返回数据后处理服务器响应过程。

本章节将会从两个方面来讲解 Ajax 如何处理服务端响应,它们分别是:

如果你不知道 Ajax 是如何服务端响应的,或者你对 HTTP 状态码没有初步的了解,甚至你还不知道 Ajax 请求过程中各个阶段的状态表示,那么,我相信这个章节会很适合你。接下来让我们步入正题,一起来看看 Ajax 是如何处理服务端响应的。

首先思考问题,我们应该在什么时机处理服务端的响应呢?

我们知道,Ajax 可以发送异步请求,那数据的返回当然也不可能是同步返回的。客户端只有等到服务端数据返回才能进行数据的下一步处理。如果服务端没有正确响应,或者说服务端的响应还没结束,那么客户端是无法获得正确响应的。讲得俏皮一点,客户端个时候还得看服务端的脸色。

那么,在中我们要在什么样的时机开始处理响应呢?

这里,我们有必要了解一下 XMLHttpRequest.readyStateXMLHttpRequest.status

在客户端与服务器的通信过程中,XMLHttpRequest.readyState 体现着当前请求以及服务端响应的状态。当 xhr.readyState == 4 的时候,代表着服务器响应完成。

其他的 readyState 状态码还有 0 、1、2、3,他们分别代表着:

0:状态为 UNSENT。表示创建了但还没有 open

1:状态为 OPENED。表示已经了 open

2:状态为 HEADERS_RECEIVED。表示已经了 send ,且头部和状态也可获得

3:状态为 LOADING。表示正在下载中

4:状态为 DONE。表示响应已经完成

从 readyState 的状态码来看,总共有 5 个状态。并且只有最后状态 4 才能代表着可以开始处理服务端响应数据的时机

服务器响应完成之后,我们通常会使用 XMLHttpRequest.status 来查看当前 XMLHttpRequest 响应中的数字状态码这个数字状态码是无符号短整型状态码,代表着我们的 Ajax 请求的状态成功与否

在 XMLHttpRequest 中, status 码对应着标准的 HTTP 状态码。并且在请求完成前,该值为 0。

HTTP 状态码很多,这里就不做过多的铺开,具体可以到 进行学习和查阅。接下来我们来讲几个常见的状态码。

是的,这也是很常见的两个状态码。

在 HTTP 状态码中,200 代表着 HTTP 请求成功,而 304 代表着由于浏览器缓存原因,GET 请求命中并返回了缓存中的数据。结合 上面 XMLHttpRequest.readyState , 假设请求成功,我们的响应模块应该如下:

xhr.open("GET", "http://localhost:8080/simple/get?mk=网");

xhr.send();

xhr.onreadystatechange = function() {
    // 当前 this 为 xhr
    if (this.readyState == ) {
        if (this.status ===  || this.status === ) {
			// code ...
        }
    }
};

在后端设置了协商缓存的情况下,我们来看看:

第一次请求资源:

刷新,进行第二次请求同样的资源:

有正确的返回,那当然也会有的返回。打个比方,让我们来假设这样的场景:

如果遇到这样的情况,Ajax 当然不能坐以待毙——我们总不该不把任何响应告诉吧!真实的情况是,Ajax 会返回我们相应的 status ,客户端根据该 status 进行必要的操作。

首先,我们来请求捏造的接口,即服务端并没有的接口。

html 关键容器:

<div id="container"></div>

JavaScript 脚本关键:

var container = document.getElementById('container')
xhr.onreadystatechange = function() {
    // 当前 this 为 xhr
    if (this.readyState == ) {
        if (this.status ===  || this.status === ) {
            container.innerHTML = "当前状态码为: " + this.status;
        } else {
            container.innerHTML = "当前状态码为: " + this.status; // 主要看这里,出现非 200 和 304 状态会边进行
        }
    }
};

看看运行后的图:

Not Found,显而易见,当我们在的时候,服务端找不到对应的资源的时候就会返回该状态码,表示你要找的东西没有,不存在。在我们的实际工作中,我们经常会遇到这样的,往往这个时候你就应该警惕:

讲完 状态码,我们接下来继续来看看很常见的场景,服务器内部发生了!!!沿用上示例,接口改为服务端提供的接口,这次我们会在服务端假设发生,并返回 500 。

来看看请求的结果:

事实上,500 码也是非常常见的,500 Internal Server Error 代表着服务端,如果我们在开发过程中遇到这样的,那么,就需要后端的同学来查找原因了。

除此之外,HTTP 状态码还有很多,每个都有不同的含义,这里也不会做过多的展开,有兴趣的同学可以做额外的学习查阅。HTTP 协议中,状态码可以让我们在请求之后,获知请求的状态。客户端也能够以此做出相应的响应。

要响应,当然是 XMLHttpRequest 对象下的几大法器:responseText 、 responseXML 和 response。其中:

了解响应的这 3 个,接下来,我们会分别返回 DomString、XML 和 Json 类型数据来展示着响应。

核心响应:

xhr.onreadystatechange = function() {
    if (this.readyState == ) {
        if (this.status ===  || this.status === ) {
            var res = this.response
            var resText = this.responseText
            var resXml = this.responseXML
            console.log(res, resText, resXml) // 分别打印三者
        }
    }
};

服务端返回:

‘text’

请求结果:

Content-type:

可以看到,当返回的是 DomString 的时候,responseText 和 response 都有值,而 responseXML 因为解析失败为 null。

服务端返回:

<data>Hello World</data>

请求结果:

Content-type:

这一次我们的 XML 正常解析了,并且在控制台上可以看到打印出了 Document,而 response 和 responseText 分别打印了该 XML 的文本形式。

服务端返回:

{a:}

请求结果:

Content-type:

当返回的是 Json 类型数据的时候,response 和 responseText 分别为对应的文本值,而 responseXML 因为解析失败成了 null。

以上展示了 Ajax 服务端响应的三种类型的数据,简单的展示给大家 XMLHttpRequest 的 response、responseText 和 responseXML 在不同数据类型下的表现,希望以此能够加深大家对 XMLHttpRequest 的了解。


联系我
置顶