一、open
方法
open
方法是使用XHR对象时首先要调用的方法,用于初始化一个请求。它接受三个参数(在某些情况下可以接受更多):
- 请求方法:指定HTTP请求的方法,如"GET"、"POST"等。这个方法不区分大小写,但通常使用大写字母。
- URL:请求发送到的URL。这个URL是相对于执行代码的当前页面的(也可以使用绝对路径)。重要的是,出于安全考虑,只能向同一个域中使用相同端口和协议的URL发送请求。
- 异步:一个布尔值,指定请求是否应该异步处理。默认为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对象,因为重用可能会终止之前挂起的请求。
推荐阅读:开放平台