AJAX XMLHttp请求


目录

    显示目录


XMLHttpRequest 对象用于从服务器请求数据。


向服务器发送请求

要向服务器发送请求,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

xhttp.open("GET", "ajax_info.txt", true);
 xhttp.send();
open(method, url, async)

指定请求的类型

方法:请求类型:GET 或 POST
url:服务器(文件)位置
async:true(异步)或 false(同步)

send()

向服务器发送请求(用于 GET)

send(string)

向服务器发送请求(用于POST)


url - 服务器上的文件

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 请求?

GETPOST 更简单、更快,并且可以在大多数情况下使用。

但是,在以下情况下请始终使用 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>
setRequestHeader(header, value)

向请求添加 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 异常。