使用原生AJAX完成任意异步交互效果
时间: 2023-10-16 16:05:36 浏览: 50
以下是一个简单的原生AJAX实现异步交互的例子:
HTML代码:
```
<button id="btn">点击发送请求</button>
<div id="result"></div>
```
JavaScript代码:
```
var btn = document.getElementById('btn');
var result = document.getElementById('result');
btn.addEventListener('click', function() {
var xhr = new XMLHttpRequest(); // 创建XHR对象
xhr.onreadystatechange = function() { // 监听XHR对象的状态变化事件
if (xhr.readyState === XMLHttpRequest.DONE) { // XHR对象的状态为DONE
if (xhr.status === 200) { // HTTP状态码为200
result.innerHTML = xhr.responseText; // 将服务器返回的数据显示在页面上
} else {
result.innerHTML = '请求失败'; // 显示请求失败的提示信息
}
}
};
xhr.open('GET', 'http://example.com/api/data'); // 配置XHR对象
xhr.send(); // 发送请求
});
```
这个例子中,当用户点击页面上的按钮时,会创建一个XHR对象,并发送一个GET请求到指定的API地址。当XHR对象的状态发生变化时,会检查XHR对象的状态和HTTP状态码,如果状态和状态码都符合要求,就将服务器返回的数据显示在页面上。如果请求失败,就显示请求失败的提示信息。