XML HTTP 请求获取 - JavaScript

在现代 web 开发中，XML HTTP 请求获取是非常重要的一部分。JavaScript 可以通过这种方式获取到不同来源的数据，像 JSON、XML、HTML 等等格式的数据，并进行相应的处理和操作。

XMLHttpRequest 对象

XMLHttpRequest 对象是 JavaScript 的核心组成部分之一。它是一种用于在后台与服务器进行数据交换的技术。它的主要特点是：可以在不刷新页面的情况下更新数据。

以下是一个简单的 XMLHttpRequest 对象的示例：

const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  }
};
xhttp.open("GET", "example_url", true);
xhttp.send();

在这个例子中，我们创建了一个名为 xhttp 的新 XMLHttpRequest 对象，并通过 onreadystatechange 事件捕捉器定义了一个回调函数。当 readyState 属性发生改变时，这个函数就会被调用。如果状态码等于 4，说明请求已成功完成，则打印出请求返回的数据。

发送 HTTP 请求

通过 XMLHttpRequest 对象发送 HTTP 请求非常简单。以下是一个 GET 请求的示例代码：

const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  }
};
xhttp.open("GET", "example_url", true);
xhttp.send();

而以下则是一个 POST 请求的示例代码：

const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  }
};
xhttp.open("POST", "example_url", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=example&value=123");

在这个例子中，我们使用 POST 方法发送数据到服务器。我们在请求头中设置了 Content-type，表明我们发送的数据是 URL 编码形式，然后在 send 方法中传递了需要发送的数据。

处理服务器的响应

通过 XMLHttpRequest 对象发送请求后，服务器将返回响应。以下是一个处理服务器响应的示例代码：

const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  } else if (this.readyState == 4) {
    console.warn('Request returned error code ' + this.status);
  }
};
xhttp.open("GET", "example_url", true);
xhttp.send();

在这个例子中，我们对 readyState 和 status 属性进行了比较。readyState 属性表示请求的状态，取值如下：

• 0：请求未初始化
• 1：服务器连接已建立
• 2：请求已接收
• 3：请求处理中
• 4：请求已完成，且响应已就绪

status 属性表示 HTTP 状态码，它们代表着服务器对请求的响应。

跨域请求

XML HTTP 请求获取还可以进行跨域请求，但很多服务端的接口是不允许跨域请求的。跨域请求的示例代码如下：

const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  } else if (this.readyState == 4) {
    console.warn('Request returned error code ' + this.status);
  }
};
xhttp.open("GET", "example_url", true);
xhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xhttp.send();

在这个例子中，我们在请求头中设置了一个 Access-Control-Allow-Origin 属性，这个属性允许任何来源的访问。但这不是一种安全的做法，服务端接口也不会这样开放。因此，我们还可以使用 JSONP 和 CORS 技术进行跨域请求。

总结

XML HTTP 请求获取是一种非常重要的技术，可以使得 JavaScript 从不同来源获取数据并进行相应的处理。在进行代码编写时，务必注意请求的类型、请求参数和服务器响应的处理。同时，对于安全问题也要有足够的关注，以保证应用程序的安全性。