JavaScript中的AJAX：理解XMLHttpRequest

2023-12-16 05:07:18

理解XMLHttpRequest

XMLHttpRequest是AJAX的核心API，它为JavaScript提供了与服务器进行异步通信的能力。使用XMLHttpRequest，我们可以发送HTTP请求并接收服务器的响应，而无需重新加载整个网页。

1.1 创建XMLHttpRequest对象

要使用XMLHttpRequest，首先需要创建一个XMLHttpRequest对象。在JavaScript中，可以使用以下代码创建XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

1.2 发送HTTP请求

创建XMLHttpRequest对象后，就可以使用它来发送HTTP请求。要发送HTTP请求，需要使用XMLHttpRequest对象的open()方法。open()方法的第一个参数是HTTP请求的方法，例如GET、POST、PUT或DELETE。第二个参数是请求的URL。

xhr.open('GET', 'https://example.com/api/data.json');

1.3 设置请求头

在发送HTTP请求之前，可以设置请求头。请求头用于向服务器传递一些额外信息，例如请求的内容类型或认证信息。要设置请求头，可以使用XMLHttpRequest对象的setRequestHeader()方法。

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);

1.4 发送请求并处理响应

设置请求头后，就可以发送请求了。要发送请求，可以使用XMLHttpRequest对象的send()方法。send()方法可以接受一个参数，该参数是请求体。如果请求方法是GET或DELETE，则请求体可以为空。

xhr.send();

当服务器收到请求并返回响应时，XMLHttpRequest对象的readyState属性会变为4。此时，可以使用XMLHttpRequest对象的responseText或responseXML属性来获取服务器的响应。

if (xhr.readyState === 4 && xhr.status === 200) {
  // 处理服务器的响应
  var data = JSON.parse(xhr.responseText);
  console.log(data);
}

2. 构建一个简易的AJAX应用程序

现在，我们来构建一个简易的AJAX应用程序，演示如何使用XMLHttpRequest进行异步通信。这个应用程序将从服务器获取数据并将其显示在网页上。

2.1 HTML结构

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <button id="btn-load-data">Load Data</button>
  <div id="data-container"></div>
</body>
</html>

2.2 JavaScript代码

// 获取元素
var btnLoadData = document.getElementById('btn-load-data');
var dataContainer = document.getElementById('data-container');

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 监听按钮的点击事件
btnLoadData.addEventListener('click', function() {
  // 发送HTTP请求
  xhr.open('GET', 'https://example.com/api/data.json');
  xhr.send();
});

// 监听XMLHttpRequest对象的readyState属性变化
xhr.addEventListener('readystatechange', function() {
  // 当readyState变为4时，表示请求已完成
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 获取服务器的响应
    var data = JSON.parse(xhr.responseText);

    // 将数据显示在网页上
    dataContainer.innerHTML = JSON.stringify(data);
  }
});

3. 浏览器的同源策略和跨域通信

浏览器的同源策略是一种安全机制，它限制了网页脚本对其他网站资源的访问。同源策略要求脚本只能访问与当前网页具有相同协议、域名和端口的资源。

如果需要访问其他网站的资源，则需要使用跨域通信技术。常用的跨域通信技术包括JSONP、CORS和WebSockets。

3.1 JSONP

JSONP是一种简单且常用的跨域通信技术。JSONP的原理是利用