AJAX,全称Asynchronous JavaScript and XML,即异步的JavaScript和XML。它可以使Web应用程序实现异步通信,避免页面刷新,提升用户体验。
XMLHttpRequest对象是实现AJAX的核心,它是一个在JavaScript中被预定义的对象,用于与服务器异步交换数据。下面我们来详细讲解XMLHttpRequest对象的创建和使用。
XMLHttpRequest对象创建
创建XMLHttpRequest对象,可以使用以下代码:
var xhr = new XMLHttpRequest();
XMLHttpRequest对象方法
XMLHttpRequest对象提供了多个有用的方法,以下是其中一部分:
open()
open()方法用于指定请求的类型(GET、POST等)、URL地址和是否异步处理请求。示例代码如下:
xhr.open('GET', 'http://example.com/test', true);
send()
send()方法用于发送请求。如果是POST请求,需要发送数据,send()方法需要传入数据参数。示例代码如下:
xhr.send('data=' + encodeURIComponent('hello world'));
abort()
abort()方法用于停止当前请求。示例代码如下:
xhr.abort();
XMLHttpRequest对象属性
XMLHttpRequest对象还提供了多个属性,以下是其中一部分:
onreadystatechange
onreadystatechange属性用于指定处理状态变化的回调函数。示例代码如下:
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
readyState
readyState属性表示请求的当前状态,它有以下几个取值:
- 0:未初始化,尚未调用open()方法
- 1:已打开,已经调用open()方法,但尚未调用send()方法
- 2:已发送,已经调用send()方法,但尚未接收到响应
- 3:正在接收,已经接收到部分响应数据
- 4:已完成,已经接收到全部响应数据
status
status属性表示响应的HTTP状态码,它有以下几个取值:
- 200:OK
- 404:未找到页面
- 500:服务器内部错误
示例说明
下面提供两个XMLHttpRequest对象的使用示例。
GET请求示例
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.open('GET', 'http://example.com/test', true);
xhr.send();
说明:上面的代码创建一个XMLHttpRequest对象,指定请求类型为GET,请求URL为http://example.com/test,并且设置为异步处理。当请求状态变化时,打印响应结果。
POST请求示例
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.open('POST', 'http://example.com/test', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('data=' + encodeURIComponent('hello world'));
说明:上面的代码创建一个XMLHttpRequest对象,指定请求类型为POST,请求URL为http://example.com/test,并且设置为异步处理。同时,设置请求头Content-Type为application/x-www-form-urlencoded,传入数据参数data=hello%20world。当请求状态变化时,打印响应结果。
以上就是对XMLHttpRequest对象创建使用详解的完整攻略。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:AJAX XMLHttpRequest对象创建使用详解 - Python技术站