导航
×
   ❮   
HTML CSS JavaScript PHP Go Sass W3C Colors ECMS

JS 教程

JS 简介 JS 如何使用 JS 输出 JS 语法 JS 语句 JS 注释 JS 变量 JS 运算符 JS 条件语句 JS 循环 JS 字符串 JS 数字 JS 函数 JS 对象 JS 日期 JS 数组 JS 类型化数组 JS 集合 JS Map 映射 JS Math JS 正则表达式 JS 数据类型 JS 错误 JS 事件 JS 编程 JS 关键字参考 JS 保留关键字参考 JS 运算符参考 JS 运算符优先级 JS UTF-8 字符 JS UTF-8 符号 JS UTF-8 表情符号 JS 版本

JS 高级教程

JS 对象 JS 函数 JS 类 JS 迭代 JS Promises JS 模块 JS HTML DOM JS Windows JS Web API JS AJAX JS JSON JS jQuery JS 图形

JS 实例

JS 实例 JS HTML DOM JS HTML 输入 JS HTML 对象 JS HTML 事件 JS Browser JS 测验

AJAX XMLHttpRequest


XMLHttpRequest 对象用于同服务器交换数据。


向服务器发送请求

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

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

规定请求的类型

  • method:请求的类型:GET 还是 POST
  • url:服务器(文件)位置
  • async:true(异步)或 false(同步)
send() 向服务器发送请求(用于 GET)
send(string) 向服务器发送请求(用于 POST)

GET 还是 POST?

GETPOST 更简单更快,可用于大多数情况下。

不过,请在以下情况始终使用 POST:

  • 缓存文件不是选项(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 无大小限制)
  • 发送用户输入(可包含未知字符),POST 比 GET 更强大更安全

GET 请求

一条简单的 GET 请求:

实例

xhttp.open("GET", "demo_get.php", true);
xhttp.send();
亲自试一试 »

如果您需要用 GET 方法来发送信息,请向 URL 添加这些信息:

实例

xhttp.open("GET", "demo_get2.php?fname=Henry&lname=Ford", true);
xhttp.send();
亲自试一试 »

POST 请求

一条简单的 POST 请求:

实例

xhttp.open("POST", "demo_post.php", true);
xhttp.send();
亲自试一试 »

如需像 HTML 表单那样 POST 数据,请通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定您需要发送的数据:

实例

xhttp.open("POST", "ajax_test.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
亲自试一试 »
方法 描述
setRequestHeader(header, value)

向请求添加 HTTP 头部

  • header:规定头部名称
  • value:规定头部值

url - 服务器上的文件

open() 方法的 url 参数,是服务器上文件的地址:

xhttp.open("GET", "ajax_test.asp", true);

该文件可以是任何类型的文件,如 .txt 和 .xml,或服务器脚本文件,如 .asp 和 .php(它们可以在发送回响应之前在服务器执行操作)。


异步 - ture 还是 false?

如需异步发送请求,open() 方法的 async 参数必须设置为 true:

xhttp.open("GET", "ajax_test.asp", true);

发送异步请求对 web 开发人员来说是一个巨大的进步。服务器上执行的许多任务都非常耗时。在 AJAX 之前,此操作可能会导致应用程序挂起或停止。

通过异步发送,JavaScript 不必等待服务器响应,而是可以:

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪时处理响应

onreadystatechange 属性

通过 XMLHttpRequest 对象,您可以定义当请求接收到应答时所执行的函数。

这个函数是在 XMLHttpRequest 对象的 onreadystatechange 属性中定义的:

实例

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
亲自试一试 »

您将在稍后的章节学到更多有关 onreadystatechange 的知识。


同步请求

如需执行同步的请求,请把 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;
亲自试一试 »

我们不推荐同步的 XMLHttpRequest (async = false),因为 JavaScript 将停止执行直到服务器响应就绪。如果服务器繁忙或缓慢,应用程序将挂起或停止。

同步 XMLHttpRequest 正在从 Web 标准中移除,但是这个过程可能需要很多年。

现代开发工具被鼓励对使用同步请求做出警告,并且当这种情况发生时,可能会抛出 InvalidAccessError 异常。


Copyright ©2020-2026 freew3c.com All Rights Reserved 提供的内容仅用于学习和测试,不保证内容的正确性。