通过 XMLHTTPRequest 向服务器发送消息

XMLHttpRequest (XHR) 是一个 API，用于客户端的浏览器通过 HTTP 或 HTTPS 协议与服务器进行通信。XHR 对象将浏览器端的客户端请求发送到服务器，可以接收服务器端的响应。

XMLHttpRequest 的基本用法

使用 XMLHttpRequest 对象发送和接收 HTTP 请求需要以下几个步骤：

1. 创建 XMLHttpRequest 对象。
2. 使用 open() 方法打开与服务器的连接。
3. 使用 send() 方法将请求发送到服务器。
4. 处理来自服务器的响应。

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 打开与服务器的连接
xhr.open('GET', 'https://example.com/api', true);
// 发送请求
xhr.send();
// 处理来自服务器的响应
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
}

上面的代码演示了如何使用 XMLHttpRequest 对象向服务器发送 GET 请求，并在控制台中输出服务器响应的文本内容。

XMLHttpRequest 的常用方法和属性

XHR 对象有很多常用的方法和属性，下面是其中一些常用的：

• open(method, url, async): 打开与服务器的连接，参数分别为请求的 HTTP 方法、请求的 URL 和是否使用异步模式。
• send(data): 发送请求，参数为请求发送的数据。
• setRequestHeader(header, value): 设置请求头部信息，参数分别为头部字段名和字段值。
• getResponseHeader(header): 获取响应头部信息，参数为头部字段名。
• getAllResponseHeaders(): 获取完整的响应头部信息。
• abort(): 取消正在进行的请求。

XMLHttpRequest 的事件模型

使用 XMLHttpRequest 对象发送和接收 HTTP 请求时，可以监听许多事件：

• onreadystatechange: readyState 改变时触发。
• onloadstart: 发送请求前触发。
• onprogress: 接收服务器响应期间持续触发。
• onabort: 取消请求时触发。
• onerror: 请求出错时触发。
• onload: 请求完成时触发。
• ontimeout: 请求超时时触发。

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 打开与服务器的连接
xhr.open('GET', 'https://example.com/api', true);
// 监听事件
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.onprogress = function(event) {
    if (event.lengthComputable) {
        var percentComplete = event.loaded / event.total * 100;
        console.log(percentComplete + '% completed');
    }
};
xhr.onerror = function() {
    console.log('Request error');
};
// 发送请求
xhr.send();

上面的代码演示了如何监听 XMLHttpRequest 对象的事件。

XMLHttpRequest 的跨域请求

浏览器有同源策略的限制，XMLHttpRequest 对象默认只能向同一域名下的服务器发送请求，并且只能获取同一域名下的数据。但是，使用 CORS（跨源资源共享）技术可以实现跨域请求。

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 打开与服务器的连接
xhr.open('GET', 'https://example.com/api', true);
// 设置跨域请求头部信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.withCredentials = true;
// 发送请求
xhr.send();

需要注意的是，允许跨域请求需要服务器端设置一些响应头部，例如 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等。

XMLHttpRequest 的异步模式和同步模式

XMLHttpRequest 对象默认使用异步模式，也就是说，在请求发送后，它会继续执行后面的代码。如果需要控制必须等待响应后再继续执行代码，可以使用同步模式。

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 打开与服务器的连接，使用同步模式
xhr.open('GET', 'https://example.com/api', false);
// 发送请求
xhr.send();
// 处理来自服务器的响应
if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
}

需要注意的是，使用同步模式时，浏览器将会被阻塞，页面处于加载状态，直到请求结束。因此，同步模式不应该被滥用，仅在必要时才使用。

总结

XMLHttpRequest 是客户端用于向服务器发送和接收数据的重要 API，它支持异步和同步模式，可以使用事件模型来处理来自服务器的响应。跨域请求需要使用 CORS 技术，同时需要服务器端设置响应头部。在开发过程中，需要注意使用异步模式，避免页面被阻塞，影响用户体验。