红宝书第21章Ajax与Comet

Posted 2021-03-15 把我当做一棵树叭

AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

XMLHttpRequest对象

1.1XHR的用法

let xhr = new XMLHttpRequest()

open()方法不会真正发送请求，而只是启动一个请求以备发送,接收3个参数：要发送的请求类型、请求URL、是否异步发送请求

xhr.open("get","example.php",false)

发送特定请求，调用send()方法。接收1个参数，即要作为请求主体发送的数据。若没有数据则必须传入null。调用send()之后，请求就会被分派的服务器。

xhr.send(null)

若请求是同步的，JS代码就会等到服务器响应之后再继续执行。

在收到响应后，响应的数据会自动填充XHR对象的属性，属性如下

1.responseText：作为响应主题被放回的文本

2.responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着相应数据的XML DOM文档。

3.status：响应的HTTP状态

4.statusText：HTTP状态的说明

接收响应先检查status属性判断是够成功。一般将200作为成功标志。此时responseText属性内容已就绪，若内容类型正确responseXML也能访问。状态码304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本。

        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            alert(xhr.responseText)
        } else {
            alert("request was unsuccessful：" + xhr.status)
        }

多数情况发送异步请求，才能让JS继续执行而不必等待响应。此时可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。可取值如下

0：未初始化，尚未调用open()方法

1：启动。已调用open()，为调用send()

2：发送。已调用send()，但尚未接收到响应

3：接受。已经接收到部分响应数据。

4：完成。已经接收到全部响应数据，而且可以在客户端使用。

主要readyState属性的值有一个值变换一个值，就会触发一次readystatechange事件。可以利用该事件检测每次状态变化后的readyState值。必须在调用open前指定该事件才能确保跨浏览器兼容性

        let xhr = new XMLHttpRequest()
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                    alert(xhr.responseText)
                } else {
                    alert("request was unsuccessful：" + xhr.status)
                }
            }
        }
        xhr.open("get", "examlpe.text", false)
        xhr.send(null)

在接受到响应内容之前可以调用absort()方法取消异步请求：

xhr.abort()

调用该方法XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在终止请求后，还应该对XHR对象进行解引用操作。由于内存原因，不建议重用XHR对象。

1.2HTTP头部信息

每个HTTP请求和响应都会带有相应的头部信息。

默认情况发送XHR请求的同时会发送下列头部信息

Accept：浏览器能够处理的内容类型