XMLHttpRequest（XHR）对象的open、send方法及其他函数和属性讲解

一、open方法

open方法是使用XHR对象时首先要调用的方法，用于初始化一个请求。它接受三个参数（在某些情况下可以接受更多）：

1. 请求方法：指定HTTP请求的方法，如"GET"、"POST"等。这个方法不区分大小写，但通常使用大写字母。
2. URL：请求发送到的URL。这个URL是相对于执行代码的当前页面的（也可以使用绝对路径）。重要的是，出于安全考虑，只能向同一个域中使用相同端口和协议的URL发送请求。
3. 异步：一个布尔值，指定请求是否应该异步处理。默认为true，表示异步处理；如果设置为false，则请求将同步处理，JavaScript代码会等待服务器响应后再继续执行。

示例代码：

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "example.txt", true);

二、send方法

send方法用于实际发送HTTP请求到服务器。它接受一个参数，即作为请求体发送的数据。对于GET请求，这个参数通常传入null（尽管有些浏览器可能不要求），因为GET请求的数据是通过URL传递的。对于POST请求，这个参数是请求体中要发送的数据。

xhr.send(null); // 对于GET请求 


// 对于POST请求，可能需要设置请求头 
xhr.open("POST", "example.php", true); 
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
xhr.send("name=value&anothername=anothervalue");

三、其他常用函数和属性

1. setRequestHeader

用于设置HTTP请求头。这个方法必须在调用open方法之后、send方法之前被调用。

	xhr.setRequestHeader("key", "value");

2. getResponseHeader

通过指定的响应头名称获取响应头信息。

var value = xhr.getResponseHeader("Content-Type");

3. onreadystatechange

这是一个事件处理程序属性，用于指定当请求的状态发生变化时执行的函数。XHR对象的readyState属性表示请求/响应过程的当前阶段，每当这个属性的值发生变化时，onreadystatechange事件就会被触发。

xhr.onreadystatechange = function() { 
if (xhr.readyState == 4 && xhr.status == 200) { 
// 处理响应 
} 
};

4. readyState

一个只读属性，表示请求/响应过程的当前活动阶段。可能的值包括：

• 0：未初始化。尚未调用open()方法。
• 1：启动。已经调用open()方法，但尚未调用send()方法。
• 2：发送。已经调用send()方法，但尚未接收到响应。
• 3：接收。已经接收到部分响应数据。
• 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

5. status 和 statusText

• status：一个只读属性，表示响应的HTTP状态码。
• statusText：一个只读属性，表示HTTP状态的说明文本。通常不建议依赖statusText，因为它在跨浏览器使用时可能不太可靠。

6. responseText 和 responseXML

• responseText：作为响应主体被返回的文本。
• responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含响应数据的XML DOM文档。对于非XML数据，此属性的值将为null。

四、注意事项

• 发送异步请求时，不要在调用send()方法后立即处理响应，因为这时响应可能还没有返回。应该使用onreadystatechange事件或onload事件来处理响应。
• 出于安全考虑，XHR对象遵循同源策略，只能向同一个域发送请求。如果需要跨域请求，可以使用CORS（跨源资源共享）机制。
• 在处理完XHR对象后，出于内存管理的考虑，建议对XHR对象进行解引用操作，避免内存泄漏。同时，不建议重用XHR对象，因为重用可能会终止之前挂起的请求。
   

推荐阅读：开放平台