JavaScript 中的 XMLHttpRequest 对象

2020-05-03

var myXmlHttpRequest = new XMLHttpRequest();

XMLHttpRequest 是 一 个 对 象，JavaScript 对象具有属性。这些“属性”就是名称 - 值对。 XMLHttpRequest 对象所拥有的属性有 onreadystatechange、readyState、response、response Text、response Type、responseXML、status、statusText、timeout、ontimeout、upload 以及 withCredentials。这些属性在命名方式上有些混乱。有些使用驼峰命名方式，有些使用小写字母。

编程中典型的对象和 JSON 对象的一点很关键的区别是 JSON 对象中不包含可执行的指令。由于 JSON 是用于数据交换的，所以它只包含属性。而编程中典型的对象还会包含函数（或方法）。

我们主要关注 XMLHttpRequest 中的以下这些可用的函数：

• open（method，url，async（可选），user（可选），password（可选））
• send()

以及下面这些属性：

• onreadystatechange：可以在代码中给它赋值为一个函数
• readyState：返回一个 0~4 的值，用来表示状态码
• status：返回 HTTP 状态码（如 200 表示请求成功）
• responseText：当请求成功时，该属性会包含作为文本的响应体（如我们请求的 JSON）

示例：创建一个新的 XMLHttpRequest 对象，并让它从OpenWeather-Map API 获取 JSON 数据。

var myXMLHttpRequest = new XMLHttpRequest();
var url = "http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139";
myXMLHttpRequest.onreadystatechange = function() {
if (myXMLHttpRequest.readyState === 4 && myXMLHttpRequest.status === 200) {
var myObject = JSON.parse(myXMLHttpRequest.responseText);
var myJSON = JSON.stringify(myObject);
}
}
myXMLHttpRequest.open("GET", url, true);
myXMLHttpRequest.send();

在本例的第二行代码中，我创建了一个保存着 JSON 资源的 URL 的字符串。然后我将一个函数赋值给 myXMLHttpRequest 的 onreadystatechange 属性。该函数会在每次 readyState 属性发生变化时执行。在这一函数中，我会判断 readyState 值是否为 4（表示“完成”），以及 HTTP 状态码是不是200（表示“成功”）。如果这两个条件都返回 true，就将 JSON 文本解析成JSON 对象。

在将一个对象转成 JSON 文本，或是将 JSON 文本转成对象时，很可能会接触这两个专业术语：序列化和反序列化。序列化是将对象转换成文本的过程，反序列化是将文本转换成对象的过程。

对象的序列化和反序列化

// JSON响应的反序列化
var myObject = JSON.parse(myXMLHttpRequest.responseText);
// 对象的序列化
var myJSON = JSON.stringify(myObject);

请记住，JSON 意思为 JavaScript 对象表示法。当它以 JSON 形式
存在时，字面上代表的是以文本形式表示的一个对象。为了让 JSON 变为
真正的对象，需要进行反序列化操作。

建立一个 JSON 请求并发送

myXMLHttpRequest.open("GET", url, true);
myXMLHttpRequest.send();

onreadystatechange 属性的函数值是一个时间处理函数。底层的 JavaScript 引擎（不是我的代码）会在每次就绪状态（ready state）改变时获取该函数并调用。就绪状态从 0 到 4 分别意味着：

• 0 表示未发送
  表示 open() 函数还没有执行
• 1 表示已发送
  指 open() 函数已执行，但 send() 函数还没有执行
• 2 表示接收到头部
  表示 send() 函数已执行且头部和状态码都可以获取了
• 3 表示解析中
  表示头部已经收到，但响应体正在解析中
• 4 表示完成
  表示请求完成，包括响应头和响应体的内容都已经接收到了

最后

以上就是安静诺言为你收集整理的JavaScript 中的 XMLHttpRequest 对象的全部内容，希望文章能够帮你解决JavaScript 中的 XMLHttpRequest 对象所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。