ajax详解教程讲述ajax原理

1、2Process and Portfolio Management 2005 IBM Corporation Ajax基础基础 使用使用Ajax发送异步请求发送异步请求 在请求和响应中使用在请求和响应中使用XML 使用使用JSON进行数据传输进行数据传输3Process and Portfolio Management 2005 IBM CorporationAjax基础基础4Process and Portfolio Management 2005 IBM Corporation 先来点感觉，看些例子先来点感觉，看些例子4BACKBASE购物网站购物网站4Google Suggest4Goo

2、gle Map4and many more5Process and Portfolio Management 2005 IBM Corporation Ajax (Asynchronous JavaScript and XML)不是一个新不是一个新的技术，事实上，它是一些旧有的成熟的技术以一种全新的技术，事实上，它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起的更加强大的方式整合在一起 Ajax的关键技术：的关键技术：4使用使用XHTML(HTML)和和CSS构建标准化的展示层构建标准化的展示层4使用使用DOM进行动态显示和交互进行动态显示和交互4使用使用XML和和XSLT进行数据

3、交换和操纵进行数据交换和操纵4使用使用XMLHttpRequest异步获取数据异步获取数据4使用使用JavaScript将所有元素绑定在一起将所有元素绑定在一起6Process and Portfolio Management 2005 IBM Corporation7Process and Portfolio Management 2005 IBM Corporation 在传统的在传统的Web应用模型下，大部分的用户操作都会发送应用模型下，大部分的用户操作都会发送一个一个HTTP请求给服务器，然后服务器开始处理（接收数请求给服务器，然后服务器开始处理（接收数据，执行业务逻辑，访问数据库等）

4、，最后向浏览器返回据，执行业务逻辑，访问数据库等），最后向浏览器返回HTML页面。当服务器处理请求时，用户能够做什么呢？页面。当服务器处理请求时，用户能够做什么呢？只有等待！只有等待！8Process and Portfolio Management 2005 IBM Corporation 在传统的在传统的Web应用模型下应用模型下，客户机客户机 （浏览器或者本地机器上运行的（浏览器或者本地机器上运行的代码）向服务器发出请求。该请求是同步的，客户机等待服务器的响代码）向服务器发出请求。该请求是同步的，客户机等待服务器的响应。当客户机等待的时候，会用某种形式通知您正在处理：应。当客户机等待的时

5、候，会用某种形式通知您正在处理：4 沙漏（特别是沙漏（特别是 Windows 上）上）4 旋转皮球（通常在旋转皮球（通常在 Mac 机器上）机器上）4 应用程序基本上冻结了，然后过一段时间光标变化了应用程序基本上冻结了，然后过一段时间光标变化了 这正是传统这正是传统Web 应用程序让人感到笨拙或缓慢的原因应用程序让人感到笨拙或缓慢的原因 缺乏真正缺乏真正的交互性。按下按钮时，应用程序实际上变得不能使用，直到刚刚触的交互性。按下按钮时，应用程序实际上变得不能使用，直到刚刚触发的请求得到响应。如果请求需要大量服务器处理，那么等待的时间发的请求得到响应。如果请求需要大量服务器处理，那么等待的时间可能

6、很长可能很长9Process and Portfolio Management 2005 IBM Corporation Ajax应用通过在用户和服务器之间引入一个媒介（应用通过在用户和服务器之间引入一个媒介（Ajax engine）来异步发送请求，消除了传统的发送请求等）来异步发送请求，消除了传统的发送请求等待发送请求等待的特性，极大的提高了用户体验待发送请求等待的特性，极大的提高了用户体验10Process and Portfolio Management 2005 IBM CorporationJavaScript基础基础11Process and Portfolio Managemen

7、t 2005 IBM Corporation JavaScript是是Netscape公司与公司与Sun公司合作开发的。在公司合作开发的。在JavaScript出现之前，出现之前，Web浏览器不过是一种能够显示超文本文档的软件的基浏览器不过是一种能够显示超文本文档的软件的基本部分。而在本部分。而在JavaScript之后，网页的内容不再局限于枯燥的文本，之后，网页的内容不再局限于枯燥的文本，可交互性得到了显著的改善可交互性得到了显著的改善 JavaScript是一种脚本语言，一种解释性的，基于对象的脚本语言。是一种脚本语言，一种解释性的，基于对象的脚本语言。JavaScript脚本通常只能通过

8、脚本通常只能通过Web浏览器进行解释和执行而不是像浏览器进行解释和执行而不是像普通意义上的程序那样可以独立运行普通意义上的程序那样可以独立运行 在在HTML基础上，基础上，使用使用JavaScript 可以开发交互式可以开发交互式Web网页。网页。 JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容 注意，注意，JavaScript与与Java没有任何联系没有任何联系12Process and Portfolio

9、Management 2005 IBM Corporation JavaScript脚本的基本组成单位。脚本的基本组成单位。 只需要简单地把各条语句放在不同的行上就可以分割开来只需要简单地把各条语句放在不同的行上就可以分割开来，不需要加分号，不需要加分号“；”结束结束:4first statement4second statement 但在每条语句的末尾添加但在每条语句的末尾添加“；”是一种良好的编程习惯：是一种良好的编程习惯：4first statement;4second statement;13Process and Portfolio Management 2005 IBM Corpo

10、ration 单行注释（双斜杠）：单行注释（双斜杠）：4/ line1 多行注释：多行注释：4/* line1 line2 */ HTML风格注释（不推荐使用）：风格注释（不推荐使用）：4”来结束来结束14Process and Portfolio Management 2005 IBM Corporation JavaScript不要求在声明变量时必须明确指出其数据类型不要求在声明变量时必须明确指出其数据类型（所以称（所以称JavaScript为弱类型语言），可以使用统一的关为弱类型语言），可以使用统一的关键字键字var进行声明：进行声明：4var age = 33;4mood = “hap

11、py”; 但是提前对变量做出声明是一种良好的编程习惯但是提前对变量做出声明是一种良好的编程习惯 变量名允许包含字母、数字、美元符号变量名允许包含字母、数字、美元符号($)和下划线字符和下划线字符，但不允许包括空格或标点符号，但不允许包括空格或标点符号15Process and Portfolio Management 2005 IBM Corporation JavaScript变量的类型是由变量的值决定的，可以对同一个变量赋予变量的类型是由变量的值决定的，可以对同一个变量赋予不同数据类型的值：不同数据类型的值：4var age = “thirty three”;4age = 33; Java

12、Script中重要的数据类型：中重要的数据类型：4未定义（未定义（undefined），变量未定义），变量未定义4空（空（null），变量未初始化），变量未初始化4字符串（字符串（string），可以放在单引号或双引号中），可以放在单引号或双引号中4数值（数值（number），可以表示整数、浮点数），可以表示整数、浮点数4布尔型（布尔型（boolean），），true或或false4对象（对象（object）16Process and Portfolio Management 2005 IBM Corporation 数组用来存储一组值，使用关键字数组用来存储一组值，使用关键字Array来声明

13、，声明时可以指明数来声明，声明时可以指明数组的长度：组的长度：4var colors = new Array();4var colors = new Array(3); 其中其中new关键字可以省略，类似其它语言，数组的下标从关键字可以省略，类似其它语言，数组的下标从0开始，赋开始，赋值方法也和其它语言类似：值方法也和其它语言类似：4colors0 = “red”;4colors1 = “black”;4colors2 = “white”; 还可以使用方括号创建数组时同时初始化：还可以使用方括号创建数组时同时初始化：4var colors = “red”, “black”, “white”;1

14、7Process and Portfolio Management 2005 IBM Corporation 使用方括号创建数组对象的简单方法：使用方括号创建数组对象的简单方法：4var colors = ; /声明空数组对象声明空数组对象4colors0 = “red”; 4colors1 = “black”; 通过数组的通过数组的length属性可以得到数组中元素的个数。数组的长度可以属性可以得到数组中元素的个数。数组的长度可以动态扩展：动态扩展：4colors3 = “blue”;4colors8 = “grey”; 关联数组：在填充数组时为每个新元素明确地给出下标：关联数组：在填充数组

15、时为每个新元素明确地给出下标：4colors“r” = “red”;4colors“b” = “black”;18Process and Portfolio Management 2005 IBM Corporation JavaScript中的算术运算符（中的算术运算符（+、-、*、/、+、-等）、等）、比较运算符（比较运算符（、=、=）、条件语句（）、条件语句（if、while、for等）等）19Process and Portfolio Management 2005 IBM Corporation 使用函数可以避免重复输入大量相同的内容。使用函数可以避免重复输入大量相同的内容。Java

16、Script中使用中使用function关关键字定义函数：键字定义函数：4function funcname (arg1, arg2, ) statements; 声明一个简单的函数：声明一个简单的函数：4function multiply (num1, num2) var total = num1 * num2;return total; 声明后可以直接调用此函数获取结果：声明后可以直接调用此函数获取结果：var result = multiply (5, 9);注意，注意，JavaScript中的函数不需声明返回类型，参数也不需要声明类型中的函数不需声明返回类型，参数也不需要声明类型20P

17、rocess and Portfolio Management 2005 IBM Corporation JavaScript对象是由一组相关的属性和方法构成的数据实体。属性和方法都要使用对象是由一组相关的属性和方法构成的数据实体。属性和方法都要使用“.”来访问：来访问：4 perty4 object.method() 使用函数来定义使用函数来定义“类类”：4 function Person() this.age = 12; = “no name”;this.sayHello = function() alert (“Hello ” +

18、); /其中其中this关键字不能省略！关键字不能省略！ 使用使用new关键字来创建对象实例：关键字来创建对象实例：var vincent = new Person();21Process and Portfolio Management 2005 IBM CorporationDOM基础基础22Process and Portfolio Management 2005 IBM Corporation DOM是是”Document Object Model”（文档对象模型）的（文档对象模型）的首字母缩写。当创建了一个网页并把它加载到首字母缩写。当创建了一个网页并把它加载到Web浏览浏览器中时，

19、就会在幕后创建一个文档对象模型器中时，就会在幕后创建一个文档对象模型 DOM表示被加载到浏览器窗口里的当前页面：浏览器向表示被加载到浏览器窗口里的当前页面：浏览器向我们提供了当前页面的模型，而我们可以通过我们提供了当前页面的模型，而我们可以通过JavaScript访问这个模型访问这个模型 DOM把一份文档表示为一棵树把一份文档表示为一棵树23Process and Portfolio Management 2005 IBM Corporation 如下的如下的HTML页面：页面：24Process and Portfolio Management 2005 IBM Corporation 浏览

20、器加载该页面并将之转换为树形结构：浏览器加载该页面并将之转换为树形结构：25Process and Portfolio Management 2005 IBM Corporation DOM树中的一切是以最外层的树中的一切是以最外层的HTML包含元素，即包含元素，即html元素开始的元素开始的。使用树的比喻，这叫做根元素（。使用树的比喻，这叫做根元素（root element） 从根流出的线表示不同标记部分之间的关系。从根流出的线表示不同标记部分之间的关系。head和和body元素是元素是html根元素的孩子（根元素的孩子（child）；）；title是是head的孩子，而文本的孩子，而文本

21、“Trees, trees, everywhere”是是title的孩子；相对的，的孩子；相对的，head是是title的父亲（的父亲（parent），），title是文本是文本 “Trees, trees, everywhere” 的父亲。处在的父亲。处在同一层次的且互不包含的两个分支（如同一层次的且互不包含的两个分支（如head和和body）之间称为兄弟）之间称为兄弟（sibling）关系。整个树就这样组织下去，直到浏览器获得与上图）关系。整个树就这样组织下去，直到浏览器获得与上图类似的结构类似的结构 通常把这样的树结构成为一棵节点树通常把这样的树结构成为一棵节点树26Process an

22、d Portfolio Management 2005 IBM Corporation DOM文档是由节点构成的集合，此时的节点是文档树上文档是由节点构成的集合，此时的节点是文档树上的树枝或者树叶的树枝或者树叶 DOM中节点的类型：中节点的类型：4元素节点（元素节点（element node），诸如），诸如、等。元等。元素节点可以包含其它的元素，唯一没有被包含在其它元素里的元素素节点可以包含其它的元素，唯一没有被包含在其它元素里的元素是是，它是根元素，它是根元素4属性节点（属性节点（attribute node），元素或多或少地有一些属性，属性），元素或多或少地有一些属性，属性可以对元素做出一

23、些具体的描述。因为属性总是被放到起始标签里可以对元素做出一些具体的描述。因为属性总是被放到起始标签里，所以属性节点总是被包含在元素节点中，所以属性节点总是被包含在元素节点中4文本节点（文本节点（text node），），元素中包含着文本节点元素中包含着文本节点“Trees, trees, everywhere”27Process and Portfolio Management 2005 IBM Corporation getElementById(id)4返回一个给定返回一个给定id属性的元素节点相对应的对象。这个方法是与属性的元素节点相对应的对象。这个方法是与document对象相关联的函

24、数。其中对象相关联的函数。其中document对象代表着整个对象代表着整个HTML文档并可以用文档并可以用来访问所有页面中的元素来访问所有页面中的元素 getElementsByTagName(tagname)4返回一个对象数组，它们分别对应着文档里的一个特定的元素节点返回一个对象数组，它们分别对应着文档里的一个特定的元素节点 getAttribute()4返回对象的属性值返回对象的属性值 setAttribute()4修改对象的属性值修改对象的属性值28Process and Portfolio Management 2005 IBM Corporation childNodes4可以将节点

25、树中任何一个元素的所有子元素检索出来，这个属性返回一个可以将节点树中任何一个元素的所有子元素检索出来，这个属性返回一个数组，包含了给定元素节点的全体子元素数组，包含了给定元素节点的全体子元素 nodeName4返回元素节点的名称。注意，返回的结果全部是大写返回元素节点的名称。注意，返回的结果全部是大写 nodeType4用来区分节点的类型，元素节点的用来区分节点的类型，元素节点的nodeType属性值是属性值是1，属性节点的，属性节点的nodeType属性值是属性值是2，文本节点的，文本节点的nodeType属性值是属性值是3 nodeValue4可以用来存取文本节点的值。对于元素节点或属性节

26、点这个属性返回空可以用来存取文本节点的值。对于元素节点或属性节点这个属性返回空29Process and Portfolio Management 2005 IBM Corporation firstChild和和lastChild4第一个和最后一个孩子节点。第一个和最后一个孩子节点。4node.firstChild等价于等价于node.childNodes0，4node.lastChild等价于等价于node.childNodesnode.childNodes.length 1 parentNode4返回元素的父节点返回元素的父节点 nextSibling4返回下一个兄弟节点返回下一个兄弟节

27、点30Process and Portfolio Management 2005 IBM Corporation createElement(tagname)4 创建新的元素节点，此方法与创建新的元素节点，此方法与document对象相关联。新建的元素节点并未与节点树相连对象相关联。新建的元素节点并未与节点树相连 appendChild(node)4 把新建的节点插入到节点树的某个节点下，成为这个节点的子节点把新建的节点插入到节点树的某个节点下，成为这个节点的子节点 createTextNode(text)4 创建文本节点创建文本节点 insertBefore(newNode, targetN

28、ode)4 把一个新元素插入到一个现有元素的前面把一个新元素插入到一个现有元素的前面 replaceChild(newChild, oldChild)4 替换一个孩子节点替换一个孩子节点 removeChild(node)4 删除一个孩子节点删除一个孩子节点31Process and Portfolio Management 2005 IBM Corporation基于基于DOM的的Web应用应用程序示例程序示例32Process and Portfolio Management 2005 IBM Corporation 首先建立一个非常简单的应用程序，然后再添加一点首先建立一个非常简单的应用

29、程序，然后再添加一点DOM魔法。注意，魔法。注意，DOM可以移动网页中的任何东西而不可以移动网页中的任何东西而不需要提交表单。创建一个简单的网页，上面只显示一个普需要提交表单。创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为通的旧式大礼帽，还有一个标记为 Hocus Pocus! 的按的按钮钮33Process and Portfolio Management 2005 IBM Corporation 注意按钮的类型是注意按钮的类型是 button 而不是提交按钮。如果使用提交按钮，单击该按而不是提交按钮。如果使用提交按钮，单击该按钮将导致浏览器提交表单。通过使用一般输入按钮

30、而不是提交按钮，可以把钮将导致浏览器提交表单。通过使用一般输入按钮而不是提交按钮，可以把 JavaScript 函数和它连接起来与浏览器交互而无需提交表单函数和它连接起来与浏览器交互而无需提交表单34Process and Portfolio Management 2005 IBM Corporation35Process and Portfolio Management 2005 IBM Corporation 下面增加一些魔法，用兔子的图片替换页面中原有的图片下面增加一些魔法，用兔子的图片替换页面中原有的图片：36Process and Portfolio Management 2005

31、IBM Corporation 首先找到网页中表示首先找到网页中表示img元素的元素的DOM节点。一般来说，最节点。一般来说，最简单的办法是用简单的办法是用getElementById()方法，它属于代表方法，它属于代表Web页面的页面的document对象：对象：4var elementNode = document.getElementById(“id);37Process and Portfolio Management 2005 IBM Corporation 完成所需修改有几种方法：有些简单，有些麻烦。但是运用完成所需修改有几种方法：有些简单，有些麻烦。但是运用较麻烦的办法是一次很好

32、的较麻烦的办法是一次很好的DOM练习，首先看看换图片比较练习，首先看看换图片比较麻烦的办法；后面再重新分析一下看看有没有更简单的办法麻烦的办法；后面再重新分析一下看看有没有更简单的办法 用带兔子的新照片替换原有图片的办法如下：用带兔子的新照片替换原有图片的办法如下：41、创建新的、创建新的img元素元素42、访问当前、访问当前img元素的父元素，也就是它的容器元素的父元素，也就是它的容器43、在已有、在已有img元素之前插入新的元素之前插入新的img元素作为该容器的子级元素作为该容器的子级44、删除原来的、删除原来的img元素元素45、结合起来以便在用户单击按钮时调用刚刚创建的函数、结合起来以

33、便在用户单击按钮时调用刚刚创建的函数38Process and Portfolio Management 2005 IBM Corporation 创建新的创建新的img元素：元素：4var newImage = document.createElement(img);可以创建一个新的元素节点，元素名为可以创建一个新的元素节点，元素名为img。在。在HTML中基本中基本上就是：上就是： 下面需要增加一个属性下面需要增加一个属性src，它指定了要加载的图片：，它指定了要加载的图片：4newImage.setAttribute(src, rabbit-hat.gif); 注：如果对已有的属性调用注

34、：如果对已有的属性调用setAttribute()，则把原来的值替，则把原来的值替换为指定的值。但是，如果调用换为指定的值。但是，如果调用setAttribute()并指定一个不并指定一个不存在的属性，存在的属性，DOM就会使用提供的值增加一个属性就会使用提供的值增加一个属性39Process and Portfolio Management 2005 IBM Corporation 现在有了要插入的图片，还需要找到插入的地方。要将其插现在有了要插入的图片，还需要找到插入的地方。要将其插入到已有图片之前然后再删除原来的图片。为此需要知道已入到已有图片之前然后再删除原来的图片。为此需要知道已有图

35、片的父元素：有图片的父元素：4var imgParent = hatImage.parentNode;40Process and Portfolio Management 2005 IBM Corporation 添加子节点的方法：添加子节点的方法：4insertBefore(newNode, targetNode)4appendChild(newNode) 把新图片元素插入到原有图片之前：把新图片元素插入到原有图片之前：4imgParent.insertBefore(newImage, hatImage); 现在原图片的父元素有了两个现在原图片的父元素有了两个 子元素：新图片和紧跟在后面子元

36、素：新图片和紧跟在后面的旧图片的旧图片41Process and Portfolio Management 2005 IBM Corporation 因为已经得到了旧图片元素的父节点，只要调用因为已经得到了旧图片元素的父节点，只要调用removeChild()并把需要删除的节点传递给它即可：并把需要删除的节点传递给它即可：4imgParent.removeChild(hatImage); 完整的完整的JavaScript函数：函数：42Process and Portfolio Management 2005 IBM Corporation 每当用户点击每当用户点击Hocus Pocus!按钮

37、的时候运行按钮的时候运行showRabbit()函数。为此只要向函数。为此只要向HTML中增加一个简单的中增加一个简单的 onclick事件处理事件处理程序即可：程序即可：43Process and Portfolio Management 2005 IBM Corporation 1、使用、使用replaceChild()函数函数4imgParent.replaceChild(newImage, hatImage); 2、直接修改图片的、直接修改图片的src属性属性4hatImage.setAttribute(src, rabbit-hat.gif); 3、使用、使用HTML DOM方法方法

38、4hatImage.src = “rabbit-hat.gif”;44Process and Portfolio Management 2005 IBM Corporation 虽然兔子从帽子中跳出来了，但是屏幕下方的按钮仍然显示虽然兔子从帽子中跳出来了，但是屏幕下方的按钮仍然显示 Hocus Pocus! 和调用和调用 showRabbit()，下面做一些修改，当，下面做一些修改，当用户再次点击按钮时把兔子藏起来！用户再次点击按钮时把兔子藏起来！45Process and Portfolio Management 2005 IBM Corporation 使用我们熟悉的方法，实现这个简单的功

39、能，在使用我们熟悉的方法，实现这个简单的功能，在showRabbit() 函数中添加如下语句：函数中添加如下语句：46Process and Portfolio Management 2005 IBM Corporation 隐藏兔子的方法基本上和放兔子出来完全相反，将图片的隐藏兔子的方法基本上和放兔子出来完全相反，将图片的src属性再改回旧图片。创建一个新的属性再改回旧图片。创建一个新的 JavaScript 函数来完成这函数来完成这项任务：项任务：47Process and Portfolio Management 2005 IBM Corporation 现在虽然按钮的标签改变了，但是单

40、击按钮时的动作没有变。当用户单击按钮时现在虽然按钮的标签改变了，但是单击按钮时的动作没有变。当用户单击按钮时可以使用可以使用DOM改变事件或者发生的动作。在改变事件或者发生的动作。在JavaScript中，可以通过按钮的中，可以通过按钮的onclick属性来引用该事件，因此可以改变按钮触发的事件：只要赋给属性来引用该事件，因此可以改变按钮触发的事件：只要赋给onclick属属性一个新的函数性一个新的函数48Process and Portfolio Management 2005 IBM Corporation使用使用Ajax发送异步请求发送异步请求49Process and Portfoli

41、o Management 2005 IBM Corporation 考虑以下情景：考虑以下情景：4当用户输入邮编后，系统自动填充相应的城市和省份当用户输入邮编后，系统自动填充相应的城市和省份50Process and Portfolio Management 2005 IBM Corporation51Process and Portfolio Management 2005 IBM Corporation 要实现这种功能，必须非常熟悉一个要实现这种功能，必须非常熟悉一个 JavaScript 对象，即对象，即 XMLHttpRequest（简称（简称XHR）。这个小小的对象实际上已）。这个小

42、小的对象实际上已经在几种浏览器中存在一段时间了，它是经在几种浏览器中存在一段时间了，它是Ajax 的核心。该对的核心。该对象的几个常用方法和属性：象的几个常用方法和属性：4open()：建立到服务器的新请求：建立到服务器的新请求4send()：向服务器发送请求：向服务器发送请求4readyState：提供当前：提供当前 HTML 的就绪状态的就绪状态4status：服务器响应的状态代码：服务器响应的状态代码4responseText：服务器返回的请求响应文本：服务器返回的请求响应文本52Process and Portfolio Management 2005 IBM Corporation

43、创建跨浏览器的创建跨浏览器的XMLHttpRequest对象：对象：53Process and Portfolio Management 2005 IBM Corporation 注意不要被这些花括号迷住了眼睛，下面分别介绍每一步注意不要被这些花括号迷住了眼睛，下面分别介绍每一步:4创建一个新变量创建一个新变量 request 并赋值并赋值 false。使用。使用 false 作为判断条件，表示还没作为判断条件，表示还没有创建有创建 XMLHttpRequest 对象对象4增加增加try/catch块：块： 尝试创建尝试创建 XMLHttpRequest 对象对象 如果失败如果失败,先尝试使用

44、较新版本的先尝试使用较新版本的Microsoft浏览器创建浏览器创建 Microsoft 兼容的对象兼容的对象（Msxml2.XMLHTTP），如果失败（尝试使用较老版本的），如果失败（尝试使用较老版本的Microsoft浏览器创浏览器创建建 Microsoft兼容的对象（兼容的对象（Microsoft.XMLHTTP） 如果全部失败，则保证如果全部失败，则保证request的值仍然为的值仍然为false4检查检查request是否仍然为是否仍然为false（如果一切顺利就不会是（如果一切顺利就不会是false）4如果出现问题则使用如果出现问题则使用JavaScript警告通知用户出现了问题警

45、告通知用户出现了问题54Process and Portfolio Management 2005 IBM Corporation 准备好准备好XMLHttpRequest对象，就可以建立到服务器的请对象，就可以建立到服务器的请求了。求了。4首先首先结合一些表单中的数据来构造结合一些表单中的数据来构造URL：4注：注：escape() 方法用于转义不能用明文正确发送的任何字符。比如方法用于转义不能用明文正确发送的任何字符。比如，空格将被转换成字符，空格将被转换成字符 %20，从而能够在，从而能够在 URL 中传递这些字符。中传递这些字符。4然后建立请求：然后建立请求：55Process and

46、 Portfolio Management 2005 IBM Corporation 使使用用 XMLHttpRequest 对象的对象的 open() 方法来方法来建立请求建立请求。该方法有五个参数：。该方法有五个参数：4request-type：发送请求的类型。典型的值是：发送请求的类型。典型的值是 GET 或或 POST，但也可以发送，但也可以发送 HEAD 请求请求4url：要连接的：要连接的 URL4asynch：如果希望使用异步连接则为：如果希望使用异步连接则为 true，否则为，否则为 false。该参数是可选的，默认为。该参数是可选的，默认为 true4username：如果需

47、要身份验证，则可以在此指定用户名。该可选参数没有默认值：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值4password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值 通常使用其中的前三个参数。事实上，即使需要异步连接，通常指定第三个参通常使用其中的前三个参数。事实上，即使需要异步连接，通常指定第三个参数为数为 “true”，这样更容易理解，这样更容易理解56Process and Portfolio Management 2005 IBM Corporation 一旦请求用一旦请求用 open() 配置好

48、之后，就可以使用配置好之后，就可以使用send()方法发方法发送请求了，送请求了，send() 方法只有一个参数，就是要发送的内容方法只有一个参数，就是要发送的内容 但是我们前面通过但是我们前面通过URL本身已经发送了本身已经发送了zipcode的值，所以的值，所以这里不需要通过这里不需要通过 send() 传递数据，只要传递传递数据，只要传递 null 作为该方作为该方法的参数即可：法的参数即可：57Process and Portfolio Management 2005 IBM Corporation 由于是异步请求，请求发出后由于是异步请求，请求发出后JavaScript 方法不会等待

49、服务器处理完方法不会等待服务器处理完成，因此代码将继续执行，就是说，将退出该方法而把控制返回给表单成，因此代码将继续执行，就是说，将退出该方法而把控制返回给表单。用户可以继续输入信息，应用程序不会等待服务器。用户可以继续输入信息，应用程序不会等待服务器 当服务器完成请求之后，需要指定该如何处理响应。当服务器完成请求之后，需要指定该如何处理响应。XMLHttpRequest对象的对象的onreadystatechange属性允许指定一个回调函数反向调用属性允许指定一个回调函数反向调用Web页面中的代码页面中的代码 当服务器完成请求之后，会查看当服务器完成请求之后，会查看XMLHttpReques

50、t对象，特别是对象，特别是 onreadystatechange属性。然后调用该属性指定的任何方法。之所以属性。然后调用该属性指定的任何方法。之所以称为回调是因为由服务器向网页发起调用，无论网页本身正在做什么。称为回调是因为由服务器向网页发起调用，无论网页本身正在做什么。这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务器响应请求并触发器响应请求并触发onreadystatechange属性指定的回调方法属性指定的回调方法58Process and Portfolio Management 2005 IBM Corpor

51、ation 需要特别注意的是该属性在代码中设置的位置需要特别注意的是该属性在代码中设置的位置 它是在调用它是在调用send()之前设置的。发送请求之前必须设置该属性，这样服务器在回答完成请之前设置的。发送请求之前必须设置该属性，这样服务器在回答完成请求之后能够查看该属性！求之后能够查看该属性！ 注意，这里注意，这里updatePage是个函数名称，不能写成是个函数名称，不能写成updatePage() 函数函数调用的形式！这表示将调用的形式！这表示将updatePage()函数运行的返回结果赋值给函数运行的返回结果赋值给onreadystatechange属性。体会属性。体会JavaScrip

52、t中函数也是对象的特征中函数也是对象的特征59Process and Portfolio Management 2005 IBM Corporation 请求发送后，用户可以继续使用请求发送后，用户可以继续使用Web表单（同时服务器在表单（同时服务器在处理请求）。而当服务器完成了请求处理，服务器查看处理请求）。而当服务器完成了请求处理，服务器查看onreadystatechange属性确定要调用的方法。除此以外，属性确定要调用的方法。除此以外，可以将应用程序看作其他应用程序一样，无论是否异步。可以将应用程序看作其他应用程序一样，无论是否异步。换句话说，不一定要采取特殊的动作编写响应服务器的方换

53、句话说，不一定要采取特殊的动作编写响应服务器的方法，只需要改变表单或其它的页面结构，让用户访问另一法，只需要改变表单或其它的页面结构，让用户访问另一个个 URL 或者做响应服务器需要的任何事情或者做响应服务器需要的任何事情 处理函数（仅弹出简单的警告）：处理函数（仅弹出简单的警告）：60Process and Portfolio Management 2005 IBM Corporation 运行以上代码，根据浏览器的不同，在表单停止弹出警告之前会看到两运行以上代码，根据浏览器的不同，在表单停止弹出警告之前会看到两次、三次甚至四次警告。原因在于还没有考虑次、三次甚至四次警告。原因在于还没有考虑

54、HTTP就绪状态，这是请就绪状态，这是请求求/响应循环中的一个重要部分响应循环中的一个重要部分 HTTP就绪状态（就绪状态（readyState）表示请求的状态或情形。它用于确定该）表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在Ajax应用程序中需要了解五种就绪状态：应用程序中需要了解五种就绪状态：40：请求没有发出（在调用：请求没有发出（在调用 open() 之前）

55、之前）41：请求已经建立但还没有发出（调用：请求已经建立但还没有发出（调用 send() 之前）之前）42：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）43：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应44：响应已完成，可以访问服务器响应并使用它：响应已完成，可以访问服务器响应并使用它61Process and Portfolio Management 2005 IBM Corporation 与大多数跨浏览器问题一样，这些就绪状态的使

56、用也不尽一致。实际上与大多数跨浏览器问题一样，这些就绪状态的使用也不尽一致。实际上很少出现就绪状态从很少出现就绪状态从0到到1、2、3再到再到4，一些浏览器从不报告，一些浏览器从不报告0或或1而直而直接从接从2开始，然后是开始，然后是3和和4，其他浏览器则报告所有的状态。还有一些则，其他浏览器则报告所有的状态。还有一些则多次报告就绪状态多次报告就绪状态1 对于对于Ajax编程，需要直接处理的惟一状态就是就绪状态编程，需要直接处理的惟一状态就是就绪状态4，它表示服务，它表示服务器响应已经完成，可以安全地使用响应数据了。基于此，回调函数做如器响应已经完成，可以安全地使用响应数据了。基于此，回调函数

57、做如下调整：下调整： 修改后就可以保证服务器的处理已经完成，现在就会看到只显示一次警修改后就可以保证服务器的处理已经完成，现在就会看到只显示一次警告信息了告信息了62Process and Portfolio Management 2005 IBM Corporation 以上代码看起来似乎不错，但是还有一个问题以上代码看起来似乎不错，但是还有一个问题 如果服务器响应请求并完成如果服务器响应请求并完成了处理但是报告了一个错误怎么办？服务器端代码应该是由了处理但是报告了一个错误怎么办？服务器端代码应该是由Ajax、JSP、普通、普通HTML表单或其他类型的代码调用的，但只能使用传统的表单或其他类

58、型的代码调用的，但只能使用传统的Web专用方法报告信专用方法报告信息。而在息。而在 Web 世界中，世界中，HTTP状态码（状态码（status）可以处理请求中可能发生的各）可以处理请求中可能发生的各种问题，比如：种问题，比如：4输入了错误的输入了错误的URL请求将得到请求将得到404错误码，它表示该页面不存在错误码，它表示该页面不存在4403和和401错误码表示所访问的数据受到保护或者禁止访问错误码表示所访问的数据受到保护或者禁止访问 无论哪种情况，这些错误码都是从无论哪种情况，这些错误码都是从完成的响应完成的响应 中得到的。换句话说，服务器执中得到的。换句话说，服务器执行了请求（即行了请求

59、（即HTTP就绪状态是就绪状态是4）但是没有返回客户机预期的数据。因此除了）但是没有返回客户机预期的数据。因此除了就绪状态外，还需要检查就绪状态外，还需要检查HTTP状态。我们期望的状态码是状态。我们期望的状态码是200，它表示一切顺，它表示一切顺利。如果就绪状态是利。如果就绪状态是4而且状态码是而且状态码是200，就可以处理服务器的数据了，而且这，就可以处理服务器的数据了，而且这些数据应该就是要求的数据（而不是错误或者其他有问题的信息）些数据应该就是要求的数据（而不是错误或者其他有问题的信息）63Process and Portfolio Management 2005 IBM Corpor

60、ation 在回调函数中增加在回调函数中增加HTTP状态（状态（status）检查：）检查： 现在可以确保请求已经处理完成（通过就绪状态），服务器给出了正常现在可以确保请求已经处理完成（通过就绪状态），服务器给出了正常的响应（通过状态码），最后可以处理服务器返回的数据了。返回的数的响应（通过状态码），最后可以处理服务器返回的数据了。返回的数据（文本形式）保存在据（文本形式）保存在XMLHttpRequest对象的对象的responseText属性中属性中。（如果服务器选择使用。（如果服务器选择使用XML响应，则也可以使用在响应，则也可以使用在responseXML属属性获取）性获取）64Pro