XMLHttpRequest 对象用于从服务器请求数据。
要向服务器发送请求,我们使用 XMLHttpRequest
对象的 open() 和 send() 方法:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
指定请求的类型
方法:请求类型:GET 或 POST
url:服务器(文件)位置
async:true(异步)或 false(同步)
向服务器发送请求(用于 GET)
向服务器发送请求(用于POST)
open()
方法的 url 参数是服务器上文件的地址:
xhttp.open("GET", "ajax_test.asp", true);
该文件可以是任何类型的文件,例如 .txt 和 .xml,或服务器脚本文件,如 .asp 和 .php(可以执行 在发回响应之前在服务器上执行的操作)。
服务器请求应该异步发送。
open() 的异步参数 方法应设置为 true:
xhttp.open("GET", "ajax_test.asp", true);
通过异步发送, JavaScript 不必等待服务器响应,而是可以:
等待服务器响应时执行其他脚本
响应准备好后处理响应
async 参数的默认值为 async=true。
您可以安全地从代码中删除第三个参数。
不建议使用同步 XMLHttpRequest (async=false),因为 JavaScript 会 停止执行,直到服务器响应准备好。如果服务器繁忙或缓慢, 应用程序将挂起或停止。
GET
请求还是 POST
请求?GET
比 POST
更简单、更快,并且可以在大多数情况下使用。
但是,在以下情况下请始终使用 POST 请求:
缓存文件不是一个选项(更新服务器上的文件或数据库)。
向服务器发送大量数据(POST没有大小限制)。
发送用户输入(可能包含未知字符)时,POST 比 GET 更稳健、更安全。
一个简单的 GET
请求:
xhttp.open("GET", "demo_get.asp");
xhttp.send();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get.asp");
xhttp.send();
}
</script>
</body>
</html>
在上面的示例中,您可能会得到缓存的结果。为了避免这种情况,请向 URL 添加唯一 ID:
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
}
</script>
</body>
</html>
如果您想使用 GET
方法发送信息,请将信息添加到 URL:
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
}
</script>
</body>
</html>
服务器如何使用输入以及服务器如何响应请求,将在后面的章节中解释。
一个简单的 POST
请求:
xhttp.open("POST", "demo_post.asp");
xhttp.send();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("POST", "demo_post.asp");
xhttp.send();
}
</script>
</body>
</html>
要像 HTML 表单一样 POST 数据,请使用 setRequestHeader()
添加 HTTP 标头。 在 send()
方法中指定要发送的数据:
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("POST", "demo_post2.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
}
</script>
</body>
</html>
向请求添加 HTTP 标头
header:指定标头名称
value:指定标头值
要执行同步请求,请将 open()
方法中的第三个参数更改为 false
:
xhttp.open("GET", "ajax_info.txt", false);
有时 async=false 用于快速测试。您还会发现 较旧的 JavaScript 代码中的同步请求。
由于代码将等待服务器完成,因此不需要 onreadystatechange
功能:
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
</body>
</html>
不建议使用同步 XMLHttpRequest (async=false),因为 JavaScript 会 停止执行,直到服务器响应准备好。如果服务器繁忙或缓慢, 应用程序将挂起或停止。
鼓励现代开发工具警告使用 同步请求,发生时可能会抛出 InvalidAccessError 异常。