AJAX 的关键是 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象
定义回调函数
打开 XMLHttpRequest 对象
向服务器发送请求
所有现代浏览器都支持 XMLHttpRequest
对象。
XMLHttpRequest
对象可用于与背后的 Web 服务器交换数据 场景。这意味着可以更新网页的部分内容,而无需 重新加载整个页面。
所有现代浏览器(Chrome、Firefox、IE、Edge、Safari、Opera)都有一个内置的 XMLHttpRequest
对象。
创建 XMLHttpRequest
对象的语法:
variable = new XMLHttpRequest();
回调函数是作为参数传递给另一个函数的函数。
在这种情况下,回调函数应包含在以下情况下执行的代码: 响应已准备好。
xhttp.onload = function() {
// What to do when the response is ready
}
要向服务器发送请求,可以使用 open() 和 send() 方法 XMLHttpRequest
对象:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Define a callback function
xhttp.onload = function() {
// Here you can use the Data
}
// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<div id="demo">
<p>Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
</script>
</body>
</html>
出于安全原因,现代浏览器不允许跨域访问。
这意味着网页和它尝试加载的 XML 文件必须位于同一服务器上。
W3Schools 上的示例都打开位于 W3Schools 域中的 XML 文件。
如果您想在您自己的网页之一上使用上面的示例, 您加载的 XML 文件必须位于您自己的服务器上。
创建一个新的 XMLHttpRequest 对象
取消当前请求
返回标头信息
返回具体的头信息
指定请求
方法:请求类型 GET 或 POST
url:文件位置
async:true(异步)或 false(同步)
user:可选用户名
psw:可选密码
向服务器发送请求
用于GET请求
将请求发送到服务器。
用于 POST 请求
将标签/值对添加到要发送的标头
定义接收(加载)请求时要调用的函数
定义当readyState属性改变时调用的函数
保存 XMLHttpRequest 的状态。
0:请求未初始化
1:服务器连接建立
2:收到请求
3:处理请求
4:请求完成,响应就绪
以字符串形式返回响应数据
以 XML 数据形式返回响应数据
返回请求的状态号
200:“确定”
403:“禁止”
404:“未找到”
如需完整列表,请访问 Http 消息参考
返回状态文本(例如“OK”或“Not Found”)
使用 XMLHttpRequest
对象,您可以定义一个回调函数,以便在以下情况下执行: 该请求收到答复。
该函数在 XMLHttpRequest
对象的 onload
属性中定义:
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML =
this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
</script>
</body>
</html>
如果网站中有多个 AJAX 任务,您应该为以下任务创建一个函数: 执行 XMLHttpRequest
对象,每个对象都有一个回调函数 AJAX 任务。
函数调用应包含 URL 以及调用时调用的函数 响应已准备好。
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
readyState
属性保存 XMLHttpRequest 的状态。
onreadystatechange
属性定义了当readyState改变时要执行的回调函数。
status
属性和 statusText
属性保存 XMLHttpRequest 对象的状态。
定义当readyState属性改变时调用的函数
保存 XMLHttpRequest 的状态。
0:请求未初始化
1:服务器连接建立
2:收到请求
3:处理请求
4:请求完成,响应就绪
200:“可以”
403:“禁止”
404:“找不到页面”
有关完整列表,请访问 Http 消息参考
返回状态文本(例如“OK”或“Not Found”)
每次readyState改变时都会调用onreadystatechange
函数。
当 readyState
为 4 且状态为 200 时,响应已就绪:
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
</script>
</body>
</html>
onreadystatechange
事件被触发四次 (1-4),readyState 每次更改一次。