JavaScript 学习笔记 - 网络请求与远程资源（一）

from 《JavaScript 高级程序设计》第四版 第24章 网络请求与远程资源

--------------------------------------------------------------------------------------------------------------------

一、XMLHttpRequest 

1) 定义请求

let xhr = new XMLHttpRequest();

xhr.open("get", "example.php", false);   // 请求类型，请求url，是否异步

2）发送请求

xhr.send(null);  // 参数是作为请求体发送的数据，如果不需要发送请求体，则必须传null

3）收到响应后，XHR对象的以下属性会被填充上数据

xhr.responseText;  // 作为响应体返回的文本

xhr.responseXML;  // 如果响应的内容类型是"text/xml" 或 "application/xml"，那就是包含响应数据的XML DOM 文档

xhr.status;  // 响应的HTTP 状态

xhr.statusText;  //响应的HTTP状态描述

4）处理响应

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {  // 请求成功

　　alert(xhr.responseText);  

} else {  // 请求失败

　　alert("Request was unsuccessful: " + xhr.status);  

}

5）XMLHttpRequest 异步请求，利用 xhr.readyState 属性触发的 readystatechange 事件，

xhr.readyState 值： 0（Uninitialized）=> 1（Open）=> 2（Send）=> 3（Receiving）=> 4（Complete）

let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {  // 为了保证跨浏览器兼容，onreadystatuschange事件处理程序应该在调用open()之前赋值

　　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", "example.txt", true);

xhr.send(null);

 

二、HTTP 头部

1）默认情况下，XHR请求会发送以下头部字段: 

Accept: 浏览器可以处理的内容类型

Accept-Charset: 浏览器可以显示的字符集

Accept-Encoding: 浏览器可以处理的压缩编码类型

Accept-Language: 浏览器使用的语言

Connection: 浏览器与服务器的连接类型

Cookie: 页面中设置的Cookie

Host: 发送请求的页面所在的域

referer: 发送请求的页面的URI

User-Agent: 浏览器的用户代理字符串

2) 发送额外的请求头部，可以使用 setRequestHeader() 方法

!! 为了保证请求头部被发送，必须在open()之后、send()之前调用 setRequestHeader()

xhr.setRequestHeader("MyHeader", "MyValue");  // 头部字段的名称和值

3) 从XHR 对象获取响应头部，可以使用 getResponseHeader() 方法、getAllResponseHeaders()方法

let myHeader = xhr.getResponseHeader("MyHeader");

let allHeaders = xhr.getAllResponseHeaders();

……