**XML 实例**

XML 文档第一行以 XML 声明开始，用来表述文档的一些信息，如：

<?xml version="1.0" encoding="UTF-8"?>

XML 定义结构、存储信息、传送信息。

**XML 文档实例**

<?xml version="1.0" encoding="UTF-8"?> <site> <name>RUNOOB</name> <url>https://www.runoob.com</url> <logo>runoob-logo.png</logo> <desc>编程学习网站</desc> </site>

**<name>、<url>、<logo>、<desc>** 分别为标签，标签内包含了要传递的信息。

标签必须成对出现，有开始标签就需要有结束标签，例如：

- 开始标签：**<name>**
- 结束标签：**</name>**

XML 被设计用来传输和存储数据。

HTML 被设计用来显示数据。

XML 指可扩展标记语言（eXtensible Markup Language）。

可扩展标记语言（英语：Extensible Markup Language，简称：XML）是一种标记语言，是从标准通用标记语言（SGML）中简化修改出来的。它主要用到的有可扩展标记语言、可扩展样式语言（XSL）、XBRL 和 XPath 等。

**什么是 XML？**

- XML 指可扩展标记语言（EXtensible Markup Language）。
- XML 是一种很像 HTML 的标记语言。
- XML 的设计宗旨是传输数据，而不是显示数据。
- XML 标签没有被预定义。您需要自行定义标签。
- XML 被设计为具有自我描述性。
- XML 是 W 3 C 的推荐标准。

---

**XML 和 HTML 之间的差异**

XML 不是 HTML 的替代。

XML 和 HTML 为不同的目的而设计：

- XML 被设计用来传输和存储数据，其焦点是数据的内容。
- HTML 被设计用来显示数据，其焦点是数据的外观。

HTML 旨在显示信息，而 XML 旨在传输信息。

通过 XML 您可以发明自己的标签

上面实例中的标签没有在任何 XML 标准中定义过（比如 <to> 和 <from>）。这些标签是由 XML 文档的创作者发明的。

这是因为 XML 语言没有预定义的标签。

HTML 中使用的标签都是预定义的。HTML 文档只能使用在 HTML 标准中定义过的标签（如 <p>、<h1> 等等）。

XML 允许创作者定义自己的标签和自己的文档结构。

XML 不是对 HTML 的替代

XML 是对 HTML 的补充。

XML 不会替代 HTML，理解这一点很重要。在大多数 Web 应用程序中，XML 用于传输数据，而 HTML 用于格式化并显示数据。

对 XML 最好的描述是：

XML 是独立于软件和硬件的信息传输工具。

XML 文档形成了一种树结构，它从"根部"开始，然后扩展到"枝叶"。

---

**一个 XML 文档实例**

XML 文档使用简单的具有自我描述性的语法：

<?xml version="1.0" encoding="UTF-8"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>

第一行是 XML 声明。它定义 XML 的版本（1.0）和所使用的编码（UTF-8 : 万国码, 可显示各种语言）。

下一行描述文档的**根元素**（像在说："本文档是一个便签"）：

<note>

接下来 4 行描述根的 4 个**子元素**（to, from, heading 以及 body）：

<to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body>

最后一行定义根元素的结尾：

</note>

**XML 文档形成一种树结构**

XML 文档必须包含**根元素**。该元素是所有其他元素的父元素。

XML 文档中的元素形成了一棵文档树。这棵树从根部开始，并扩展到树的最底端。

所有的元素都可以有子元素：

<root> <child> <subchild>.....</subchild> </child> </root>

父、子以及同胞等术语用于描述元素之间的关系。父元素拥有子元素。相同层级上的子元素成为同胞（兄弟或姐妹）。

所有的元素都可以有文本内容和属性（类似 HTML 中）。

---

**实例：**
\

上图表示下面的 XML 中的一本书：

**XML 文档实例**

<bookstore> <book category="COOKING"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="CHILDREN"> <title lang="en">Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> <book category="WEB"> <title lang="en">Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> </bookstore>

实例中的根元素是 <bookstore>。文档中的所有 <book> 元素都被包含在 <bookstore> 中。

<book> 元素有 4 个子元素：<title>、<author>、<year>、<price>。

**XML 文档形成一种树结构**

XML 文档必须包含**根元素**。该元素是所有其他元素的父元素。

XML 文档中的元素形成了一棵文档树。这棵树从根部开始，并扩展到树的最底端。

所有的元素都可以有子元素：

<root> <child> <subchild>.....</subchild> </child> </root>

父、子以及同胞等术语用于描述元素之间的关系。父元素拥有子元素。相同层级上的子元素成为同胞（兄弟或姐妹）。

所有的元素都可以有文本内容和属性（类似 HTML 中）。

---

**实例：**



上图表示下面的 XML 中的一本书：

**XML 文档实例**

<bookstore> <book category="COOKING"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="CHILDREN"> <title lang="en">Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> <book category="WEB"> <title lang="en">Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> </bookstore>

实例中的根元素是 <bookstore>。文档中的所有 <book> 元素都被包含在 <bookstore> 中。

<book> 元素有 4 个子元素：<title>、<author>、<year>、<price>。

XML 将数据组织成为一棵树,DOM 通过解析 XML 文档,为 XML 文档在逻辑上建立一个树模型,树的节点是一个个的对象。这样通过操作这棵树和这些对象就可以完成对 XML 文档的操作,为处理文档的所有方面提供了一个完美的概念性框架。

如下 XML 文档:

<line id="1"> the <bold>First</bold>line</line>



由于 DOM“一切都是节点（everything-is-a-node）”，XML 树的每个 Document、Element、Text 、Attr 和 Comment 都是 DOM Node。

由上面例子可知， DOM 实质上是一些节点的集合。由于文档中可能包含有不同类型的信息，所以定义了几种不同类型的节点，如：Document、Element、Text、Attr 、CDATASection、ProcessingInstruction、Notation 、EntityReference、Entity、DocumentType、DocumentFragment 等。

**XML 文档必须有根元素**

XML 必须包含根元素，它是所有其他元素的父元素，比如以下实例中 root 就是根元素：

<root> <child> <subchild>.....</subchild> </child> </root>

以下实例中 note 是根元素：

<?xml version="1.0" encoding="UTF-8"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>

XML 文档由元素构成，每个元素包括开始标签、结束标签和元素内容。

**属性**

元素可以包含属性，属性提供有关元素的附加信息。

属性位于开始标签中，例如：

<person age="30" gender="male">John Doe</person>

---

**XML 单标签**

所有的 XML 元素一般都有一个关闭标签，但也允许单标签的使用的。

单标签的写法如下：

<elementName attribute="value" />

单标签是指在一个标签中同时包含了开始和结束标签，形式类似于 HTML 中的空元素标签。

在 XML 中，你可以使用以下两种方式表示单标签：

使用空元素标签：

<exampleTag />

使用开始和结束标签，但是不包含任何内容：

<exampleTag></exampleTag>

这两种表示方式是等效的，你可以根据个人或项目的约定选择使用其中之一。

在许多 XML 解析器中，它们都会将这两种形式解释为相同的结构。

**实例**

<lineBreak />

这里 <lineBreak /> 是一个单标签，表示一个换行的操作。

带属性的单标签：

<image src="logo.png" alt="Logo" />

这个标签表示一个图像元素，它包含 src 和 alt 属性，表示图像的路径和替代文本。

XML 文件示例：

**实例**

**<?xml** version="1.0" encoding="UTF-8"**?>**  
**<root>**  
    **<note** to="Tove" from="Jani" heading="Reminder" body="Don't forget me this weekend!" **/>**  
    **<emptyElement** attribute="value" **/>**  
**</root>**

在这个示例中，<note> 和 <emptyElement /> 都是单标签。<note> 标签的用途是传递信息，而 <emptyElement /> 是一个没有子元素的空标签。

---

**XML 标签对大小写敏感**

XML 标签对大小写敏感。标签 <Letter> 与标签 <letter> 是不同的。

必须使用相同的大小写来编写打开标签和关闭标签：

<Message>这是错误的</message>

<message>这是正确的</message>

**注释：**打开标签和关闭标签通常被称为开始标签和结束标签。不论您喜欢哪种术语，它们的概念都是相同的。

---

**XML 必须正确嵌套**

在 HTML 中，常会看到没有正确嵌套的元素：

<b><i>This text is bold and italic</b></i>

在 XML 中，所有元素都**必须**彼此正确地嵌套：

<b><i>This text is bold and italic</i></b>

在上面的实例中，正确嵌套的意思是：由于 <i> 元素是在 <b> 元素内打开的，那么它必须在 <b> 元素内关闭。

---

**XML 属性值必须加引号**

与 HTML 类似，XML 元素也可拥有属性（名称/值的对）。

在 XML 中，XML 的属性值必须加引号。

请研究下面的两个 XML 文档。 第一个是错误的，第二个是正确的：

<note date=12/11/2007>

<to>Tove</to>

<from>Jani</from>

</note>

<note date="12/11/2007">

<to>Tove</to>

<from>Jani</from>

</note>

在第一个文档中的错误是，note 元素中的 date 属性没有加引号。

---

**实体引用**

在 XML 中，一些字符拥有特殊的意义。

如果您把字符 "<" 放在 XML 元素中，会发生错误，这是因为解析器会把它当作新元素的开始。

这样会产生 XML 错误：

<message>if salary < 1000 then</message>

为了避免这个错误，请用**实体引用**来代替 "<" 字符：

<message>if salary &lt; 1000 then</message>

在 XML 中，有 5 个预定义的实体引用：

|   |   |   |
|---|---|---|
|&lt;|<|less than|
|&gt;|>|greater than|
|&amp;|&|ampersand|
|&apos;|'|apostrophe|
|&quot;|"|quotation mark|

**注释：**在 XML 中，只有字符 "<" 和 "&" 确实是非法的。大于号是合法的，但是用实体引用来代替它是一个好习惯。

---

**XML 中的注释**

在 XML 中编写注释的语法与 HTML 的语法很相似。

<!-- This is a comment -->

---

**在 XML 中，空格会被保留**

HTML 会把多个连续的空格字符裁减（合并）为一个：

|   |   |
|---|---|
|HTML:|Hello           Tove|
|输出结果:|Hello Tove|

在 XML 中，文档中的空格不会被删减：

<bookstore>

    <book>

        <title>xx       xxx</title>

        <author>John Doe</author>

        <price>29.99</price>

    </book>

</bookstore>

title 内容读取显示如下：

xx       xxx

---

**XML 以 LF 存储换行**

在 Windows 应用程序中，换行通常以一对字符来存储：回车符（CR）和换行符（LF）。

在 Unix 和 Mac OSX 中，使用 LF 来存储新行。

在旧的 Mac 系统中，使用 CR 来存储新行。

XML 以 LF 存储换行。

ML 文档包含 XML 元素。

什么是 XML 元素？

XML 元素指的是从（且包括）开始标签直到（且包括）结束标签的部分。

一个元素可以包含：

其他元素

文本

属性

或混合以上所有...

<bookstore>

    <book category="CHILDREN">

        <title>Harry Potter</title>

        <author>J K. Rowling</author>

        <year>2005</year>

        <price>29.99</price>

    </book>

    <book category="WEB">

        <title>Learning XML</title>

        <author>Erik T. Ray</author>

        <year>2003</year>

        <price>39.95</price>

    </book>

</bookstore>

在上面的实例中，<bookstore> 和 <book> 都有 元素内容，因为他们包含其他元素。<book> 元素也有属性（category="CHILDREN"）。<title>、<author>、<year> 和 <price> 有文本内容，因为他们包含文本。

XML 命名规则

XML 元素必须遵循以下命名规则：

名称可以包含字母、数字以及其他的字符

名称不能以数字或者标点符号开始

名称不能以字母 xml（或者 XML、Xml 等等）开始

名称不能包含空格

可使用任何名称，没有保留的字词。

最佳命名习惯

使名称具有描述性。使用下划线的名称也很不错：<first_name>、<last_name>。

名称应简短和简单，比如：<book_title>，而不是：<the_title_of_the_book>。

避免 "-" 字符。如果您按照这样的方式进行命名："first-name"，一些软件会认为您想要从 first 里边减去 name。

避免 "." 字符。如果您按照这样的方式进行命名："first.name"，一些软件会认为 "name" 是对象 "first" 的属性。

避免 ":" 字符。冒号会被转换为命名空间来使用（稍后介绍）。

XML 文档经常有一个对应的数据库，其中的字段会对应 XML 文档中的元素。有一个实用的经验，即使用数据库的命名规则来命名 XML 文档中的元素。

在 XML 中，éòá 等非英语字母是完全合法的，不过需要留意，您的软件供应商不支持这些字符时可能出现的问题。

XML 元素是可扩展的

XML 元素是可扩展，以携带更多的信息。

请看下面的 XML 实例：

<note>

    <to>Tove</to>

    <from>Jani</from>

    <body>Don't forget me this weekend!</body>

</note>

让我们设想一下，我们创建了一个应用程序，可将 <to>、<from> 以及 <body> 元素从 XML 文档中提取出来，并产生以下的输出：

MESSAGE

To: Tove

From: Jani

Don't forget me this weekend!

想象一下，XML 文档的作者添加的一些额外信息：

<note>

    <date>2008-01-10</date>

    <to>Tove</to>

    <from>Jani</from>

    <heading>Reminder</heading>

    <body>Don't forget me this weekend!</body>

</note>

那么这个应用程序会中断或崩溃吗？

XML 元素具有属性，类似 HTML。

属性（Attribute）提供有关元素的额外信息。

XML 属性

在 HTML 中，属性提供有关元素的额外信息：

<img src="computer.gif">

<a href="demo.html">

属性通常提供不属于数据组成部分的信息。在下面的实例中，文件类型与数据无关，但是对需要处理这个元素的软件来说却很重要：

<file type="gif">computer.gif</file>

XML 属性必须加引号

属性值必须被引号包围，不过单引号和双引号均可使用。比如一个人的性别，person 元素可以这样写：

<person sex="female">

或者这样也可以：

<person sex='female'>

如果属性值本身包含双引号，您可以使用单引号，就像这个实例：

<gangster name='George "Shotgun" Ziegler'>

或者您可以使用字符实体：

<gangster name="George &quot;Shotgun&quot; Ziegler">

XML 元素 vs. 属性

请看这些实例：

<person sex="female">

<firstname>Anna</firstname>

<lastname>Smith</lastname>

</person>

<person>

<sex>female</sex>

<firstname>Anna</firstname>

<lastname>Smith</lastname>

</person>

在第一个实例中，sex 是一个属性。在第二个实例中，sex 是一个元素。这两个实例都提供相同的信息。

没有什么规矩可以告诉我们什么时候该使用属性，而什么时候该使用元素。我的经验是在 HTML 中，属性用起来很便利，但是在 XML 中，您应该尽量避免使用属性。如果信息感觉起来很像数据，那么请使用元素吧。

**JavaScript 异步编程**

**异步的概念**

异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。

在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。

简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

以上是关于异步的概念的解释，接下来我们通俗地解释一下异步：异步就是从主线程发射一个子线程来完成任务。


**什么时候用异步编程**

在前端编程中（甚至后端有时也是这样），我们在处理一些简短、快速的操作时，例如计算 1 + 1 的结果，往往在主线程中就可以完成。主线程作为一个线程，不能够同时接受多方面的请求。所以，当一个事件没有结束时，界面将无法处理其他请求。

现在有一个按钮，如果我们设置它的 onclick 事件为一个死循环，那么当这个按钮按下，整个网页将失去响应。

为了避免这种情况的发生，我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情，比如读取一个大文件或者发出一个网络请求。因为子线程独立于主线程，所以即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限：一旦发射了以后就会与主线程失去同步，我们无法确定它的结束，如果结束之后需要处理一些事情，比如处理来自服务器的信息，我们是无法将它合并到主线程中去的。

为了解决这个问题，JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

**回调函数**

回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。

**实例**

function print() { document.getElementById("demo").innerHTML="RUNOOB!"; } setTimeout(print, 3000);

  
[**尝试一下 »**](https://www.runoob.com/try/try.php?filename=tryjs_async)

这段程序中的 setTimeout 就是一个消耗时间较长（3 秒）的过程，它的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数 "print"，在命令行输出 "RUNOOB!"。

当然，JavaScript 语法十分友好，我们不必单独定义一个函数 print ，我们常常将上面的程序写成：

**实例**

setTimeout(function () { document.getElementById("demo").innerHTML="RUNOOB!"; }, 3000);

  
[**尝试一下 »**](https://www.runoob.com/try/try.php?filename=tryjs_async2)

**注意：**既然 setTimeout 会在子线程中等待 3 秒，在 setTimeout 函数执行之后主线程并没有停止，所以：

**实例**

setTimeout(function () { document.getElementById("demo 1").innerHTML="RUNOOB-1!"; // 三秒后子线程执行 }, 3000); document.getElementById("demo 2").innerHTML="RUNOOB-2!"; // 主线程先执行

  
[**尝试一下 »**](https://www.runoob.com/try/try.php?filename=tryjs_async3)

这段程序的执行结果是：

RUNOOB-1!    // 三秒后子线程执行

RUNOOB-2!    // 主线程先执行

---

**异步 AJAX**

除了 setTimeout 函数以外，异步回调广泛应用于 AJAX 编程。有关于 AJAX 详细请参见：[https://www.runoob.com/ajax/ajax-tutorial.html](https://www.runoob.com/ajax/ajax-tutorial.html)

XMLHttpRequest 常常用于请求来自远程服务器上的 XML 或 JSON 数据。一个标准的 XMLHttpRequest 对象往往包含多个回调：

**实例**

var xhr = new XMLHttpRequest(); xhr.onload = function () { // 输出接收到的文字数据 document.getElementById("demo").innerHTML=xhr.responseText; } xhr.onerror = function () { document.getElementById("demo").innerHTML="请求出错"; } // 发送异步 GET 请求 xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true); xhr.send();

  
[**尝试一下 »**](https://www.runoob.com/try/try.php?filename=tryjs_async4)

XMLHttpRequest 的 onload 和 onerror 属性都是函数，分别在它请求成功和请求失败时被调用。如果你使用完整的 jQuery 库，也可以更加优雅的使用异步 AJAX：

**实例**

$.get("https://www.runoob.com/try/ajax/demo_test.php",function(data,status){ alert("数据: " + data + "\n 状态: " + status); });

**什么是 AJAX ？**

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：微博、淘宝、知乎等。

---

**AJAX 工作原理**

1. **事件触发**（如点击按钮或页面加载）。
2. **AJAX 请求**：通过 JavaScript 创建一个 XMLHttpRequest 对象，向服务器发送请求。
3. **服务器处理请求**：服务器（通常使用 PHP、Node.js 等）接收请求，处理并返回响应数据（JSON、XML、HTML 等）。
4. **AJAX 响应处理**：浏览器接收响应，使用 JavaScript 在页面上更新内容，而无需重新加载整个页面。


AJAX - 创建 XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE 5 和 IE 6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象

所有现代浏览器（IE 7+、Edge、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

var xhr = new XMLHttpRequest();

老版本的 Internet Explorer （IE 5 和 IE 6）使用 ActiveX 对象：

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE 5 和 IE 6（现在应该很少人使用了），请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

实例

var xmlhttp;

if (window.XMLHttpRequest) {

    //  IE 7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

    xmlhttp=new XMLHttpRequest();

} else {

    // IE 6, IE 5 浏览器执行代码

    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

尝试一下 »

创建一个 XMLHttpRequest 对象的示例：

实例

// 创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

// 配置请求

xhr.open('GET', 'https://api.example.com/data', true);

// 设置请求头（如果需要的话）

// xhr.setRequestHeader('Content-Type', 'application/json');

// 定义回调函数

xhr.onload = function () {

    if (xhr.status >= 200 && xhr.status < 300) {

        // 请求成功，处理响应

        console.log('Response:', xhr.responseText);

    } else {

        // 处理错误

        console.error('Error:', xhr.statusText);

    }

};

// 处理网络错误

xhr.onerror = function () {

    console.error('Request failed');

};

// 发送请求

xhr.send();

AJAX - 向服务器发送请求

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

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);

xmlhttp.send();

方法       描述

open(method,url,async)     

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true（异步）或 false（同步）

send(string)  

将请求发送到服务器。

string：仅用于 POST 请求

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

不愿使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET 请求

一个简单的 GET 请求：

实例

xmlhttp.open("GET","/try/ajax/demo_get.php",true);

xmlhttp.send();

尝试一下 »

在上面的例子中，您可能得到的是缓存的结果。

为了避免这种情况，请向 URL 添加一个唯一的 ID：

实例

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);

xmlhttp.send();

尝试一下 »

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

实例

xmlhttp.open("GET","/try/ajax/demo_get 2.php?fname=Henry&lname=Ford",true);

xmlhttp.send();

尝试一下 »

POST 请求

一个简单 POST 请求：

实例

xmlhttp.open("POST","/try/ajax/demo_post.php",true);

xmlhttp.send();

尝试一下 »

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

实例

xmlhttp.open("POST","/try/ajax/demo_post 2.php",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Henry&lname=Ford");

尝试一下 »

方法       描述

setRequestHeader(header,value)

向请求添加 HTTP 头。

header: 规定头的名称

value: 规定头的值

url - 服务器上的文件

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

xmlhttp.open("GET","ajax_test.html",true);

该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

异步 - True 或 False？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open("GET","ajax_test.html",true);

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

在等待服务器响应时执行其他脚本

当响应就绪后对响应进行处理

Async=true

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

实例

xmlhttp.onreadystatechange=function()

{

    if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

}

xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);

xmlhttp.send();

尝试一下 »

您将在稍后的章节学习更多有关 onreadystatechange 的内容。

Async = false

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：

xmlhttp.open("GET","test 1.txt",false);

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

实例

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);

xmlhttp.send();

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

**AJAX - 服务器 响应**

---

**服务器响应**

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

|   |   |
|---|---|
|**属性**|**描述**|
|responseText|获得字符串形式的响应数据。|
|responseXML|获得 XML 形式的响应数据。|

---

**responseText 属性**

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

**实例**

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

  
[**尝试一下 »**](https://www.runoob.com/try/try.php?filename=tryajax_first)

---

**responseXML 属性**

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

**实例**

请求 [cd_catalog.xml](https://www.runoob.com/try/demo_source/cd_catalog.xml) 文件，并解析响应：

xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("myDiv").innerHTML=txt;