【你也能从零基础学会网站开发】Web建站之javascript入门篇 浅谈JavaScript中的AJAX和XMLHttpRequest对象

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

什么是AJAX

AJAX 其实就是 异步 JavaScript 及 XML（Asynchronous JavaScript and XML）

AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。

通过 AJAX，我们的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。

通过这个对象，您的 JavaScript 可在不重新加载页面的情况与 Web 服务器交换数据。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

Ajax的优点

AJAX 可使因特网应用程序更小、更快，更友好。
AJAX 是一种独立于 Web 服务器软件的浏览器技术。
通过 AJAX，你可以创建更好、更快以及更友好的 WEB 应用程序。
AJAX 基于 JavaScript 和 HTTP 请求（HTTP requests）

AJAX是基于Web标准的

AJAX 是基于下列 Web 标准

1. JavaScript
2. XML
3. HTML
4. CSS

在 AJAX 中使用的 Web 标准已被良好定义，并被所有的主流浏览器支持。
AJAX 应用程序独立于浏览器和平台。

所以简单点说，如果你要使用AJAX 那么你要对HTML/CSS/JS都要熟悉!

AJAX 是一种在 2005 年由 Google 推广开来的编程模式。

注意: AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法。

AJAX的应用场景

1、表单驱动的交互
传统的表单提交，在文本框输入内容后，点击按钮，后台处理完毕后，页面刷新，再回头检查是否刷新结果正确。使用Ajax，在点击sunmit按钮后，立刻进行异步处理，并在页面上快速显示了更新后的结果，这里没有整个页面刷新的问题。

2、深层次的树的导航

深层次的级联菜单（树）的遍历是一项非常复杂的任务，使用JavaScript来控制显示逻辑，使用Ajax延迟加载更深层次的数据可以有效的减轻服务器的负担。

处理思路

为了避免每次对菜单的操作引起的重载页面，不采用每次调用后台的方式，而是一次性将级联菜单的所有数据全部读取出来并写入数组，然后根据用户的操作用 JavaScript来控制它的子集项目的呈现，这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题，但是如果用户不对菜单进行 操作或只对菜单中的一部分进行操作的话，那读取的数据中的一部分就会成为冗余数据而浪费用户的资源，特别是在菜单结构复杂、数据量大的情况下!

举个栗子

比如菜单有 很多级、每一级菜又有上百个项目，这种弊端就更为突出。

那么如果我们使用了Ajax后，结果就会有所改观：

思路如下

在初始化页面时我们只读出它的第一级的所有数据并显示，在用户操作一级菜单其中一项时，会通过Ajax向后台请求当前一级项目所属的二级子菜单的所有数据

如果再继续请求已经呈现的二级菜单中的一项时，再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据，以此类推……这样，用什么就取什么、用多少就取 多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于后台处理并重载的方式缩短了 用户等待时间，也把对资源的浪费降到最低。

3、快速的用户与用户间的交流响应

在众多人参与的交流讨论的场景下，最不爽的事情就是让用户一遍又一遍刷新页面以便知道是否有新的讨论出现。新的回复应该以最快的速度显示出来，而把用户从分神的刷新中解脱出来，Ajax是最好的选择。

4、类似投票、yes/no等无关痛痒的场景

对于类似这样的场景中，如果提交过程需要达到40秒，很多的用户就会直接忽略过去而不会参与，但是Ajax可以把时间控制在1秒之内，从而更多的用户会加入进来。

5、对数据进行过滤和操纵相关数据的场景

对数据使用过滤器，按照时间排序，或者按照时间和名称排序，开关过滤器等等。任何要求具备很高交互性数据操纵的场合都应该用JavaScript，而不是用一系列的服务器请求来完成。在每次数据更新后，再对其进行查找和处理需要耗费较多的时间，而Ajax可以加速这个过程。

6、普通的文本输入提示和自动完成的场景

在文本框等输入表单中给予输入提示，或者自动完成，可以有效的改善用户体验，尤其是那些自动完成的数据可能来自于服务器端的场合，Ajax是很好的选择。

AJAX不适合场景

1、部分简单的表单

虽然表单提交可以从Ajax获取最大的益处，但一个简单的评论表单极少能从Ajax得到什么明显的改善。
而一些较少用到的表单提交，Ajax则帮不上什么忙。

2、搜索

有些使用了Ajax的搜索引擎如Start.com和Live.com不允许使用浏览器的后退按钮来查看前一次搜索的结果，这对已经养成搜索习惯的用户来说是不可原谅的,现在Dojo通过iframe来解决这个问题。

3、基本的导航

使用Ajax来做站点内的导航是一个坏主意，为什么不把时间放在让系统程序作的更好上呢？

4、替换大量的文本

使用Ajax可以实现页面的局部刷新，但是如果页面的每个部分都改变了，为什么不重新做一次服务器请求呢？

5、对呈现的操纵

Ajax看起来像是一个纯粹的UI技术，但事实上它不是。
它实际上是一个数据同步、操纵和传输的技术。
对于可维护的干净的web应用，不使用Ajax来控制页面呈现是一个不错的主意。
JavaScript可以很简单的处理XHMTL/HTML/DOM，使用CSS规则就可以很好的表达数据显示。

注意

Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰，用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等!

Ajax(Asynchronous JavaScript and XML)说到底就是一种浏览器异步读取服务器上XML内容的技术。

现在的技术凡是跟XML扯上关系，再加上个概念做幌子，就像金装了一样，拽得不行, 门外 的人看得很是热闹，门里的人摇摇头不外如是。XML呢，跨平台的新潮语言？其实XML＝TXT。XML只是符合很多规范的文本。它本身什么都不是，只是保 存字符的文件, 而浏览器异步读取的只是服务器上的文本内容

所以在Ajax开发时完全不必拘泥于XML, 例如JSON也是可以的

什么是JSON

XML 的作用是格式化数据内容。如果我们不用XML还有什么更好的方法吗？
这个答案是JSON。

介绍JSON之前我先介绍一下JavaScript这门脚本语 言。脚本语言自身有动态执行的天赋。即我们可以把想要执行的语句放在字符串里，通过eval()这个动态执行函数来执行。字符串里的内容会像我们写的脚本 一样被执行。

例如

var str = "alert('hello')";
eval(str);

当然我们可以在字符串中放任何脚本语句，包括声明语句

例如

var define = "{name:'张三',email:'zhangsan@gmail.com'}";
eval("data = "+define);
alert("name:"+data.name);
alert("email:"+data.email);

了解JSON

JSON：全称: JavaScript Object Notation 我更愿意把它翻译为JavaScript对象声明。

比如: 我们可能要从后台载入一些通讯录的信息，如果写成XML, 但是我们可能也会把这个XML转换成JSON

如图

JSON的大致概念这里我大致做了一个小的总结,如下:

JSON：JavaScript 对象表示法（JavaScript Object Notation）。
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言
JSON 具有自我描述性，更易理解

注意： JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。
JSON 解析器和 JSON 库支持许多不同的编程语言。

JSON与XML的比较

JSON类似 XML

JSON 是纯文本
JSON 具有“自我描述性”（人类可读）
JSON 具有层级结构（值中存在值）
JSON 可通过 JavaScript 进行解析
JSON 数据可使用 AJAX 进行传输

JSON相比 XML 的不同之处

1. 没有结束标签
2. 书写格式更短
3. 读写的速度更快
4. 能够使用内建的 JavaScript eval() 方法进行解析
5. 使用数组/对象
6. 不使用保留字
7. 对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：

简单的不只是表达上，最重要的是可以丢弃让人晕头转向的DOM解析了。
因为只要符合JavaScript的声明规范，JavaScrip会自动帮你解析好的。

Ajax中使用JSON的基本方法是前台载入后台声明JavaScript对象的字符串，用eval方法来将它转为实际的对象，最后通过 DHTML更新页面信息。

JSON 和XML的更多对比性

可读性:JSON和XML的可读性可谓不相上下，一边是建议的语法，一边是规范的标签形式，很难分出胜负。

可扩展性: XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，JSON不能的。

编码难度: XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的编码明显比XML容易许多，即使不借助工具也能写出JSON的代码，可是要写好XML就不太容易了。

解码难度: XML的解析得考虑子节点父节点，让人头昏眼花，而JSON的解析难度几乎为0。这一点XML输的真是没话说。

流行度: XML已经被业界广泛的使用, 但是在Ajax这个特定的领域，所以目前的发展一定是XML让位于JSON

JSON语法规则

说了这么多，现在我们具体来看看JSON的语法定义格式是怎么样的!

JSON 语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。
数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
JSON 名称/值对
JSON 数据的书写格式是：名称/值对

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值

例如:

"firstName" : "John" 这很容易理解，等价于这条 JavaScript 语句：firstName = "John“

JSON 值的数据类型

JSON 值可以是以下数据类型:

1. 数字（整数或浮点数）
2. 字符串（在双引号中）
3. 逻辑值（true 或 false）
4. 数组（在方括号中）
5. 对象（在花括号中）
6. null

JSON 对象

JSON 对象在花括号中书写, 对象可以包含多个名称/值对

例如:

{ "firstName":"John" , "lastName":"Doe" }

这一点也容易理解, 与这条 JavaScript 语句等价：

firstName = “John” ，lastName = "Doe

JSON 数组

JSON 数组在方括号中书写：数组可包含多个对象：

例如:

{ 
"employees": [ 
	{ "firstName":"John" , "lastName":"Doe" }, 
	{ "firstName":"Anna" , "lastName":"Smith" }, 
	{ "firstName":"Peter" , "lastName":"Jones" } 
	] 
} 

在上面的例子中，对象 employees是包含三个对象的数组。每个对象代表一条关于某人（有姓和名）的记录

JSON的写法

JSON的基本格式如下：

对象是属性、值对的集合。一个对象的开始于{，结束于}。每一个属性名和值间用:提示，属性间用,分隔

如图

数组是有顺序的值的集合。一个数组开始于[，结束于]，值之间用,分隔。

如图

值可以是引号里的字符串、数字、true、false、null，也可以是对象或数组。这些结构都能嵌套!

如图

值是字符串的定义和C或Java基本一致:

如图

值是数字的定义也和C或Java基本一致

如图

JSON使用

JSON 是使用 JavaScript 语法, 因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：

例如

var employees = [ 
{ "firstName":"Bill" , "lastName":"Gates" },
 { "firstName":"George" , "lastName":"Bush" }, 
 { "firstName":"Thomas" , "lastName": "Carter" }
  ];

可以像这样访问 对象数组中的第一项：JavaScript employees[0].lastName; 返回的内容是：Gates
可以像这样修改数据：employees[0].lastName = “Jobs”;

JSON 文件

JSON 文件的文件类型是 .json
JSON 文本的 MIME 类型是application/json

JSON解析器

使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。
JSON 解析器只能识别 JSON 文本，而不会编译脚本。
在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。
较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持

注意:：eval()函数可编译并执行任何 JavaScript 代码, 这隐藏了一个潜在的安全问题

IE8 支持JSON问题

IE8支持原生的JSON对象，而且IE8浏览器自带了JSON.parse与JSON.stringify两个方法。
不过有时候我们在代码JSON测试的时候，页面却报告说JSON未定义。
既然微软官网上有提到过IE8已经支持了JSON对象，那怎么还不能使用呢？

由于JSON对象是在JScript. 5.8及其以后的版本引入的，所以，默认情况下，IE8使用的是JScript. 5.7版本

所以原生JSON对象是无法使用的。那么如何使用IE8的原生对象呢？

IE8为了最大限度地保证浏览器的向后兼容性，使原先创建的网页能够正常显示，默认采用的是IE7的渲染引擎，同时，IE8支持多种文档兼容性模式。

解决办法：

<!DOCTYPE>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=8">

让不支持JSON的浏览器支持JSON

这个问题很简单，只需要在你的页面引入JSON.JS库就可以

地址: https://github.com/douglascrockford/JSON-js

如图

初识XMLHttpRequest

XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。
尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用, 但是我们仍然很有必要理解这个对象的详细工作机制。

异步JavaScript与XML(AJAX)是一个专用术语，用于实现在客户端脚本与服务器之间的数据交互过程。

这一技术的优点在于，它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器。

与现代浏览器的通过存取浏览器DOM结构的编程代码(JavaScript)动态地改变被显示内容的支持相配合，AJAX让开发者在浏览器端更新被显示的HTML内容而不必刷新页面。

换句话说，AJAX可以使基于浏览器的应用程序更具交互性而且更类似传统型桌面应用程序。

Google的Gmail和Outlook Express就是两个使用AJAX技术的我们所熟悉的例子。

而且，AJAX可以用于任何客户端脚本语言中，这包括JavaScript，Jscript和VBScript。

AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。
一个经由XMLHttpRequest对象发送的HTTP请求并不要求页面中拥有或回寄一个＜form＞元素。

AJAX中的"A"代表了"异步"，这意味着XMLHttpRequest对象的send()方法可以立即返回，从而让Web页面上的其它HTML/JavaScript继续其浏览器端处理而由服务器处理HTTP请求并发送响应。

尽管缺省情况下请求是异步进行的，但是，你可以选择发送同步请求，这将会暂停其它Web页面的处理，直到该页面接收到服务器的响应为止。

微软在其Internet Explorer(IE) 5中作为一个ActiveX对象形式引入了XMLHttpRequest对象。
其他的认识到这一对象重要性的浏览器制造商也都纷纷在他们的浏览器内实现了XMLHttpRequest对象，但是作为一个本地JavaScript对象而不是作为一个ActiveX对象实现。

而如今，在认识到实现这一类型的价值及安全性特征之后，微软已经在其IE 7中把XMLHttpRequest实现为一个窗口对象属性。幸运的是，尽管其实现(因而也影响到调用方式)细节不同，但是所有的浏览器实现都具有类似的功能，并且实质上是相同方法。

目前，W3C组织正在努力进行XMLHttpRequest对象的标准化，并且已经发行了有关该W3C规范的一个草案

XMLHttpRequest对象的属性和事件

XMLHttpRequest对象暴露各种属性、方法和事件以便于脚本处理和控制HTTP请求与响应。

下面，我们将对此展开详细的讨论。

readyState属性

当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态：一直等待直到请求被处理；然后，它才接收一个响应。这样以来，脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性，

XMLHttpRequest对象的ReadyState属性值列表如下:

onreadystatechange事件
无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变，该对象都将激活。

responseText属性

这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。

status属性

这个status属性描述了HTTP状态代码，而且其类型为short。而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。

responseXML属性

此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应 此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。

如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。
无论何时，只要readyState值不为4，那么该responseXML的值也为null。

其实这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。
如果文档不能被分析(例如，如果文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。

statusText属性

这个statusText属性描述了HTTP状态代码文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

abort()方法

你可以使用这个abort()方法来暂停与一个XMLHttpRequest对象相联系的HTTP请求，从而把该对象复位到未初始化状态。

open()方法　　

你需要调用open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)方法初始化一个XMLHttpRequest对象。

其中，method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。为了把数据发送到服务器，应该使用POST方法；为了从服务器端检索数据，应该使用GET方法。

另外，uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。
借助于window.document.baseURI属性，该uri被解析为一个绝对的URI-换句话说，你可以使用相对的URI-它将使用与浏览器解析相对的URI一样的方式被解析。async参数指定是否请求是异步的-缺省值为true。

为了发送一个同步请求，需要把这个参数设置为false。对于要求认证的服务器，你可以提供可选的用户名和口令参数。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外，它还复位请求头部。注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。

send()方法

在通过调用open()方法准备好一个请求之后，你需要把该请求发送到服务器。

仅当readyState值为1时，你才可以调用send()方法；否则的话，XMLHttpRequest对象将引发一个异常。

该请求被使用提供给open()方法的参数发送到服务器。当async参数为true时，send()方法立即返回，从而允许其它客户端脚本处理继续。在调用send()方法后，XMLHttpRequest对象把readyState的值设置为2(发送)。

当服务器响应时，在接收消息体之前，如果存在任何消息体的话，XMLHttpRequest对象将把readyState设置为3(正在接收中)。当请求完成加载时，它把readyState设置为4(已加载)。对于一个HEAD类型的请求，它将在把readyState值设置为3后再立即把它设置为4。

send()方法使用一个可选的参数-该参数可以包含可变类型的数据。典型地，你使用它并通过POST方法把数据发送到服务器。另外，你可以显式地使用null参数调用send()方法，这与不用参数调用它一样。

对于大多数其它的数据类型，在调用send()方法之前，应该使用setRequestHeader()方法(见后面的解释)先设置Content-Type头部。如果在send(data)方法中的data参数的类型为DOMString，那么，数据将被编码为UTF-8。

如果数据是Document类型，那么将使用由data.xmlEncoding指定的编码串行化该数据。

setRequestHeader()方法

该setRequestHeader(DOMString header，DOMString value)方法用来设置请求的头部信息。当readyState值为1时，你可以在调用open()方法后调用这个方法；否则，你将得到一个异常。

getResponseHeader()方法

getResponseHeader(DOMString header，value)方法用于检索响应的头部值。仅当readyState值是3或4(换句话说，在响应头部可用以后)时，才可以调用这个方法；否则，该方法返回一个空字符串。

getAllResponseHeaders()方法

该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部（每一个头部占单独的一行）。如果readyState的值不是3或4，则该方法返回null。

AJAX发送请求

通过前面的一些概念的了解之后，现在我们才可以来开始执行一下ajax的请求过程到底是怎么样的!

在AJAX中，许多使用XMLHttpRequest的请求都是从一个HTML事件

使用场景

一个调用JavaScript函数的按钮点击(onclick)或一个按键(onkeypress)）中被初始化的。

AJAX支持包括表单校验在内的各种应用程序。有时，在填充表单的其它内容之前要求校验一个唯一的表单域。

例如: 要求使用一个唯一的UserID来注册表单, 如果不是使用AJAX技术来校验这个UserID域，那么整个表单都必须被填充和提交。如果该UserID不是有效的，这个表单必须被重新提交。

举个栗子

<form name="validationForm" action="validateForm" method="post">
<table>
  <tr>
      <td>编号</td>
      <td><input type="text" size="20" id="catalogId" name="catalogId" autocomplete="off" onkeyup="sendRequest()">
      </td>
      <td>
          <div id="validationMessage"></div>
      </td>
  </tr>
</table>
</form>

前面的HTML使用validationMessage div来显示相应于这个输入域Catalog Id的一个校验消息。

onkeyup事件调用一个JavaScript sendRequest()函数。这个sendRequest()函数创建一个XMLHttpRequest对象。

创建一个XMLHttpRequest对象的过程因浏览器实现的不同而有所区别。

如果浏览器支持XMLHttpRequest对象作为一个窗口属性(所有普通的浏览器都是这样的，除了IE 5和IE 6之外)

那么，代码可以调用XMLHttpRequest的构造器。

如果浏览器把XMLHttpRequest对象实现为一个ActiveXObject对象(就象在IE 5和IE 6中一样)，那么代码可以使用ActiveXObject的构造器。

下面的函数将调用一个init()函数，它负责检查并决定要使用的适当的创建方法-在创建和返回对象之前。

代码如下

function init() {
     if (window.XMLHttpRequest) {
         return new XMLHttpRequest();
     } else if (window.ActiveXObject) {
         return new ActiveXObject("Microsoft.XMLHTTP");
     }
 }

 function sendRequest() {

     var xmlHttpRequest = init();
     console.log(xmlHttpRequest);

 }

接下来，你需要使用Open()方法初始化XMLHttpRequest对象-指定HTTP方法和要使用的服务器URL。

然后，我们需要使用send()方法发送该请求。因为这个请求使用的是HTTP GET方法，所以，你可以在不指定参数或使用null参数的情况下调用send()方法!

function sendRequest() {

 var xmlHttpRequest = init();
 var catalogId=encodeURIComponent(document.getElementById("catalogId").value);

 console.log(catalogId);
 xmlHttpRequest.open("GET","test.txt",true);
 xmlHttpRequest.send();
 }

默认情况下，使用XMLHttpRequest发送的HTTP请求是异步进行的，但是你可以显式地把async参数设置为true，如上面所展示的。

在这种情况下，对URL validateForm的调用将激活服务器端的一个servlet，但是你应该能够注意到服务器端技术不是根本性的

实际上，该URL可能是一个ASP，ASP.NET或PHP页面或一个Web服务-这无关紧要，只要该页面能够返回一个响应-指示CatalogID值是否是有效的-即可。

因为你在作一个异步调用，所以你需要注册一个XMLHttpRequest对象将调用的回调事件处理器-当它的readyState值改变时调用。

记住，readyState值的改变将会激发一个readystatechange事件。
你可以使用onreadystatechange属性来注册该回调事件处理器。

当请求状态改变时，XMLHttpRequest对象调用使用onreadystatechange注册的事件处理器。

因此，在处理该响应之前，你的事件处理器应该首先检查readyState的值和HTTP状态。当请求完成加载（readyState值为4）并且响应已经完成（HTTP状态为"OK"）时，你就可以调用一个JavaScript函数来处理该响应内容。

脚本负责在响应完成时检查相应的值并调用一个方法。

该方法使用XMLHttpRequest对象的responseXML和responseText属性来检索HTTP响应。

如上面所解释的，仅当在响应的媒体类型是text/xml，application/xml或以+xml结尾时，这个responseXML才可用。

这个responseText属性将以普通文本形式返回响应。
对于一个XML响应，你将按如下方式检索内容：

var msg=xmlHttpRequest.responseXML;

完整代码

function init() {
     if (window.XMLHttpRequest) {
         return new XMLHttpRequest();
     } else if (window.ActiveXObject) {
         return new ActiveXObject("Microsoft.XMLHTTP");
     }
 }

 function sendRequest() {

     var xmlHttpRequest = init();
     var catalogId=encodeURIComponent(document.getElementById("catalogId").value);

     console.log(catalogId);
     xmlHttpRequest.open("GET","test.txt",true);
     xmlHttpRequest.send();


     xmlHttpRequest.onreadystatechange=function (){
         if(xmlHttpRequest.readyState==4){
             //alert(1);
             if(xmlHttpRequest.status==200){
                 //alert(xmlHttpRequest.responseText);
                 var validationMessage = document.getElementById("validationMessage");
                 validationMessage.innerHTML = xmlHttpRequest.responseText;
             }
         }
     }
 }

最后，通过更新Web页面的validationMessage div中的HTML内容并借助于innerHTML属性，你可以测试该元素值以创建一个要显示的消息：

小结

上面就是XMLHttpRequest对象使用的所有细节实现。
通过不必把Web页面寄送到服务器而实现数据传送，XMLHttpRequest对象为客户端与服务器之间提供了一种动态的交互能力。

你可以使用JavaScript启动一个请求并处理相应的返回值，然后使用浏览器的DOM方法更新页面中的数据。

文章来源地址https://www.toymoban.com/news/detail-851133.html

到了这里，关于【你也能从零基础学会网站开发】Web建站之javascript入门篇 浅谈JavaScript中的AJAX和XMLHttpRequest对象的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！