轻松上手,快乐学习!

JS 教程

JS 首页JS 教程JS 简介JS 如何使用JS 输出JS 语句JS 语法JS 注释JS 变量JS 运算符JS 算法JS 赋值JS 数据类型JS 函数JS 对象JS 事件JS 字符串JS 字符串方法JS 数值JS 数值方法JS 数组JS 数组方法JS 数组排序JS 数组迭代JS 日期JS 日期格式JS 日期获取方法JS 日期设置方法JS 数学运算JS 随机数JS 布尔运算符JS 比较运算符JS 条件语句JS Switch 语句JS For 循环JS While 循环JS BreakJS 类型转换JS 位运算符JS 正则表达式JS 错误处理JS 作用域JS HoistingJS 严格模式JS this 关键词JS Let 关键词JS Const 关键词JS 箭头函数JS 类JS 调试JS 样式指南JS 最佳实践JS 常见错误JS 性能优化JS 保留关键词JS 版本JS ES5JS ES6JS JSONJS FormsForms APIObject 对象定义Object 对象属性Object 对象方法Object DisplayObject 对象访问器Object 对象构造器Object 对象原型Object ECMAScript 5JS 函数定义JS 函数参数JS 函数调用JS Call 函数JS Apply 函数JS 函数闭包Class 类简介Class 类继承Class StaticJS 回调JS 异步JS PromisesJS Async/AwaitDOM 简介DOM 方法DOM 文档DOM 元素DOM HTMLDOM CSSDOM 动画DOM 事件DOM 事件监听DOM 导航DOM 节点DOM 集合DOM 节点列表JS WindowJS ScreenJS LocationJS HistoryJS NavigatorJS 弹出框JS TimingJS CookiesAJAX 简介AJAX XMLHttpAJAX 请求AJAX 响应AJAX XML 文件AJAX PHPAJAX ASPAJAX 数据库AJAX 应用程序AJAX 实例JSON 简介JSON 语法JSON vs XMLJSON 数据类型JSON 解析JSON 字符串化JSON 对象JSON 数组JSON PHPJSON HTMLJSON JSONPWeb API 简介Web History APIWeb Storage APIWeb Geolocation APIjQuery 选择器jQuery HTMLjQuery CSSjQuery DOMJS 实例JS HTML DOMJS HTML 输入JS HTML 对象JS HTML 事件JS BrowserJS 编辑器JS 练习JS 测验

JS 参考手册

JS 参考手册(类别排序)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.php", true);

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


异步 - ture 还是 false?

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

xhttp.open("GET", "ajax_test.php", 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 异常。