updream 一键生成高质量推广成片剧云中文短剧剧本制作平台 AniShort AI短剧协同制作平台 Laper 剧本策划到成片协作

PHP MySQL jquery HTML CSS

JS教程 JS版本 JS对象 JS函数 JS类 JS Async JS HTML DOM JS Browser BOM JS Web API JS AJAX JS JSON JS vs jQuery JS图形 JS参考手册

简介使用输出语句语法注释变量 Let Const 运算符算数赋值数据类型函数对象事件字符串字符串方法字符串搜索字符串模板数字 BigInt 数字方法数字属性数组数组方法数组搜索数组排序数组迭代数组 Const 日期日期格式日期获取方法日期设置方法数学随机逻辑比较条件 Switch Loop For Loop For In Loop For Of Loop While Break 可迭代对象 Set Set 方法 Map Map 方法 typeof 类型转换解构位运算正则表达式运算符优先级异常作用域 Hoisting 严格模式 this 关键词箭头函数类模块 JSON 调试样式指南最佳实践错误性能保留词 JS 版本 JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS 2019 JS 2020 JS 2021 JS 2022 JS 2023 JS 2024 JS IE / Edge JS 历史对象定义对象属性对象方法对象显示对象访问器对象构造器对象原型对象引用函数定义函数参数函数调用函数 Call 函数 Apply 函数绑定闭包类简介类继承 Static 回调异步 Promise Async DOM 简介 DOM 方法 DOM 文档 DOM 元素 DOM HTML DOM 表单 DOM CSS DOM 动画 DOM 事件 DOM 事件监听程序 DOM 导航 DOM 节点 DOM 集合 DOM 节点列表 Window Screen Location History Navigator 弹出框 Timing Cookies Web API 简介 Web Form API Web History API Web Storage API Web Worker API Web Fetch API Web Geolocation API AJAX 简介 AJAX XMLHttp AJAX 请求 AJAX 响应 AJAX XML 文件 AJAX PHP AJAX ASP AJAX 数据库 AJAX 应用程序 AJAX 实例 JSON 简介 JSON 语法 JSON vs XML JSON 数据类型 JSON 解析 JSON 字符串化 JSON 对象 JSON 数组 JSON 服务器 JSON PHP JSON HTML JSON JSONP jQuery 选择器 jQuery HTML jQuery CSS jQuery DOM 图形 Canvas Plotly.js Chart 谷歌图表 D3.js 参考手册（类别排序）参考手册（字母排序）

JS教程

JS版本

JS 版本 JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS 2019 JS 2020 JS 2021 JS 2022 JS 2023 JS 2024 JS IE / Edge JS 历史

JS对象

对象定义对象属性对象方法对象显示对象访问器对象构造器对象原型对象引用

JS函数

函数定义函数参数函数调用函数 Call 函数 Apply 函数绑定闭包

JS类

类简介类继承 Static

JS Async

回调异步 Promise Async

JS HTML DOM

DOM 简介 DOM 方法 DOM 文档 DOM 元素 DOM HTML DOM 表单 DOM CSS DOM 动画 DOM 事件 DOM 事件监听程序 DOM 导航 DOM 节点 DOM 集合 DOM 节点列表

JS Browser BOM

Window Screen Location History Navigator 弹出框 Timing Cookies

JS Web API

Web API 简介 Web Form API Web History API Web Storage API Web Worker API Web Fetch API Web Geolocation API

JS AJAX

AJAX 简介 AJAX XMLHttp AJAX 请求 AJAX 响应 AJAX XML 文件 AJAX PHP AJAX ASP AJAX 数据库 AJAX 应用程序 AJAX 实例

JS JSON

JSON 简介 JSON 语法 JSON vs XML JSON 数据类型 JSON 解析 JSON 字符串化 JSON 对象 JSON 数组 JSON 服务器 JSON PHP JSON HTML JSON JSONP

JS vs jQuery

jQuery 选择器 jQuery HTML jQuery CSS jQuery DOM

JS图形

图形 Canvas Plotly.js Chart 谷歌图表 D3.js

JS参考手册

参考手册（类别排序）参考手册（字母排序）

JavaScript

更新时间2025-08-07

AJAX 简介 AJAX 请求

XMLHttpRequest 对象

所有现代浏览器都支持 XMLHttpRequest 对象。

XMLHttpRequest 对象可用于在后台与 Web 服务器交换数据。这意味着可以更新网页的部分内容，而无需重新加载整个页面。

创建 XMLHttpRequest 对象

所有现代浏览器（Chrome、Firefox、IE、Edge、Safari、Opera）都有内置的 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable = new XMLHttpRequest();

定义回调函数

回调函数是作为参数传递给另一个函数的函数。

在这种情况下，回调函数应包含响应准备就绪时要执行的代码。

xhttp.onload = function() {
  // 当响应准备就绪时要做什么
}

发送请求

如需向服务器发送请求，您可以使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

实例

// 创建 XMLHttpRequest 对象
const xhttp = new XMLHttpRequest();

// 定义回调函数
xhttp.onload = function() {
  // 您可以在这里使用数据
}

// 发送请求
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

运行实例 »

点击 "运行实例" 按钮查看在线实例

跨域访问（Access Across Domains）

出于安全原因，现代浏览器不允许跨域访问。

这意味着网页和它尝试加载的 XML 文件必须位于同一台服务器上。

W3School 上的例子都打开位于 W3School 域中的 XML 文件。

如果您想在自己的网页之一上使用上面的例子，您加载的 XML 文件必须位于您自己的服务器上。

XMLHttpRequest 对象方法

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象。
abort()	取消当前请求。
getAllResponseHeaders()	返回头部信息。
getResponseHeader()	返回特定的头部信息。
open(method, url, async, user, psw)	规定请求。 method：请求类型 GET 或 POST url：文件位置 async：true（异步）或 false（同步） user：可选的用户名 psw：可选的密码
send()	向服务器发送请求，用于 GET 请求。
send(string)	向服务器发送请求，用于 POST 请求。
setRequestHeader()	将标签/值对添加到要发送的标头。

XMLHttpRequest 对象属性

属性	描述
onload	定义接收到（加载）请求时要调用的函数。
onreadystatechange	定义当 readyState 属性发生变化时调用的函数。
readyState	保存 XMLHttpRequest 的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText	以字符串形式返回响应数据。
responseXML	以 XML 数据返回响应数据。
status	返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found" 如需完整列表请访问 Http 消息参考手册
statusText	返回状态文本（比如 "OK" 或 "Not Found"）

onload 属性

使用 XMLHttpRequest 对象时，您可以定义一个回调函数，以便在请求收到答复时执行。

请在 XMLHttpRequest 对象的 onload 属性中定义该函数：

实例

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

运行实例 »

点击 "运行实例" 按钮查看在线实例

多个回调函数

如果网站中有多个 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) {
  // 这里是动作
}
function myFunction2(xhttp) {
  // 这里是动作
}

onreadystatechange 属性

readyState 属性保存 XMLHttpRequest 的状态。

onreadystatechange 属性定义了一个回调函数，当 readyState 改变时执行该函数。

status 属性和 statusText 属性保存 XMLHttpRequest 对象的状态。

属性	描述
onreadystatechange	定义当 readyState 属性改变时调用的函数。
readyState	保存 XMLHttpRequest 的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
status	返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found" 如需完整列表请访问 Http 消息参考手册
statusText	返回状态文本（比如 "OK" 或 "Not Found"）。

每次 readyState 改变时都会调用 onreadystatechange 函数。

当 readyState 为 4 且 status 为 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();
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

onreadystatechange 事件被触发了四次（1-4），每次 readyState 变化一次。

AJAX 简介 AJAX 请求

相关视频

免费