慧桥教育Ajax学习.pptx

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