T1：Javascript高级编程课件.ppt

1、Version ACCP5.0主讲人主讲人:童金浩童金浩Mail: Web:www.hf- QQ:157297480Page 2/27目标目标v了解了解ECMAScriptv Dom操作基础与高级应用操作基础与高级应用 v javascript中的面向对象中的面向对象 v json语法详解语法详解 v原生原生Ajax在在javascript中的应用中的应用 Page 3/27了解了解ECMAScriptPage 4/27一、一、 了解了解ECMAScriptv 历史历史 1995年年12月月升阳公司升阳公司与与网景通讯公司网景通讯公司一起引入了一起引入了JavaScript。1996年年3月，

2、网景通讯公司发表了支持月，网景通讯公司发表了支持JavaScript的的网景导航者网景导航者2.0。由于。由于JavaScript作为网页的客户面脚本语言非常成功，作为网页的客户面脚本语言非常成功，微软微软于于1996年年8月引入月引入了了Internet Explorer3.0，这个软件支持一个，这个软件支持一个“约约”与与JavaScript相容的相容的JScript。 1996年年11月网景通讯公司将月网景通讯公司将JavaScript提交给欧洲计算机制造商协会提交给欧洲计算机制造商协会进行标准化。进行标准化。ECMA-262的第一个版本于的第一个版本于1997年年6月被月被Ecma组织

3、采纳。组织采纳。 ECMAScript是由是由ECMA-262标准化的脚本语言的名称。标准化的脚本语言的名称。JavaScript和和JScript与与ECMAScript相容，但包含超出相容，但包含超出ECMAScript的功能。的功能。 Page 5/27v版本版本 至今为止有三个至今为止有三个ECMA-262版本（版本（edition）发）发表，版本表，版本3的修订版的修订版3.1和第和第4版正在工作中。版正在工作中。v各浏览器厂商对各浏览器厂商对ECMA的支持的支持 许多程序，尤其是许多程序，尤其是网页浏览器网页浏览器支持支持ECMAScript。浏览器中的。浏览器中的ECMAScri

4、pt实现添加实现添加了与了与文档对象模型文档对象模型的接口，可以通过脚本改变网的接口，可以通过脚本改变网页的内容、结构和样式。页的内容、结构和样式。Page 6/27vJavaScript之未来之未来 JS依旧是主流前端技术依旧是主流前端技术,正在研发的最新版本是正在研发的最新版本是ECMAScript4.0,加入了诸如加入了诸如Class，Interface，Package, Namespace以及以及Block等等。感觉等等。感觉JavaScript 2.0将会变成和将会变成和Java越来越接近的一越来越接近的一种语言（这里指的是种语言（这里指的是OO语法语法),类似于类似于ActionS

5、cript, Adobe已经捐献了已经捐献了ActionScript Virtual Machine 2的源代码与的源代码与Mozilla共同进行共同进行JavaScript 2.0 引擎的开发引擎的开发 Page 7/27v ECMAScript部分语法解析部分语法解析1. 基本数据类型基本数据类型 Page 8/27v Undefined型型 Undefined型即为未定义类型，用于不存在或型即为未定义类型，用于不存在或者没有被赋初始值得变量或对象的属性者没有被赋初始值得变量或对象的属性. 如下列语句定义变量如下列语句定义变量name为为Undefined型：型： var name; 定义

6、定义Undefined型变量后，可在后续的脚本代型变量后，可在后续的脚本代码中对其进行赋值操作，从而自动获得由其值决码中对其进行赋值操作，从而自动获得由其值决定的数据类型。定的数据类型。Page 9/27vNull型型 Null型数据表示空值，作用是表明数据空缺的型数据表示空值，作用是表明数据空缺的值，一般在设定已存在的变量值，一般在设定已存在的变量(或对象的属性或对象的属性)为为空时较为常用。区分空时较为常用。区分Undefined和和Null型数据比型数据比较麻烦，一般将较麻烦，一般将Undefined型和型和Null型等同对待。型等同对待。Page 10/27v 两者的区别：两者的区别：

7、1、null 数据类型数据类型 关键字关键字 null 不能用作函数或变量的名称。不能用作函数或变量的名称。 包含包含 null 的变量包含的变量包含“无值无值”或或“无对象无对象”。换句话说，。换句话说，该变量没有保存有效的数、字符串、该变量没有保存有效的数、字符串、 boolean、数组或对象。可以通过给一个变量赋、数组或对象。可以通过给一个变量赋 null 值来值来清除变量的内容清除变量的内容2、Undefined 数据类型数据类型 如下情况使返回如下情况使返回 undefined 值：值： 对象属性不存在，对象属性不存在， 声明了变量但从未赋值声明了变量但从未赋值 null是关键字；是

8、关键字；undefined是是Global对象的一个属性对象的一个属性Page 11/273、null是对象是对象(空对象空对象, 没有任何属性和方法没有任何属性和方法)；undefined是是undefined类型的值。试试下面的代类型的值。试试下面的代码：码： document.writeln(typeof null); /return object document.writeln(typeof undefined); /return undefined 4、对象模型中，所有的对象都是、对象模型中，所有的对象都是Object或其子类或其子类的实例，但的实例，但null对象例外：对象例外：

9、 document.writeln(null instanceof Object); /return false Page 12/275、null“等值等值(=)”于于undefined，但不，但不“全等值全等值(=)”于于undefined： document.writeln(null = undefined); /return true document.writeln(null = undefined); /return false6、运算时、运算时null与与undefined都可以被类型转换为都可以被类型转换为false，但不等，但不等值于值于false： document.writ

10、eln(!null, !undefined); /return true,true document.writeln(null=false); /return false document.writeln(undefined=false); /return falsPage 13/27vFunction型型 Function型表示函数，可以通过型表示函数，可以通过new操作符和构操作符和构造函数造函数Function()来动态创建所需功能的函数，来动态创建所需功能的函数，并为其添加函数体。并为其添加函数体。var myFuntion = new Function() statements; P

11、age 14/27v如何扩展基础数据类型如何扩展基础数据类型 Demo1Page 15/27Dom操作基础与高级应用操作基础与高级应用Page 16/27DOM基础基础一、一、DOM基础基础 DOM给予开发者空前的对给予开发者空前的对HTML的访问能力的访问能力,并使开发者能将并使开发者能将HTML作作为为XML来处理和查看来处理和查看.DOM代表着由微软公司和代表着由微软公司和Netscape公司所引领公司所引领的动态的动态1.1、DOM的诞生的诞生 尽管尽管DOM很大程度上受到浏览器中动态很大程度上受到浏览器中动态HTML发展的影响发展的影响,但但W3C还还是将其首先应用于是将其首先应用于

12、XML.1.2、XML简介简介 XML(可扩展标记语言可扩展标记语言)是从是从SGML(标准通用语言标准通用语言)发展而来发展而来.SGML的的主要目的是定义使用标签来表示数据的标记语言的语法。主要目的是定义使用标签来表示数据的标记语言的语法。 基于基于SGML语言的最著名的实现就是原始的语言的最著名的实现就是原始的HTML。 SGML常用来定义针对常用来定义针对HTML的文档类型定义的文档类型定义(DTD),同时它也常用来同时它也常用来编写编写XML的的DTD。SGML的问题在于的问题在于,这允许出现一些奇怪的语法这允许出现一些奇怪的语法,这这让创建让创建HTML中的的解析器成为一个大难题中

13、的的解析器成为一个大难题. Page 17/27p 某些起始标签不允许出现结束标签。如：某些起始标签不允许出现结束标签。如：HTML中的中的.p 某些起始标签可以选择性的出现结束标签或者隐含了结束某些起始标签可以选择性的出现结束标签或者隐含了结束标签标签.如：如：HTML中的中的,当出现另一个当出现另一个时，便假设在时，便假设在这之前有一个结束标签这之前有一个结束标签p 某些起始标签要求必须出现结束标签某些起始标签要求必须出现结束标签.如如HTML中的中的p 标签可以以任何顺序嵌套。即使结束标签不按照起始标签标签可以以任何顺序嵌套。即使结束标签不按照起始标签的逆序出现也是允许的。如：的逆序出现

14、也是允许的。如：This is asample string 是正确的是正确的p 某些特性要求必须包含值。如：某些特性要求必须包含值。如：中的中的src特性特性.Page 18/27p某些特性不要求一定要有值。发某些特性不要求一定要有值。发中中的的nowrap属性属性p定义特性的两边有没有双引号都是可以的，所以定义特性的两边有没有双引号都是可以的，所以和和都是都是允许的允许的.以上种种问题导致了以上种种问题导致了SGML语言的解析器变成了一语言的解析器变成了一项艰巨的任务项艰巨的任务.以这些问题作为出发点。以这些问题作为出发点。XML逐渐逐渐进入我们的视线进入我们的视线.Page 19/27

15、XML去掉了之前许多开发人员头疼的去掉了之前许多开发人员头疼的SGML的随的随意语法。在意语法。在XML中，采用了如下的语法中，采用了如下的语法:p任何的起始标签都必须有一个结束标签任何的起始标签都必须有一个结束标签p可以采用另外一种简化语法可以采用另外一种简化语法(/),如：如：XML解解析器会将其翻译成析器会将其翻译成p标签必须按合适的顺序进行嵌套标签必须按合适的顺序进行嵌套p所有的特性都必须有值所有的特性都必须有值p所有的特性都必须在值的周围加上双引号所有的特性都必须在值的周围加上双引号 这些特征使得开发一个这些特征使得开发一个XML解析器要简便得多，解析器要简便得多，仅仅在仅仅在XML

16、出现后的前六年就衍生出多种不同的出现后的前六年就衍生出多种不同的语言语言,包括包括MathML、SVG、RDF、RSS、SOAP、XSLT,而同时也将而同时也将HTML改进为改进为XHTMLPage 20/27Dom操作基础与高级应用操作基础与高级应用Node接口也定义了一些所有节点类型都包含的属性和方法接口也定义了一些所有节点类型都包含的属性和方法.属性属性/方法方法类型返回类型类型返回类型说明说明nodeNameString节点的名字节点的名字nodeValueString节点的值节点的值nodeTypeNumber节点的类型常量值之一节点的类型常量值之一firstChildNode指向指

17、向childNodes列表列表的第一个节点的第一个节点lastChildNode指向指向childNodes列表列表中的最后一个节点中的最后一个节点childNodesNodeList所有子节点的列表所有子节点的列表previousSiblingNode指向前一个兄弟节点指向前一个兄弟节点,如果这个节点是第一个，如果这个节点是第一个，则返回为则返回为nullPage 21/27Dom操作基础与高级应用操作基础与高级应用属性属性/方法方法类型返回类型类型返回类型说明说明nextSiblingNode指向后一个兄弟节点，指向后一个兄弟节点，如果其已经是最后一个如果其已经是最后一个了，则返回为了，则

18、返回为nullhasChildNodesBoolean当当childNodes包含一包含一个或多个节点地，返回个或多个节点地，返回真真attributesNamedNodeMap包含了代表一个元素的包含了代表一个元素的特性的特性的Attr对象，仅用对象，仅用于于Element节点节点parentNodeNode得到当前节点的父节点得到当前节点的父节点appendChild(node) Node将将node添加到添加到childNodes的末尾的末尾Page 22/27Dom操作基础与高级应用操作基础与高级应用removeChild(node)Node从从childNodes中删除中删除node

19、replaceChild(newnode,oldnode)Node将将childNodes中的中的oldnode替换成替换成newnodeinsertBefore(newnode,refnode)Node在在childNodes中的中的refnode之前插入之前插入newnodePage 23/27Dom操作基础与高级应用操作基础与高级应用 Demo2: MyOffice里面的一个赋权限的例子里面的一个赋权限的例子Page 24/27 Demo3: 结合结合Ajax进行下拉列表框的三级联动进行下拉列表框的三级联动Page 25/27JavaScript中的面向对象编程中的面向对象编程Page

20、26/27Javascript面向对象编程面向对象编程1、面向对象语言的要求、面向对象语言的要求 (1)封装封装把相关的信息（无论数据或方法）存储在对象中的能力把相关的信息（无论数据或方法）存储在对象中的能力 (2)聚集聚集把一个对象存储在另一个对象内的能力把一个对象存储在另一个对象内的能力 (3) 继承继承由另一个类（或多个类由另一个类（或多个类)得来类的属性和方法的能力得来类的属性和方法的能力 (4)多态多态编写能以多种方法运行的函数或方法的能力编写能以多种方法运行的函数或方法的能力ECMAScript支持这些要求，因此可被看作面向对象的支持这些要求，因此可被看作面向对象的.2、对象的实例

21、化、对象的实例化 var obj = new Object() var ostringobj = new String()ECMAScript中也可以把（）去掉中也可以把（）去掉 var obj = new object; var ostringobj = new String;3、对象废除、对象废除 ECMAScript中有无用存储单元收集程序，意味着不必专门销毁对象中有无用存储单元收集程序，意味着不必专门销毁对象来释放内存来释放内存. 也可强制废除对象：也可强制废除对象：eg: var obj = new Object(); obj = null Page 27/27Javascript面

22、向对象编程面向对象编程5、对象类型、对象类型 5.1本地对象本地对象 Object Array Function String Boolean Number Date RegExp Error EvalError RangeError ReferenceError SyntaxError TypeError URIError 5.2 自定义对象自定义对象Page 28/27Javascript面向对象编程面向对象编程6、作用域、作用域 对对ECMAScript来说，讨论作用域几乎毫无意义。来说，讨论作用域几乎毫无意义。ECMAScript只存只存在一种作用域在一种作用域(公有作用域公有作用域)

23、 许多开发都制定了一个规约许多开发都制定了一个规约:私有的属性建议前后加下划线，如：私有的属性建议前后加下划线，如：obj._color_ = “red”;7、静态作用域并非静态的、静态作用域并非静态的 严格来说，严格来说，ECMAScript并没有静态作用域，不过，它可以给构造函并没有静态作用域，不过，它可以给构造函数提供属性和方法数提供属性和方法. 构造函数是函数，函数是对象，对象可以有属性构造函数是函数，函数是对象，对象可以有属性和方法。和方法。 如：如：function sayHi() alert(“hi”); ; sayHi.alternate = function() alert(

24、“hellow”);调用：调用：sayHi(); sayHi.alternate();Page 29/27JavaScript中的封装中的封装、关键字、关键字this 在在ECMAScript中，要掌握的最重要的概念之中，要掌握的最重要的概念之一是关键字一是关键字this的用法的用法. 它用在对象的方法中，关键字它用在对象的方法中，关键字this总是指向调用总是指向调用该方法的对象：该方法的对象： eg: var oCar = new Object(); oCar.color=“red”; oCar.showColor=function() alert(this.color); /等价于等价于

25、 oCar.color Page 30/27JavaScript中的封装中的封装说明：利有说明：利有this,可在任意多个地方重用同一个函数可在任意多个地方重用同一个函数.如：如：function ShowColor() alert(this.Color); var oCar1 = new Object(); oCar1.Color = “red”; oCar1.ShowColor = ShowColor; var oCar2 = new Object(); oCar2.Color = “blue”; oCar2.ShowColor=ShowColor; oCar1.ShowColor();

26、/ output “red” oCar2.ShowColor(); /outpub “blue”注意：引用对象的属性时必须使用注意：引用对象的属性时必须使用this. eg: function ShowColor() alert(Color); /error Page 31/27JavaScript中的封装中的封装v 利用构造函数原型法封装利用构造函数原型法封装JS类类联合使用构造函数和原型方式联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象就可像用其他程序设计语言一样创建对象.这种概念非常简单这种概念非常简单,即用构造函数定义对象的所有非函数属性即用构造函数定义对象的所有非函

27、数属性,用原型用原型方式定义对象的函数属性方式定义对象的函数属性(方法方法).结果所有函数都只创建一次结果所有函数都只创建一次,而每个而每个对象都具有自己的对象属性实例对象都具有自己的对象属性实例.eg:function Car(sColor,iDoors,iMpg) this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.drivers = new Array(); Car.prototype.ShowColor = function() alert(this.color);Page 32/27JavaScript中的封

28、装中的封装/Callvar oCar1 = new Car(“red”,4,23);var oCar2 = new Car(“blue”,3,25);oCar1.drivers.push(“a”);oCar2.drivers.push(“b”);alert(oCar1.drivers); /output “a”;alert(oCar2.drivers); /output “b”;Page 33/27JavaScript中的继承中的继承vJavaScript中的继承中的继承特点：特点：1、ECMAScript中并没有像其他语言那样严格地定中并没有像其他语言那样严格地定义抽象类义抽象类.2、所有类

29、的方法都是、所有类的方法都是public的作用域的作用域3、继承的方式不止一种、继承的方式不止一种,支持多重继承支持多重继承严格讲，严格讲，javascript的继承机制并不是明确规定的，的继承机制并不是明确规定的，而是通过模仿实现的。而是通过模仿实现的。Page 34/27v 对象冒充对象冒充 其原理如下：构造函数使用其原理如下：构造函数使用this关键字给所有属性和方法赋值关键字给所有属性和方法赋值.因为构造函数只因为构造函数只是一个函数，所以可使用是一个函数，所以可使用ClassA的构造函数成为的构造函数成为ClassB的方法，然后调用的方法，然后调用它它.ClassB就会收到就会收到C

30、lassA的构造函数中定义的属性和方法的构造函数中定义的属性和方法.eg1:function ClassA(sColor) this.color = sColor; this.sayColor = function() alert(this.color); function ClassB(sColor) this.newMethod = ClassA; this.newMethod(sColor); delete this.newMethod;Page 35/27v 注意注意:所有的新属性和新方法都必须在删除了新方法的代码行后定义所有的新属性和新方法都必须在删除了新方法的代码行后定义.否则否则

31、,可能会覆盖超类的相关属性和方法可能会覆盖超类的相关属性和方法.function ClassA(sColor) this.color = sColor; this.sayColor = function() alert(this.color); function ClassB(sColor,sName) this.newMethod = ClassA; this.newMethod(sColor); delete this.newMethod; this.name = sName; this.sayName = function() alert(this.name); Page 36/27/c

32、allVar objA = new ClassA(“red”); Var objB = new ClassB(“blue”,”zhang”); objA.sayColor(); /output “red”;objB.sayColor(); /output “blue”;objB.sayName(); /output “zhang”;v模仿多重继承模仿多重继承eg:function ClassA(sColor) this.color = sColor; this.sayColor=function() alert(this.color); function ClassB(sName) this.

33、name = sName; this.sayName=function() alert(this.name); Page 37/27function ClassC(sColor,sName,sModel) this.newMethod = ClassA; this.newMethod(sColor); delete this.newMethod; this.newMethod =ClassB; this.newMethod(sName); delete this.newMethod; this.model=sModel; this.sayModel = function() alert(thi

34、s.model); v/callvvar cObj = new ClassC(red,zhang,T40);vcObj.sayColor(); /output “red”vcObj.sayName(); /output “zhang”;vcObj.sayModel(); /output “T40”;Page 38/27注意：多重继承防止出现父类同名问题注意：多重继承防止出现父类同名问题v 由于这种方式的流行，由于这种方式的流行，ECMAScript的第三版为的第三版为Function对象加入了两个新方法对象加入了两个新方法 Call()和和apply()2、Call()方法方法 call方法是

35、与经典的对象冒充方法最相似的方法方法是与经典的对象冒充方法最相似的方法.它的第它的第一个参数用作一个参数用作this的对象的对象,其他参数都直接传递给函数自身其他参数都直接传递给函数自身.eg:function sayColor(sprev,snext) alert(sprev+this.color+snext);var obj = new Object();obj.color = “red”;sayColor.call(obj,”The color is ”,”a very nice color”);/output “The color is red ,a very nice color”P

36、age 39/27v利用利用call关键字实现继承关键字实现继承vfunction ClassA(sColor)vv this.color = sColor;v this.sayColor=function()v v alert(this.color);v vvfunction ClassB(sColor,sName)vv / this.newMethod=ClassA;v / this.newMethod(sColor);v / delete this.newMethod;v ClassA.call(this,sColor);v this.name = sName;v this.sayNam

37、e= function()v v alert(this.name);v vv/callvvar objB = new ClassB(“red”,”zhang”);vobjB.sayColor(); /output “red”v objB.sayName(); /output “zhang”Page 40/27v apply()方法方法apply()方法有两个参数方法有两个参数,用作用作this的对象和要传递给函数的参数的数组的对象和要传递给函数的参数的数组.eg:function sayColor(sprev,snext) alert(sprev+this.color+snext);var o

38、bj = new Object();obj.color =“red”;sayColor.apply(obj,new Array(“The Color is “,” a very nice color”);/output “The color is red ,a very nice color”Page 41/27v利用利用apply关键字实现继承关键字实现继承vfunction ClassA(sColor)vv this.color = sColor;v this.sayColor=function()v v alert(this.color);v vvfunction ClassB(sCol

39、or,sName)vv / this.newMethod=ClassA;v / this.newMethod(sColor);v / delete this.newMethod;v ClassA.apply(this,new Array(sColor);v this.name = sName;v this.sayName= function()v v alert(this.name);v vv/callvvar objB = new ClassB(“red”,”zhang”);vobjB.sayColor(); /output “red”v objB.sayName(); /output “z

40、hang”Page 42/27v原链型原链型利用利用prototype对象来实现对象来实现.function ClassA()ClassA.prototype.color = “red”;ClassA.prototype.sayColor = function() alert(this.color);function ClassB()ClassB.prototype = new ClassAPage 43/27v 注意注意,调用调用ClassA的构造函数时的构造函数时,没有给它传递参数没有给它传递参数.这在原型链中是标准做法这在原型链中是标准做法,要确保构造函数没有任何参数要确保构造函数没有任

41、何参数.v 另另:与对象冒充相似与对象冒充相似,子类的所有属性和方法都必须出现在子类的所有属性和方法都必须出现在prototype属性补赋属性补赋值后值后,因为在它之前赋值的所有方法都会被删除因为在它之前赋值的所有方法都会被删除.eg:function ClassB()ClassB.prototype = new ClassA();ClassB.prototype.name = “”;ClassB.prototype.sayName = function() alert(this.name);v v /callv var objA = new ClassA();v var objB = new

42、 ClassB();v objA.color = blue;v objB.color = yellow;v objB.name = zhang;v objA.sayColor(); /output “blue”v objB.sayColor(); /output “yellow”;v objB.sayName(); /output “zhang”Page 44/27json语法详解语法详解Page 45/27vJSON (JavaScript Object Notation) 是是一种轻量级的数据交换格式，一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，而且它是基于易于人

43、阅读和编写，同时也易于机器解析和生成，而且它是基于JavaScript 的的。 JSON采用完全独立于语言的文本格式，但是也使用采用完全独立于语言的文本格式，但是也使用了类似于了类似于C语言家族的习惯（包括语言家族的习惯（包括C, C+, C#, Java, JavaScript 等）等）。这些特性使这些特性使JSON成为理想的数据交换语言成为理想的数据交换语言vJSON有两种结构：有两种结构： “名名/值值”对的集合（对的集合（A collection of name/value pairs）。在不同的语言中，）。在不同的语言中，它被理解为对象，结构，关联数组等它被理解为对象，结构，关联数组

44、等 值的有序列表（值的有序列表（An ordered list of values）。在大部分语言中，它被理解）。在大部分语言中，它被理解为数组为数组v这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能换成为可能Page 46/27v对象是一个无序的对象是一个无序的“名名/值值”对集合。一个对象以对集合。一个对象以“”开始，开始，“”结束。每个结束。每个“名称名称”后跟一个后跟一个“:”

45、；“名名/值值”对之间使用对之间使用“,” 分隔：分隔：v数组是值（数组是值（value）的有序集合。一个数组以）的有序集合。一个数组以“”开始，开始，“”结束。值之间使用结束。值之间使用“,”分隔：分隔：v字符串（字符串（string）是由双引号包围的任意数量）是由双引号包围的任意数量Unicode字符的集合，使用反斜字符的集合，使用反斜线转义。线转义。v值（值（value）可以是双引号括起来的字符串（）可以是双引号括起来的字符串（string）、数值）、数值(number)、true、false、 null、对象（、对象（object）或者数组（）或者数组（array）。这些结构可以嵌套）

46、。这些结构可以嵌套v数值（数值（number）与）与C或者或者Java的数值非常相似。的数值非常相似。Page 47/27v下面的下面的JSON表示名称表示名称/值对值对： firstName: Brett v多个名称多个名称/值对串在一起值对串在一起: firstName: Brett, lastName:McLaughlin, email: brettnewI 从语法方面来看，这与名称从语法方面来看，这与名称/值对相比并没有很大的优势，但是在这种情况下值对相比并没有很大的优势，但是在这种情况下 JSON更容易使用，而且可读性更好更容易使用，而且可读性更好v当需要表示一组值时，当需要表示一组

47、值时，JSON 不但能够提高可读性，而且可以减少复杂性不但能够提高可读性，而且可以减少复杂性: “employees: firstName: Brett, lastName:McLaughlin, email: brettnewI , firstName: Jason, lastName:Hunter, email: , firstName: Elliotte, lastName:Harold, email: 这比相应的这比相应的XML格式表示的数据更加简洁：格式表示的数据更加简洁：Page 48/27v 相应的相应的XML格式：格式： Brett McLaughlin brettnewI J

48、ason Hunter Elliotte Harold Page 49/27v可读性可读性 JSON和和XML的可读性可谓不相上下，的可读性可谓不相上下，XML略占上风略占上风v可扩展性可扩展性 XML天生有很好的扩展性，天生有很好的扩展性，JSON当然也有，没有什么是当然也有，没有什么是XML能扩展，能扩展，JSON不能的。不能的。v编码难度编码难度 XML有丰富的编码工具，比如有丰富的编码工具，比如Dom4j、JDom等，等，JSON也有也有json.org提供的提供的工具，但是工具，但是JSON的编码明显比的编码明显比XML容易许多，即使不借助工具也能写出容易许多，即使不借助工具也能写出

49、JSON的代码，可是要写好的代码，可是要写好XML就不太容易了就不太容易了v解码难度解码难度 XML的解析得考虑子节点父节点关系，让人头昏眼花，而的解析得考虑子节点父节点关系，让人头昏眼花，而JSON的解析难度的解析难度几乎为零。几乎为零。v流行度流行度 XML已经被业界广泛的使用，而已经被业界广泛的使用，而JSON才刚刚开始，但在才刚刚开始，但在Ajax领域，领域，JSON凭借自身的优势有可能最终取代凭借自身的优势有可能最终取代XMLPage 50/27vJSON是是JavaScript原生格式，这意味着在原生格式，这意味着在JavaScript中处理中处理JSON数据不需要任何特殊的数据不

50、需要任何特殊的 API 或工具包。或工具包。v将将JSON数据赋值给变量：数据赋值给变量：var company = “employees: firstName: Brett, lastName:McLaughlin, email: brettnewI , firstName: Jason, lastName:Hunter, email: , firstName: Elliotte, lastName:Harold, email: ;这样将创建一个这样将创建一个JavaScript对象对象Page 51/27v以以JavaScript对象的方式访问数据，如获取第一对象的方式访问数据，如获取第一