《慧桥教育Ajax学习课件》由会员分享，可在线阅读，更多相关《慧桥教育Ajax学习课件（82页珍藏版）》请在金锄头文库上搜索。
1、Copyright 2008 - 2009 WitB AjaxAjax2Process and Portfolio Management 2005 IBM Corporation课程安排课程安排Ajax基础基础使用使用Ajax发送异步请求发送异步请求在请求和响应中使用在请求和响应中使用XML使用使用JSON进行数据传输进行数据传输3Process and Portfolio Management 2005 IBM Corporation第一讲第一讲Ajax基础基础4Process and Portfolio Management 2005 IBM Corporation什么是什么是Ajax?先
2、来点感觉，看些例子先来点感觉，看些例子4BACKBASE购物网站购物网站4Google Suggest4Google Map4and many more5Process and Portfolio Management 2005 IBM CorporationAjax定义定义Ajax (Asynchronous JavaScript and XML)不是一个新不是一个新的技术，事实上，它是一些旧有的成熟的技术以一种全新的技术，事实上，它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起的更加强大的方式整合在一起Ajax的关键技术：的关键技术：4使用使用XHTML(HTML)和和CSS构
3、建标准化的展示层构建标准化的展示层4使用使用DOM进行动态显示和交互进行动态显示和交互4使用使用XML和和XSLT进行数据交换和操纵进行数据交换和操纵4使用使用XMLHttpRequest异步获取数据异步获取数据4使用使用JavaScript将所有元素绑定在一起将所有元素绑定在一起6Process and Portfolio Management 2005 IBM Corporation传统传统Web应用与应用与Ajax应用的比较应用的比较7Process and Portfolio Management 2005 IBM Corporation传统传统Web应用与应用与Ajax应用的比较（应
4、用的比较（cont.）在传统的在传统的Web应用模型下，大部分的用户操作都会发送一应用模型下，大部分的用户操作都会发送一个个HTTP请求给服务器，然后服务器开始处理（接收数据，请求给服务器，然后服务器开始处理（接收数据，执行业务逻辑，访问数据库等），最后向浏览器返回执行业务逻辑，访问数据库等），最后向浏览器返回HTML页面。当服务器处理请求时，用户能够做什么呢？页面。当服务器处理请求时，用户能够做什么呢？只有等待！只有等待！8Process and Portfolio Management 2005 IBM Corporation传统传统Web应用与应用与Ajax应用的比较（应用的比较（con
5、t.）在传统的在传统的Web应用模型下应用模型下，客户机客户机 （浏览器或者本地机器上运行的（浏览器或者本地机器上运行的代码）向服务器发出请求。该请求是同步的，客户机等待服务器的响代码）向服务器发出请求。该请求是同步的，客户机等待服务器的响应。当客户机等待的时候，会用某种形式通知您正在处理：应。当客户机等待的时候，会用某种形式通知您正在处理：4沙漏（特别是沙漏（特别是 Windows 上）上）4旋转皮球（通常在旋转皮球（通常在 Mac 机器上）机器上）4应用程序基本上冻结了，然后过一段时间光标变化了应用程序基本上冻结了，然后过一段时间光标变化了这正是传统这正是传统Web 应用程序让人感到笨拙或
6、缓慢的原因应用程序让人感到笨拙或缓慢的原因 缺乏真正缺乏真正的交互性。按下按钮时，应用程序实际上变得不能使用，直到刚刚触的交互性。按下按钮时，应用程序实际上变得不能使用，直到刚刚触发的请求得到响应。如果请求需要大量服务器处理，那么等待的时间发的请求得到响应。如果请求需要大量服务器处理，那么等待的时间可能很长可能很长9Process and Portfolio Management 2005 IBM Corporation传统传统Web应用与应用与Ajax应用的比较（应用的比较（cont.）Ajax应用通过在用户和服务器之间引入一个媒介（应用通过在用户和服务器之间引入一个媒介（Ajax engi
7、ne）来异步发送请求，消除了传统的发送请求等）来异步发送请求，消除了传统的发送请求等待发送请求等待的特性，极大的提高了用户体验待发送请求等待的特性，极大的提高了用户体验10Process and Portfolio Management 2005 IBM CorporationJavaScript基础基础11Process and Portfolio Management 2005 IBM CorporationJavaScript简介简介JavaScript是是Netscape公司与公司与Sun公司合作开发的。在公司合作开发的。在JavaScript出现之前，出现之前，Web浏览器不过是一种
8、能够显示超文本文档的软件的基本浏览器不过是一种能够显示超文本文档的软件的基本部分。而在部分。而在JavaScript之后，网页的内容不再局限于枯燥的文本，可之后，网页的内容不再局限于枯燥的文本，可交互性得到了显著的改善交互性得到了显著的改善JavaScript是一种脚本语言，一种解释性的，基于对象的脚本语言。是一种脚本语言，一种解释性的，基于对象的脚本语言。JavaScript脚本通常只能通过脚本通常只能通过Web浏览器进行解释和执行而不是像普浏览器进行解释和执行而不是像普通意义上的程序那样可以独立运行通意义上的程序那样可以独立运行在在HTML基础上，基础上，使用使用JavaScript 可以
9、开发交互式可以开发交互式Web网页。网页。 JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容交互性的关系，使网页包含更多活跃的元素和更加精彩的内容注意，注意，JavaScript与与Java没有任何联系没有任何联系12Process and Portfolio Management 2005 IBM CorporationJavaScript语法语法 语句语句JavaScript脚本的基本组成单位。脚本的基本组成单位。只需要简单地把各条语句放在不同的行上就可以分割开
10、来，只需要简单地把各条语句放在不同的行上就可以分割开来，不需要加分号不需要加分号“；”结束结束:4first statement4second statement但在每条语句的末尾添加但在每条语句的末尾添加“；”是一种良好的编程习惯：是一种良好的编程习惯：4first statement;4second statement;13Process and Portfolio Management 2005 IBM CorporationJavaScript语法语法注释注释单行注释（双斜杠）：单行注释（双斜杠）：4/ line1多行注释：多行注释：4/* line1 line2 */HTML风格注释
11、（不推荐使用）：风格注释（不推荐使用）：4”来结束来结束14Process and Portfolio Management 2005 IBM CorporationJavaScript语法语法变量变量JavaScript不要求在声明变量时必须明确指出其数据类型不要求在声明变量时必须明确指出其数据类型（所以称（所以称JavaScript为弱类型语言），可以使用统一的关为弱类型语言），可以使用统一的关键字键字var进行声明：进行声明：4var age = 33;4mood = “happy”;但是提前对变量做出声明是一种良好的编程习惯但是提前对变量做出声明是一种良好的编程习惯变量名允许包含字母、
12、数字、美元符号变量名允许包含字母、数字、美元符号($)和下划线字符，和下划线字符，但不允许包括空格或标点符号但不允许包括空格或标点符号15Process and Portfolio Management 2005 IBM CorporationJavaScript语法语法数据类型数据类型JavaScript变量的类型是由变量的值决定的，可以对同一个变量赋予变量的类型是由变量的值决定的，可以对同一个变量赋予不同数据类型的值：不同数据类型的值：4var age = “thirty three”;4age = 33;JavaScript中重要的数据类型：中重要的数据类型：4未定义（未定义（undef
13、ined），变量未定义），变量未定义4空（空（null），变量未初始化），变量未初始化4字符串（字符串（string），可以放在单引号或双引号中），可以放在单引号或双引号中4数值（数值（number），可以表示整数、浮点数），可以表示整数、浮点数4布尔型（布尔型（boolean），），true或或false4对象（对象（object）16Process and Portfolio Management 2005 IBM CorporationJavaScript语法语法数组数组数组用来存储一组值，使用关键字数组用来存储一组值，使用关键字Array来声明，声明时可以指明数来声明，声明时可以指明数
14、组的长度：组的长度：4var colors = new Array();4var colors = new Array(3);其中其中new关键字可以省略，类似其它语言，数组的下标从关键字可以省略，类似其它语言，数组的下标从0开始，赋开始，赋值方法也和其它语言类似：值方法也和其它语言类似：4colors0 = “red”;4colors1 = “black”;4colors2 = “white”;还可以使用方括号创建数组时同时初始化：还可以使用方括号创建数组时同时初始化：4var colors = “red”, “black”, “white”;17Process and Portfolio
15、Management 2005 IBM CorporationJavaScript语法语法数组（数组（cont.） 使用方括号创建数组对象的简单方法：使用方括号创建数组对象的简单方法：4var colors = ; /声明空数组对象声明空数组对象4colors0 = “red”; 4colors1 = “black”;通过数组的通过数组的length属性可以得到数组中元素的个数。数组的长度可以属性可以得到数组中元素的个数。数组的长度可以动态扩展：动态扩展：4colors3 = “blue”;4colors8 = “grey”;关联数组：在填充数组时为每个新元素明确地给出下标：关联数组：在填充数
16、组时为每个新元素明确地给出下标：4colors“r” = “red”;4colors“b” = “black”;18Process and Portfolio Management 2005 IBM CorporationJavaScript语法语法操作、条件语句、循环操作、条件语句、循环语句语句 JavaScript中的算术运算符（中的算术运算符（+、-、*、/、+、-等）、等）、比较运算符（比较运算符（、=、=）、条件语句（）、条件语句（if、while、for等）等）19Process and Portfolio Management 2005 IBM CorporationJavaSc
17、ript语法语法函数函数使用函数可以避免重复输入大量相同的内容。使用函数可以避免重复输入大量相同的内容。JavaScript中使用中使用function关关键字定义函数：键字定义函数：4function funcname (arg1, arg2, ) statements;声明一个简单的函数：声明一个简单的函数：4function multiply (num1, num2) var total = num1 * num2;return total; 声明后可以直接调用此函数获取结果：声明后可以直接调用此函数获取结果：var result = multiply (5, 9);注意，注意，Java
18、Script中的函数不需声明返回类型，参数也不需要声明类型中的函数不需声明返回类型，参数也不需要声明类型20Process and Portfolio Management 2005 IBM CorporationJavaScript语法语法对象对象JavaScript对象是由一组相关的属性和方法构成的数据实体。属性和方法都要使用对象是由一组相关的属性和方法构成的数据实体。属性和方法都要使用“.”来访问：来访问：4object.property4object.method()使用函数来定义使用函数来定义“类类”：4function Person() this.age = 12;this.nam
19、e = “no name”;this.sayHello = function() alert (“Hello ” + this.name); /其中其中this关键字不能省略！关键字不能省略！使用使用new关键字来创建对象实例：关键字来创建对象实例：var vincent = new Person();21Process and Portfolio Management 2005 IBM CorporationDOM基础基础22Process and Portfolio Management 2005 IBM CorporationDOM简介简介DOM是是”Document Object Mo
20、del”（文档对象模型）的（文档对象模型）的首字母缩写。当创建了一个网页并把它加载到首字母缩写。当创建了一个网页并把它加载到Web浏览器浏览器中时，就会在幕后创建一个文档对象模型中时，就会在幕后创建一个文档对象模型DOM表示被加载到浏览器窗口里的当前页面：浏览器向表示被加载到浏览器窗口里的当前页面：浏览器向我们提供了当前页面的模型，而我们可以通过我们提供了当前页面的模型，而我们可以通过JavaScript访问这个模型访问这个模型DOM把一份文档表示为一棵树把一份文档表示为一棵树23Process and Portfolio Management 2005 IBM CorporationDOM树
21、结构树结构如下的如下的HTML页面：页面：24Process and Portfolio Management 2005 IBM CorporationDOM树结构（树结构（cont.）浏览器加载该页面并将之转换为树形结构：浏览器加载该页面并将之转换为树形结构：25Process and Portfolio Management 2005 IBM CorporationDOM树结构（树结构（cont.）DOM树中的一切是以最外层的树中的一切是以最外层的HTML包含元素，即包含元素，即html元素开始的。元素开始的。使用树的比喻，这叫做根元素（使用树的比喻，这叫做根元素（root element
22、）从根流出的线表示不同标记部分之间的关系。从根流出的线表示不同标记部分之间的关系。head和和body元素是元素是html根元素的孩子（根元素的孩子（child）；）；title是是head的孩子，而文本的孩子，而文本 “Trees, trees, everywhere”是是title的孩子；相对的，的孩子；相对的，head是是title的父亲的父亲（parent），），title是文本是文本 “Trees, trees, everywhere” 的父亲。处的父亲。处在同一层次的且互不包含的两个分支（如在同一层次的且互不包含的两个分支（如head和和body）之间称为兄）之间称为兄弟（弟（si
23、bling）关系。整个树就这样组织下去，直到浏览器获得与上图）关系。整个树就这样组织下去，直到浏览器获得与上图类似的结构类似的结构通常把这样的树结构成为一棵节点树通常把这样的树结构成为一棵节点树26Process and Portfolio Management 2005 IBM Corporation节点节点 （node）DOM文档是由节点构成的集合，此时的节点是文档树上文档是由节点构成的集合，此时的节点是文档树上的树枝或者树叶的树枝或者树叶DOM中节点的类型：中节点的类型：4元素节点（元素节点（element node），诸如），诸如、等。元等。元素节点可以包含其它的元素，唯一没有被包含在
24、其它元素里的元素素节点可以包含其它的元素，唯一没有被包含在其它元素里的元素是是，它是根元素，它是根元素4属性节点（属性节点（attribute node），元素或多或少地有一些属性，属性），元素或多或少地有一些属性，属性可以对元素做出一些具体的描述。因为属性总是被放到起始标签里，可以对元素做出一些具体的描述。因为属性总是被放到起始标签里，所以属性节点总是被包含在元素节点中所以属性节点总是被包含在元素节点中4文本节点（文本节点（text node），），元素中包含着文本节点元素中包含着文本节点“Trees, trees, everywhere”27Process and Portfolio Ma
25、nagement 2005 IBM Corporation基本基本DOM方法方法getElementById(id)4返回一个给定返回一个给定id属性的元素节点相对应的对象。这个方法是与属性的元素节点相对应的对象。这个方法是与document对象相关联的函数。其中对象相关联的函数。其中document对象代表着整个对象代表着整个HTML文档并可以用文档并可以用来访问所有页面中的元素来访问所有页面中的元素getElementsByTagName(tagname)4返回一个对象数组，它们分别对应着文档里的一个特定的元素节点返回一个对象数组，它们分别对应着文档里的一个特定的元素节点getAttrib
26、ute()4返回对象的属性值返回对象的属性值setAttribute()4修改对象的属性值修改对象的属性值28Process and Portfolio Management 2005 IBM Corporation重要重要DOM属性属性childNodes4可以将节点树中任何一个元素的所有子元素检索出来，这个属性返回一个可以将节点树中任何一个元素的所有子元素检索出来，这个属性返回一个数组，包含了给定元素节点的全体子元素数组，包含了给定元素节点的全体子元素nodeName4返回元素节点的名称。注意，返回的结果全部是大写返回元素节点的名称。注意，返回的结果全部是大写nodeType4用来区分节点
27、的类型，元素节点的用来区分节点的类型，元素节点的nodeType属性值是属性值是1，属性节点的，属性节点的nodeType属性值是属性值是2，文本节点的，文本节点的nodeType属性值是属性值是3nodeValue4可以用来存取文本节点的值。对于元素节点或属性节点这个属性返回空可以用来存取文本节点的值。对于元素节点或属性节点这个属性返回空29Process and Portfolio Management 2005 IBM Corporation重要重要DOM属性（属性（cont.）firstChild和和lastChild4第一个和最后一个孩子节点。第一个和最后一个孩子节点。4node.f
28、irstChild等价于等价于node.childNodes0，4node.lastChild等价于等价于node.childNodesnode.childNodes.length 1parentNode4返回元素的父节点返回元素的父节点nextSibling4返回下一个兄弟节点返回下一个兄弟节点30Process and Portfolio Management 2005 IBM Corporation改变网页结构的改变网页结构的DOM方法方法createElement(tagname)4创建新的元素节点，此方法与创建新的元素节点，此方法与document对象相关联。新建的元素节点并未与节点
29、树相连对象相关联。新建的元素节点并未与节点树相连appendChild(node)4把新建的节点插入到节点树的某个节点下，成为这个节点的子节点把新建的节点插入到节点树的某个节点下，成为这个节点的子节点createTextNode(text)4创建文本节点创建文本节点insertBefore(newNode, targetNode)4把一个新元素插入到一个现有元素的前面把一个新元素插入到一个现有元素的前面replaceChild(newChild, oldChild)4替换一个孩子节点替换一个孩子节点removeChild(node)4删除一个孩子节点删除一个孩子节点31Process and
30、Portfolio Management 2005 IBM Corporation基于基于DOM的的Web应用应用程序示例程序示例32Process and Portfolio Management 2005 IBM Corporation基于基于DOM的的Web应用程序示例应用程序示例首先建立一个非常简单的应用程序，然后再添加一点首先建立一个非常简单的应用程序，然后再添加一点DOM魔法。注意，魔法。注意，DOM可以移动网页中的任何东西而不可以移动网页中的任何东西而不需要提交表单。创建一个简单的网页，上面只显示一个普需要提交表单。创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记
31、为通的旧式大礼帽，还有一个标记为 Hocus Pocus! 的按的按钮钮33Process and Portfolio Management 2005 IBM Corporation初始的初始的HTML清单清单注意按钮的类型是注意按钮的类型是 button 而不是提交按钮。如果使用提交按钮，单击该按而不是提交按钮。如果使用提交按钮，单击该按钮将导致浏览器提交表单。通过使用一般输入按钮而不是提交按钮，可以把钮将导致浏览器提交表单。通过使用一般输入按钮而不是提交按钮，可以把 JavaScript 函数和它连接起来与浏览器交互而无需提交表单函数和它连接起来与浏览器交互而无需提交表单34Process
32、 and Portfolio Management 2005 IBM Corporation初始的初始的HTML页面预览页面预览35Process and Portfolio Management 2005 IBM Corporation目标效果目标效果下面增加一些魔法，用兔子的图片替换页面中原有的图片：下面增加一些魔法，用兔子的图片替换页面中原有的图片：36Process and Portfolio Management 2005 IBM Corporation使用使用getElementById()函数获得元素节点函数获得元素节点首先找到网页中表示首先找到网页中表示img元素的元素的DOM
33、节点。一般来说，最节点。一般来说，最简单的办法是用简单的办法是用getElementById()方法，它属于代表方法，它属于代表Web页面的页面的document对象：对象：4var elementNode = document.getElementById(“id);37Process and Portfolio Management 2005 IBM Corporation修改图片，麻烦的办法修改图片，麻烦的办法完成所需修改有几种方法：有些简单，有些麻烦。但是运用完成所需修改有几种方法：有些简单，有些麻烦。但是运用较麻烦的办法是一次很好的较麻烦的办法是一次很好的DOM练习，首先看看换图片比
34、较练习，首先看看换图片比较麻烦的办法；后面再重新分析一下看看有没有更简单的办法麻烦的办法；后面再重新分析一下看看有没有更简单的办法用带兔子的新照片替换原有图片的办法如下：用带兔子的新照片替换原有图片的办法如下：41、创建新的、创建新的img元素元素42、访问当前、访问当前img元素的父元素，也就是它的容器元素的父元素，也就是它的容器43、在已有、在已有img元素之前插入新的元素之前插入新的img元素作为该容器的子级元素作为该容器的子级44、删除原来的、删除原来的img元素元素45、结合起来以便在用户单击按钮时调用刚刚创建的函数、结合起来以便在用户单击按钮时调用刚刚创建的函数38Process
35、and Portfolio Management 2005 IBM Corporation1、创建新的、创建新的img元素元素创建新的创建新的img元素：元素：4var newImage = document.createElement(img);可以创建一个新的元素节点，元素名为可以创建一个新的元素节点，元素名为img。在。在HTML中基本中基本上就是：上就是：下面需要增加一个属性下面需要增加一个属性src，它指定了要加载的图片：，它指定了要加载的图片：4newImage.setAttribute(src, rabbit-hat.gif);注：如果对已有的属性调用注：如果对已有的属性调用se
36、tAttribute()，则把原来的值替，则把原来的值替换为指定的值。但是，如果调用换为指定的值。但是，如果调用setAttribute()并指定一个不并指定一个不存在的属性，存在的属性，DOM就会使用提供的值增加一个属性就会使用提供的值增加一个属性39Process and Portfolio Management 2005 IBM Corporation2、获得原始图片的父元素、获得原始图片的父元素现在有了要插入的图片，还需要找到插入的地方。要将其插现在有了要插入的图片，还需要找到插入的地方。要将其插入到已有图片之前然后再删除原来的图片。为此需要知道已入到已有图片之前然后再删除原来的图片。
37、为此需要知道已有图片的父元素：有图片的父元素：4var imgParent = hatImage.parentNode;40Process and Portfolio Management 2005 IBM Corporation3、插入新图片、插入新图片添加子节点的方法：添加子节点的方法：4insertBefore(newNode, targetNode)4appendChild(newNode)把新图片元素插入到原有图片之前：把新图片元素插入到原有图片之前：4imgParent.insertBefore(newImage, hatImage);现在原图片的父元素有了两个现在原图片的父元素有
38、了两个 子元素：新图片和紧跟在后面子元素：新图片和紧跟在后面的旧图片的旧图片41Process and Portfolio Management 2005 IBM Corporation4、删除旧图片、删除旧图片因为已经得到了旧图片元素的父节点，只要调用因为已经得到了旧图片元素的父节点，只要调用removeChild()并把需要删除的节点传递给它即可：并把需要删除的节点传递给它即可：4imgParent.removeChild(hatImage);完整的完整的JavaScript函数：函数：42Process and Portfolio Management 2005 IBM Corporat
39、ion5、表单元素连接、表单元素连接JavaScript每当用户点击每当用户点击Hocus Pocus!按钮的时候运行按钮的时候运行showRabbit()函数。为此只要向函数。为此只要向HTML中增加一个简单的中增加一个简单的 onclick事件处理事件处理程序即可：程序即可：43Process and Portfolio Management 2005 IBM Corporation思考：替换图片更简单的办法思考：替换图片更简单的办法1、使用、使用replaceChild()函数函数4imgParent.replaceChild(newImage, hatImage);2、直接修改图片的、
40、直接修改图片的src属性属性4hatImage.setAttribute(src, rabbit-hat.gif);3、使用、使用HTML DOM方法方法4hatImage.src = “rabbit-hat.gif”;44Process and Portfolio Management 2005 IBM Corporation然后然后把兔子藏起来把兔子藏起来虽然兔子从帽子中跳出来了，但是屏幕下方的按钮仍然显示虽然兔子从帽子中跳出来了，但是屏幕下方的按钮仍然显示 Hocus Pocus! 和调用和调用 showRabbit()，下面做一些修改，当，下面做一些修改，当用户再次点击按钮时把兔子藏起
41、来！用户再次点击按钮时把兔子藏起来！45Process and Portfolio Management 2005 IBM Corporation1、修改按钮的标签、修改按钮的标签使用我们熟悉的方法，实现这个简单的功能，在使用我们熟悉的方法，实现这个简单的功能，在showRabbit() 函数中添加如下语句：函数中添加如下语句：46Process and Portfolio Management 2005 IBM Corporation2、隐藏兔子、隐藏兔子隐藏兔子的方法基本上和放兔子出来完全相反，将图片的隐藏兔子的方法基本上和放兔子出来完全相反，将图片的src属性再改回旧图片。创建一个新的属
42、性再改回旧图片。创建一个新的 JavaScript 函数来完成这函数来完成这项任务：项任务：47Process and Portfolio Management 2005 IBM Corporation3、更改事件处理函数、更改事件处理函数现在虽然按钮的标签改变了，但是单击按钮时的动作没有变。当用户单击按钮时现在虽然按钮的标签改变了，但是单击按钮时的动作没有变。当用户单击按钮时可以使用可以使用DOM改变事件或者发生的动作。在改变事件或者发生的动作。在JavaScript中，可以通过按钮的中，可以通过按钮的onclick属性来引用该事件，因此可以改变按钮触发的事件：只要赋给属性来引用该事件，因此
43、可以改变按钮触发的事件：只要赋给onclick属性属性一个新的函数一个新的函数48Process and Portfolio Management 2005 IBM Corporation第二讲第二讲使用使用Ajax发送异步请求发送异步请求49Process and Portfolio Management 2005 IBM Corporation使用使用Ajax发送异步请求示例发送异步请求示例考虑以下情景：考虑以下情景：4当用户输入邮编后，系统自动填充相应的城市和省份当用户输入邮编后，系统自动填充相应的城市和省份50Process and Portfolio Management 2005
44、IBM Corporation创建静态页面原型创建静态页面原型51Process and Portfolio Management 2005 IBM Corporation创建创建XMLHttpRequest要实现这种功能，必须非常熟悉一个要实现这种功能，必须非常熟悉一个 JavaScript 对象，即对象，即 XMLHttpRequest（简称（简称XHR）。这个小小的对象实际上已）。这个小小的对象实际上已经在几种浏览器中存在一段时间了，它是经在几种浏览器中存在一段时间了，它是Ajax 的核心。该对的核心。该对象的几个常用方法和属性：象的几个常用方法和属性：4open()：建立到服务器的新请
45、求：建立到服务器的新请求4send()：向服务器发送请求：向服务器发送请求4readyState：提供当前：提供当前 HTML 的就绪状态的就绪状态4status：服务器响应的状态代码：服务器响应的状态代码4responseText：服务器返回的请求响应文本：服务器返回的请求响应文本52Process and Portfolio Management 2005 IBM Corporation创建创建XMLHttpRequest （cont.）创建跨浏览器的创建跨浏览器的XMLHttpRequest对象：对象：53Process and Portfolio Management 2005 IBM
46、 Corporation创建创建XMLHttpRequest （cont.）注意不要被这些花括号迷住了眼睛，下面分别介绍每一步注意不要被这些花括号迷住了眼睛，下面分别介绍每一步:4创建一个新变量创建一个新变量 request 并赋值并赋值 false。使用。使用 false 作为判断条件，表示还没作为判断条件，表示还没有创建有创建 XMLHttpRequest 对象对象4增加增加try/catch块：块：尝试创建尝试创建 XMLHttpRequest 对象对象如果失败如果失败,先尝试使用较新版本的先尝试使用较新版本的Microsoft浏览器创建浏览器创建 Microsoft 兼容的对象兼容的对
47、象（Msxml2.XMLHTTP），如果失败（尝试使用较老版本的），如果失败（尝试使用较老版本的Microsoft浏览器创浏览器创建建 Microsoft兼容的对象（兼容的对象（Microsoft.XMLHTTP）如果全部失败，则保证如果全部失败，则保证request的值仍然为的值仍然为false4检查检查request是否仍然为是否仍然为false（如果一切顺利就不会是（如果一切顺利就不会是false）4如果出现问题则使用如果出现问题则使用JavaScript警告通知用户出现了问题警告通知用户出现了问题54Process and Portfolio Management 2005 IBM C
48、orporation建立到服务器的请求建立到服务器的请求准备好准备好XMLHttpRequest对象，就可以建立到服务器的请求对象，就可以建立到服务器的请求了。了。4首先首先结合一些表单中的数据来构造结合一些表单中的数据来构造URL：4注：注：escape() 方法用于转义不能用明文正确发送的任何字符。比如，方法用于转义不能用明文正确发送的任何字符。比如，空格将被转换成字符空格将被转换成字符 %20，从而能够在，从而能够在 URL 中传递这些字符。中传递这些字符。4然后建立请求：然后建立请求：55Process and Portfolio Management 2005 IBM Corpora
49、tion建立到服务器的请求（建立到服务器的请求（cont.）使使用用 XMLHttpRequest 对象的对象的 open() 方法来方法来建立请求建立请求。该方法有五个参数：。该方法有五个参数：4request-type：发送请求的类型。典型的值是：发送请求的类型。典型的值是 GET 或或 POST，但也可以发送，但也可以发送 HEAD 请请求求4url：要连接的：要连接的 URL4asynch：如果希望使用异步连接则为：如果希望使用异步连接则为 true，否则为，否则为 false。该参数是可选的，默认为。该参数是可选的，默认为 true4username：如果需要身份验证，则可以在此指定
50、用户名。该可选参数没有默认值：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值4password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值通常使用其中的前三个参数。事实上，即使需要异步连接，通常指定第三个参通常使用其中的前三个参数。事实上，即使需要异步连接，通常指定第三个参数为数为 “true”，这样更容易理解，这样更容易理解56Process and Portfolio Management 2005 IBM Corporation使用使用XMLHttpRequest发送请求发送请求一旦请求用一旦请求用
51、 open() 配置好之后，就可以使用配置好之后，就可以使用send()方法发方法发送请求了，送请求了，send() 方法只有一个参数，就是要发送的内容方法只有一个参数，就是要发送的内容但是我们前面通过但是我们前面通过URL本身已经发送了本身已经发送了zipcode的值，所以的值，所以这里不需要通过这里不需要通过 send() 传递数据，只要传递传递数据，只要传递 null 作为该方作为该方法的参数即可：法的参数即可：57Process and Portfolio Management 2005 IBM Corporation设置回调函数设置回调函数由于是异步请求，请求发出后由于是异步请求，请
52、求发出后JavaScript 方法不会等待服务器处理完方法不会等待服务器处理完成，因此代码将继续执行，就是说，将退出该方法而把控制返回给表单。成，因此代码将继续执行，就是说，将退出该方法而把控制返回给表单。用户可以继续输入信息，应用程序不会等待服务器用户可以继续输入信息，应用程序不会等待服务器当服务器完成请求之后，需要指定该如何处理响应。当服务器完成请求之后，需要指定该如何处理响应。XMLHttpRequest对象的对象的onreadystatechange属性允许指定一个回调函数反向调用属性允许指定一个回调函数反向调用Web页面中的代码页面中的代码当服务器完成请求之后，会查看当服务器完成请求
53、之后，会查看XMLHttpRequest对象，特别是对象，特别是 onreadystatechange属性。然后调用该属性指定的任何方法。之所以属性。然后调用该属性指定的任何方法。之所以称为回调是因为由服务器向网页发起调用，无论网页本身正在做什么。称为回调是因为由服务器向网页发起调用，无论网页本身正在做什么。这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务器响应请求并触发器响应请求并触发onreadystatechange属性指定的回调方法属性指定的回调方法58Process and Portfolio Managem
54、ent 2005 IBM Corporation设置回调函数（设置回调函数（cont.）需要特别注意的是该属性在代码中设置的位置需要特别注意的是该属性在代码中设置的位置 它是在调用它是在调用send()之前设置的。发送请求之前必须设置该属性，这样服务器在回答完成请之前设置的。发送请求之前必须设置该属性，这样服务器在回答完成请求之后能够查看该属性！求之后能够查看该属性！注意，这里注意，这里updatePage是个函数名称，不能写成是个函数名称，不能写成updatePage() 函数调函数调用的形式！这表示将用的形式！这表示将updatePage()函数运行的返回结果赋值给函数运行的返回结果赋值给
55、onreadystatechange属性。体会属性。体会JavaScript中函数也是对象的特征中函数也是对象的特征59Process and Portfolio Management 2005 IBM Corporation处理服务器响应处理服务器响应请求发送后，用户可以继续使用请求发送后，用户可以继续使用Web表单（同时服务器在处表单（同时服务器在处理请求）。而当服务器完成了请求处理，服务器查看理请求）。而当服务器完成了请求处理，服务器查看onreadystatechange属性确定要调用的方法。除此以外，属性确定要调用的方法。除此以外，可以将应用程序看作其他应用程序一样，无论是否异步。换
56、可以将应用程序看作其他应用程序一样，无论是否异步。换句话说，不一定要采取特殊的动作编写响应服务器的方法，句话说，不一定要采取特殊的动作编写响应服务器的方法，只需要改变表单或其它的页面结构，让用户访问另一个只需要改变表单或其它的页面结构，让用户访问另一个 URL 或者做响应服务器需要的任何事情或者做响应服务器需要的任何事情处理函数（仅弹出简单的警告）：处理函数（仅弹出简单的警告）：60Process and Portfolio Management 2005 IBM Corporation处理服务器响应（续）处理服务器响应（续）运行以上代码，根据浏览器的不同，在表单停止弹出警告之前会看到两运行以
57、上代码，根据浏览器的不同，在表单停止弹出警告之前会看到两次、三次甚至四次警告。原因在于还没有考虑次、三次甚至四次警告。原因在于还没有考虑HTTP就绪状态，这是请就绪状态，这是请求求/响应循环中的一个重要部分响应循环中的一个重要部分HTTP就绪状态（就绪状态（readyState）表示请求的状态或情形。它用于确定该）表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在Ajax
58、应用程序中需要了解五种就绪状态：应用程序中需要了解五种就绪状态：40：请求没有发出（在调用：请求没有发出（在调用 open() 之前）之前）41：请求已经建立但还没有发出（调用：请求已经建立但还没有发出（调用 send() 之前）之前）42：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）43：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应44：响应已完成，可以访问服务器响应并使用它：响应已完成，可以访问服务器响应并使用它61Process
59、and Portfolio Management 2005 IBM Corporation处理服务器响应（续）处理服务器响应（续）与大多数跨浏览器问题一样，这些就绪状态的使用也不尽一致。实际上与大多数跨浏览器问题一样，这些就绪状态的使用也不尽一致。实际上很少出现就绪状态从很少出现就绪状态从0到到1、2、3再到再到4，一些浏览器从不报告，一些浏览器从不报告0或或1而直而直接从接从2开始，然后是开始，然后是3和和4，其他浏览器则报告所有的状态。还有一些则，其他浏览器则报告所有的状态。还有一些则多次报告就绪状态多次报告就绪状态1对于对于Ajax编程，需要直接处理的惟一状态就是就绪状态编程，需要直接处
60、理的惟一状态就是就绪状态4，它表示服务，它表示服务器响应已经完成，可以安全地使用响应数据了。基于此，回调函数做如器响应已经完成，可以安全地使用响应数据了。基于此，回调函数做如下调整：下调整：修改后就可以保证服务器的处理已经完成，现在就会看到只显示一次警修改后就可以保证服务器的处理已经完成，现在就会看到只显示一次警告信息了告信息了62Process and Portfolio Management 2005 IBM Corporation处理服务器响应（续）处理服务器响应（续）以上代码看起来似乎不错，但是还有一个问题以上代码看起来似乎不错，但是还有一个问题 如果服务器响应请求并完成如果服务器响应
61、请求并完成了处理但是报告了一个错误怎么办？服务器端代码应该是由了处理但是报告了一个错误怎么办？服务器端代码应该是由Ajax、JSP、普通、普通HTML表单或其他类型的代码调用的，但只能使用传统的表单或其他类型的代码调用的，但只能使用传统的Web专用方法报告信专用方法报告信息。而在息。而在 Web 世界中，世界中，HTTP状态码（状态码（status）可以处理请求中可能发生的各）可以处理请求中可能发生的各种问题，比如：种问题，比如：4输入了错误的输入了错误的URL请求将得到请求将得到404错误码，它表示该页面不存在错误码，它表示该页面不存在4403和和401错误码表示所访问的数据受到保护或者禁止
62、访问错误码表示所访问的数据受到保护或者禁止访问无论哪种情况，这些错误码都是从无论哪种情况，这些错误码都是从完成的响应完成的响应 中得到的。换句话说，服务器执中得到的。换句话说，服务器执行了请求（即行了请求（即HTTP就绪状态是就绪状态是4）但是没有返回客户机预期的数据。因此除了）但是没有返回客户机预期的数据。因此除了就绪状态外，还需要检查就绪状态外，还需要检查HTTP状态。我们期望的状态码是状态。我们期望的状态码是200，它表示一切顺，它表示一切顺利。如果就绪状态是利。如果就绪状态是4而且状态码是而且状态码是200，就可以处理服务器的数据了，而且这，就可以处理服务器的数据了，而且这些数据应该就
63、是要求的数据（而不是错误或者其他有问题的信息）些数据应该就是要求的数据（而不是错误或者其他有问题的信息）63Process and Portfolio Management 2005 IBM Corporation处理服务器响应（续）处理服务器响应（续）在回调函数中增加在回调函数中增加HTTP状态（状态（status）检查：）检查：现在可以确保请求已经处理完成（通过就绪状态），服务器给出了正常现在可以确保请求已经处理完成（通过就绪状态），服务器给出了正常的响应（通过状态码），最后可以处理服务器返回的数据了。返回的数的响应（通过状态码），最后可以处理服务器返回的数据了。返回的数据（文本形式）保存
64、在据（文本形式）保存在XMLHttpRequest对象的对象的responseText属性中。属性中。（如果服务器选择使用（如果服务器选择使用XML响应，则也可以使用在响应，则也可以使用在responseXML属性属性获取）获取）64Process and Portfolio Management 2005 IBM Corporation处理服务器响应（续）处理服务器响应（续）在本例中，服务器返回邮编相应的城市和省份，中间用逗号分开：在本例中，服务器返回邮编相应的城市和省份，中间用逗号分开：4Tangshan,Hebei得到得到responseText并使用并使用JavaScript的的spl
65、it()函数从逗号分开，得到的函数从逗号分开，得到的数组放到数组放到response中，然后更新表单中的相应值中，然后更新表单中的相应值65Process and Portfolio Management 2005 IBM Corporation连接连接Web表单表单最后使用最后使用JavaScript事件函数触发事件函数触发Ajax调用：调用：输入框的输入框的onblur属性指定的函数当焦点离开时触发，属性指定的函数当焦点离开时触发，Ajax开始运行了。结果就会看到填完邮编后焦点移开时，表单的开始运行了。结果就会看到填完邮编后焦点移开时，表单的城市和省份信息突然更新了！城市和省份信息突然更新
66、了！66Process and Portfolio Management 2005 IBM Corporation编写服务器端组件编写服务器端组件服务器端使用服务器端使用JSP（当然可以使用（当然可以使用Servlet）根据传递的邮编，返回相应的城市和省份：）根据传递的邮编，返回相应的城市和省份：注意：注意：JSP中除了中除了JSP标签和标签和Java代码不要出现任何代码不要出现任何HTML标签，也不要出现换行和空白标签，也不要出现换行和空白字符，仅返回需要的响应结果，否则这些字符，仅返回需要的响应结果，否则这些HTML标签和空白字符也会作为响应文本的一部标签和空白字符也会作为响应文本的一部分
67、传递回客户端分传递回客户端67Process and Portfolio Management 2005 IBM Corporation小结小结Ajax应用的开发确实有些繁琐，实际上，现在有很多成熟稳定的应用的开发确实有些繁琐，实际上，现在有很多成熟稳定的Ajax工工具葙封装了以上诸多细节，是的具葙封装了以上诸多细节，是的Ajax编程更加容易。但是如果不知道应编程更加容易。但是如果不知道应用程序在做什么，就很难发现其中的问题用程序在做什么，就很难发现其中的问题XMLHttpRequest对象是对象是Ajax应用的核心，必须非常熟悉应用的核心，必须非常熟悉Ajax应用的基本流程：应用的基本流程：
68、4创建创建XMLHttpRequest对象对象4从从Web表单中获取需要的数据表单中获取需要的数据4设置要连接的设置要连接的URL4建立到服务器的连接建立到服务器的连接4设置服务器在完成后要运行的回调函数设置服务器在完成后要运行的回调函数4发送请求发送请求68Process and Portfolio Management 2005 IBM Corporation第三讲第三讲在请求和响应中使用在请求和响应中使用XML69Process and Portfolio Management 2005 IBM Corporation发送发送XML格式的请求格式的请求XMLHttpRequest是是Aj
69、ax应用程序中使用的基本对象。看应用程序中使用的基本对象。看起来它似乎是为通过起来它似乎是为通过HTTP请求发送请求发送XML或者以某种或者以某种XML格格式发出式发出HTTP请求而设计的，但实际上它要做的只不过是为请求而设计的，但实际上它要做的只不过是为客户机代码（在网页中通常是客户机代码（在网页中通常是JavaScript）提供一种发送）提供一种发送HTTP请求的方式，并不要求必须使用请求的方式，并不要求必须使用XML请求或响应请求或响应注意：虽然注意：虽然XML可以通过可以通过HTTP发送，但发送，但XML是一种数据格是一种数据格式而不是传输协议式而不是传输协议70Process and
70、 Portfolio Management 2005 IBM Corporation从客户机发送的从客户机发送的XML数据格式数据格式修改上一个邮编的例子，使用修改上一个邮编的例子，使用XML传递数据。将名传递数据。将名/值对转值对转化为化为XML数据格式：数据格式：4063000XML要求有一个根元素；如果使用文档片段（要求有一个根元素；如果使用文档片段（XML文档的文档的一部分）的话则需要一个封闭元素，将上面的一部分）的话则需要一个封闭元素，将上面的XML改为以改为以下方式（同时便于传递等多信息）：下方式（同时便于传递等多信息）：4063000471Process and Portfoli
71、o Management 2005 IBM Corporation向服务器发送向服务器发送XML请求中的数据必须手工格式化为请求中的数据必须手工格式化为XML对于对于XML最好使用最好使用POST请求，因为有些浏览器限制了请求，因为有些浏览器限制了 GET 请求字符请求字符串的长度，而串的长度，而XML可能很长可能很长告诉服务器要发送的是告诉服务器要发送的是XML而不是一般的名而不是一般的名/值对值对XML通过通过send()方法发送，而不是附加在请求方法发送，而不是附加在请求URL最后的参数最后的参数72Process and Portfolio Management 2005 IBM Co
72、rporation发送发送XML和普通文本的比较和普通文本的比较XML不是一种简洁、快速和节省空间的格式，和普通文本相比，不是一种简洁、快速和节省空间的格式，和普通文本相比，XML通常总会占用更多的空间，速度也更慢，因为需要在消息中通常总会占用更多的空间，速度也更慢，因为需要在消息中增加增加 XML 所需要的标签和语义，同时解析所需要的标签和语义，同时解析XML也比处理普通文也比处理普通文本慢本慢构造和维护构造和维护XML不是简单的事情不是简单的事情XML没有为请求增加任何东西，除了复杂性的问题之外，和普通没有为请求增加任何东西，除了复杂性的问题之外，和普通文本以及名文本以及名/值对相比，在请
73、求中使用值对相比，在请求中使用 XML实际上没有多少好处实际上没有多少好处（如果有的话）。实际上没有任何东西可用（如果有的话）。实际上没有任何东西可用XML而不能用普通文而不能用普通文本发送本发送一般地，只有当服务器仅接受一般地，只有当服务器仅接受XML时才需要发送时才需要发送XML73Process and Portfolio Management 2005 IBM Corporation第四讲第四讲使用使用JSON进行数据传输进行数据传输74Process and Portfolio Management 2005 IBM Corporation什么是什么是JSON？JSON (JavaS
74、cript Object Notation) 是是一种轻量级的数据交换格式，易于人阅一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，而且它是基于读和编写，同时也易于机器解析和生成，而且它是基于JavaScript 的的。 JSON采用完全独立于语言的文本格式，但是也使用了类似于采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括语言家族的习惯（包括C, C+, C#, Java, JavaScript 等）等）。这些特性使这些特性使JSON成为理想的数据交换语成为理想的数据交换语言言JSON有两种结构：有两种结构：4“名名/值值”对的集合（对的集合（A
75、collection of name/value pairs）。在不同的语言中，它被理）。在不同的语言中，它被理解为对象，结构，关联数组等解为对象，结构，关联数组等4值的有序列表（值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组）。在大部分语言中，它被理解为数组这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能75Process
76、and Portfolio Management 2005 IBM CorporationJSON的基本形式的基本形式对象是一个无序的对象是一个无序的“名名/值值”对集合。一个对象以对集合。一个对象以“”开始，开始，“”结束。每个结束。每个“名称名称”后跟一个后跟一个“:” ；“名名/值值”对之间使用对之间使用“,” 分隔：分隔：数组是值（数组是值（value）的有序集合。一个数组以）的有序集合。一个数组以“”开始，开始，“”结束。值之间使用结束。值之间使用“,”分分隔：隔：字符串（字符串（string）是由双引号包围的任意数量）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义
77、。字符的集合，使用反斜线转义。值（值（value）可以是双引号括起来的字符串（）可以是双引号括起来的字符串（string）、数值）、数值(number)、true、false、 null、对象（、对象（object）或者数组（）或者数组（array）。这些结构可以嵌套）。这些结构可以嵌套数值（数值（number）与）与C或者或者Java的数值非常相似。的数值非常相似。76Process and Portfolio Management 2005 IBM CorporationJSON示例示例下面的下面的JSON表示名称表示名称/值对值对：4 firstName: Brett 多个名称多个名称/
78、值对串在一起值对串在一起:4 firstName: Brett, lastName:McLaughlin, email: brettnewI 从语法方面来看，这与名称从语法方面来看，这与名称/值对相比并没有很大的优势，但是在这种情况下值对相比并没有很大的优势，但是在这种情况下 JSON更容易使用，而且可读性更好更容易使用，而且可读性更好当需要表示一组值时，当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性不但能够提高可读性，而且可以减少复杂性: “employees: firstName: Brett, lastName:McLaughlin, email: brettnew
79、I , firstName: Jason, lastName:Hunter, email: , firstName: Elliotte, lastName:Harold, email: 这比相应的这比相应的XML格式表示的数据更加简洁：格式表示的数据更加简洁：77Process and Portfolio Management 2005 IBM CorporationJSON示例（示例（cont.）相应的相应的XML格式：格式：4BrettMcLaughlinbrettnewIJasonHElliotteH478Process and Portfolio Management 2005 I
80、BM CorporationJSON vs. XML可读性可读性4JSON和和XML的可读性可谓不相上下，的可读性可谓不相上下，XML略占上风略占上风可扩展性可扩展性4XML天生有很好的扩展性，天生有很好的扩展性，JSON当然也有，没有什么是当然也有，没有什么是XML能扩展，能扩展，JSON不能的。不能的。编码难度编码难度4XML有丰富的编码工具，比如有丰富的编码工具，比如Dom4j、JDom等，等，JSON也有也有json.org提供的工具，但提供的工具，但是是JSON的编码明显比的编码明显比XML容易许多，即使不借助工具也能写出容易许多，即使不借助工具也能写出JSON的代码，可是要的代码，
81、可是要写好写好XML就不太容易了就不太容易了解码难度解码难度4XML的解析得考虑子节点父节点关系，让人头昏眼花，而的解析得考虑子节点父节点关系，让人头昏眼花，而JSON的解析难度几乎为零。的解析难度几乎为零。流行度流行度4XML已经被业界广泛的使用，而已经被业界广泛的使用，而JSON才刚刚开始，但在才刚刚开始，但在Ajax领域，领域，JSON凭借自身的凭借自身的优势有可能最终取代优势有可能最终取代XML79Process and Portfolio Management 2005 IBM Corporation在在JavaScript中中使用使用JSONJSON是是JavaScript原生格式
82、，这意味着在原生格式，这意味着在JavaScript中处中处理理JSON数据不需要任何特殊的数据不需要任何特殊的 API 或工具包。或工具包。将将JSON数据赋值给变量：数据赋值给变量：var company = “employees: firstName: Brett, lastName:McLaughlin, email: brettnewI , firstName: Jason, lastName:Hunter, email: , firstName: Elliotte, lastName:Harold, email: ;这样将创建一个这样将创建一个JavaScript对象对象80P
83、rocess and Portfolio Management 2005 IBM Corporation在在JavaScript中中使用使用JSON （cont.）以以JavaScript对象的方式访问数据，如获取第一个雇员的对象的方式访问数据，如获取第一个雇员的firstName信息：信息：4company.employees0.fristName正如可以用点号和括号访问数据，也可以按照同样的方式轻正如可以用点号和括号访问数据，也可以按照同样的方式轻松地修改数据：松地修改数据：4company.employees0.fristName=“Vincent”81Process and Portf
84、olio Management 2005 IBM Corporation客户端处理客户端处理JSON响应响应服务器端返回服务器端返回JSON相应的文本表示，如：相应的文本表示，如：4“city” : “Hefei”, “province” : “Anhui”客户端使用客户端使用eval()函数将函数将JSON文本转化为文本转化为JavaScript对象：对象：注意，使用额外的圆括号可使注意，使用额外的圆括号可使eval()函数将来源输入无条件函数将来源输入无条件地视为表达式进行解析。地视为表达式进行解析。然后从然后从JavaScript对象中取得相应的值：对象中取得相应的值：82Process and Portfolio Management 2005 IBM CorporationThank YouThank You！Q&A Time
