XML 教程

XML 教程 XML 简介 XML 用途 XML 树结构 XML 语法 XML 元素 XML 属性 XML 命名空间 XML Display XML HttpRequest XML Parser XML DOM XML XPath XML XSLT XML XQuery XML XLink XML 验证器 XML DTD XML Schema XML 服务器 XML 实例 XML 测验

XML AJAX

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

XML DOM

DOM 简介 DOM 节点 DOM 访问节点 DOM 节点信息 DOM 节点列表 DOM 节点遍历 DOM 节点导航 DOM 获取节点 DOM 更改节点 DOM 删除节点 DOM 替换节点 DOM 创建节点 DOM 添加节点 DOM 克隆节点 DOM 实例

XPath 教程

XPath 简介 XPath 节点 XPath 语法 XPath 轴(Axes) XPath 运算符 XPath 实例

XSLT 教程

XSLT 简介 XSL 语言 XSLT 转换 XSLT <template> XSLT <value-of> XSLT <for-each> XSLT <sort> XSLT <if> XSLT <choose> XSLT Apply XSLT 客户端 XSLT 服务端 XSLT 编辑 XML XSLT 实例

XQuery 教程

XQuery 简介 XQuery 实例 XQuery FLWOR 表达式 XQuery FLWOR + HTML XQuery 术语 XQuery 语法 XQuery 添加元素和属性 XQuery 选择和过滤 XQuery 函数

XML DTD

DTD 简介 DTD 构建模块 DTD 元素 DTD 属性 DTD 元素 vs. 属性 DTD 实体 DTD 实例

XSD Schema

XSD 简介 XSD How To XSD <schema> XSD 元素 XSD 属性 XSD 限制

XSD Complex

XSD 复杂元素 XSD 空元素 XSD 仅限元素 XSD 纯文本元素 XSD 混合 XSD 指示器 XSD <any> XSD <anyAttribute> XSD 替换 XSD 实例

XSD 数据类型

XSD 字符串 XSD 日期 XSD 数值 XSD 杂项 XSD 参考手册

Web Services

XML Services 简介 XML WSDL XML SOAP XML RDF XML RSS

参考手册

DOM 节点类型 DOM 节点 DOM NodeList DOM NamedNodeMap DOM 文档 DOM 元素 DOM 属性 DOM 文本 DOM CDATA DOM 注释 DOM XMLHttpRequest DOM 解析器 XSLT 元素 XSLT/XPath 函数


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(asynchronous异步)或false(synchronous同步)
send() 将请求发送到服务器(用于GET)
send(string) 将请求发送到服务器(用于POST)

GET 或 POST?

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

但是,在以下情况下始终使用POST请求:

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

GET 请求

一个简单的 GET 请求:

实例

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
尝试一下 »

在上面的实例中,您可能会得到缓存的结果。要避免这种情况,请向URL添加唯一ID:

实例

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
尝试一下 »

如果要使用GET方法发送信息,请将信息添加到URL:

实例

xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
尝试一下 »


POST 请求

一个简单的 POST 请求:

实例

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
尝试一下 »

要像HTML表单一样发布数据,请添加一个带有setRequestHeader()的HTTP头。指定要在send()方法中发送的数据:

实例

xhttp.open("POST", "demo_post2.asp", 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(可以在发送回响应之前在服务器上执行操作)。


异步 - True or False?

服务器请求应异步发送。

open() 方法的异步参数应设置为true:

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

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

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

onreadystatechange 属性

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

函数在XMLHttpResponse 对象的 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的更多信息。


Synchronous 请求

要执行同步请求,请将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异常时抛出异常。