1. 什么是Ajax
- Ajax是指JavaScript发送异步网络请求。
- 通过XMLHttpRequest对象与服务器通信。
- 可以发送和接收JSON，XML，HTML和文本等多种格式数据
- 可以不需要刷新页面，发送请求和接收数据
2. Ajax请求步骤
- 创建XMLHttpRequest对象实例
- 声明一个函数，当XMLHttpRequest请求对象状态变化时处理响应
- 发送请求
- httpRequest.open('GET'(请求方法), 'http://www.example.org/some.file'（请求url）, true（是否异步，默认true）);
- httpRequest.send(); 发送给服务器内容
- httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 设置请求类型
- 检查XMLHttpRequest请求状态（XMLHTTPRequest.readyState === 4）
- 0 请求未初始化
- 1 已建立服务器链接
- 2 请求已接受
- 3 正在处理请求
- 4 请求已完成并且响应已准备好
- 检查HTTP请求状态
- 接收响应数据
<button id="ajaxButton" type="button">Make a request</button>
<script>
(function() {
var httpRequest;
document.getElementById("ajaxButton").addEventListener('click', makeRequest);
function makeRequest() {
// 1.创建XMLHttpRequest对象实例
httpRequest = new XMLHttpRequest();
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
// 2.XMLHttpRequest请求对象状态变化时，alertContents函数处理响应
httpRequest.onreadystatechange = alertContents;
// 3.发送HTTP请求
httpRequest.open('GET', 'test.html');
httpRequest.send();
}
function alertContents() {
// 4.检查XMLHttpRequest请求状态
if (httpRequest.readyState === XMLHttpRequest.DONE) {
// 5.检查Http请求状态
if (httpRequest.status === 200) {
// 6.接收响应数据
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
})();
</script>
