资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,成都传智播客 cd,.,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,Ajax,基础知识介绍,用传统方式校验用户名是否重复,传统方式校验用户名是否重复的设计分析,RegUserUI,Reguser.jsp,RegUser,Main.jsp,注册,校验用户名,是否重复,VerifyUserName,?,返回怎样的,一个页面,传统实现方式,1,：在原来的主窗口中回显结果,问题,：,1,：回显的页面在原来网页效果的基础上增加一点内容，可是服务器的响应结果会覆盖掉窗口中原来显示的那个网页内容，如果服务器在响应时仅仅回送要新增的内容，则会覆盖掉原来的整个网页，怎样做才能看到原来网页效果的基础上增加一点内容？,2,：怎样用,javascript,代码将请求发送给服务器，在发送请求时，怎样将文本框中填写的用户名作为参数传递给服务器。,3,：怎样在,标签中触发,javascript,函数调用？触发函数时要注意返回值。,实现思路：,让,VerifyUserName,仍然返回,Reguser.jsp,，这时候需要在,Reguser.jsp,页面中增加一条有时候显示，有时候不显示的提示信息。或者是通过生成一段,javascript,代码，然后用一个弹出对话框来显示提示信息。先用浏览器直接测试,VerifyUserName,。,在,标签中可以使用,javascript,协议或,onclick,事件来触发,javascript,函数调用，先用静态数据测试一下，然后用,window.location.href,属性（,replace,方法）或模拟表单提交的方式向服务器发送请求，把两种方式都要做一下。,缺点：,要为电脑增加一个鼠标，由于浏览器的特点是买回鼠标就会覆盖掉原来的电脑，所以，要想显示出电脑加鼠标的效果，只能同时去买回一个电脑和鼠标。,好比舞台要切换帷幕一样，上一场的帷幕上贴的是花，当下一场要换成贴龙时，最快的方式不是把原来帷幕上的花揭下来再换上龙，而是做两个帷幕，直接把上一个帷幕收起，同时把下一个帷幕拉开。每次都送出一个帷幕，帷幕上贴不同内容。,传统实现方式,2,：,用弹出的新窗口回显结果,实现,方式：在弹出窗口中回显结果,弹出窗口演示,模态对话框演示,实现思路,：,由弹出窗口打开一个网页的方式发出校验用户名的请求，回送的应该是一个网页，只是这个网页的内容很简单，但是，如果要有关闭按钮，必须加上相应的按钮和,javascript,代码。,模态对话框的好处在于避免了受浏览器显示新窗口的方式的差异的影响，并可要求用户必须关闭弹出窗口后才能进行其他操作。,特点：,服务器回送的结果给新窗口，不影响原始窗口。,一个帷幕收起，同时把下一个帷幕拉开。每次都送出一个帷幕，帷幕上贴不同内容。,什么是,Ajax,Ajax,的概念：,是,asynchronous,javascript,and xml,的简写。,不是一项具体的技术，而是几门技术的综合应用。,其核心只不过是要在,javascript,中调用一个叫,XMLHttpRequest,的,javascript,类，这个类可以与,Web,服务器使用,HTTP,协议进行交互，程序不通过浏览器发出请求，而是用这个特殊的,JavaScript,对象发送请求，再由这个,JavaScript,对象接收响应，并将响应结果用,DOM,编程方式挂到原来的网页上（见下页的图），从而使得,javascript,借助这个,api,类可以干出比较有意义的事情。,XMLHttpRequest,对象在网络上的俗称为,XHR,对象。,Ajax,的特点,Ajax,的特点：,浏览器中显示一个页面后，这个页面以后一直不改变，所有的操作请求都由这个网页中的,javascript,代码发出，所有的结果都由,javascript,代码接受并增加到这个页面上，浏览器窗口中显示的网页始终都是初始的那个网页。（见下面两页的图）,增强用户体验：可以在用户浏览网页的同时与服务器进行异步交互和实现网页内容的局部更新，例如，,126,邮箱密码安全性判断和,google,suggest,；可以按需取数据，改善页面显示速度，例如，树状菜单和,babasport,的首页（整合多个信息的页面）；视觉流畅的定时刷新，例如，聊天室。（用下几页的图举例说明）,学习,ajax,和应用,ajax,的难点不在于,XMLHttpRequest,本身，而在于,javascript,和,DOM,编程，没有较好的,javascript,和,DOM,编程基础，你就很难做出有意义的,ajax,应用。,浏览器的普通交互方式,Ajax,的交互方式,同步交互和异步交互,举个例子：普通,B/S,模式,(,同步,) AJAX,技术,(,异步,),* 同步：提交请求,-,等待服务器处理,-,处理完毕返回 这个期间客户端浏览器不能干任何事,* 异步,:,请求通过事件触发,-,服务器处理（这时浏览器仍然可以作其他事情）,-,处理完毕,同步是指：发送方发出数据后，等接收方发回响应以后才发下一个,数据包的通讯方式。异步是指：发送方发出数据后，不等接收方发回响应，接着发送下,个数据包的通讯方式,易懂的理解,:,异步传输,:,你传输吧，我去做我的事了，传输完了告诉我一声 同步传输,:,你现在传输，我要亲眼看你传输完成，才去做别的事,AJAX,案例之,google,suggest,AJAX,案例之,Google Maps,Ajax,的应用场景：财富通网吧充值界面,成都,传智播客,cd,.,Ajax,的应用场景：密码安全性检测,Ajax,的应用场景：RIA应用,Ajax,的应用场景：邮箱系统,Ajax,的应用场景：蓝源批发零售业连锁管理系统,究竟什么是Ajax,Ajax,：一种,不用刷新整个页面便可与服务器通讯的办法,图,1 Web,的传统模型。客户端向服务器发送一个请求，服务器返回整个页面，如此反复,图,2,在,Ajax,模型中，,数据在客户端与服务器之间独立传输。服务器不再返回整个页面,Ajax的实现方式,不用刷新整个页面便可与服务器通讯的办法：,Flash,Java applet,框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面,隐藏的,iframe,XMLHttpRequest,：该对象是对,JavaScript,的一个扩展，可使网页与服务器进行通信。是创建,Ajax,应用的最佳选择。,实际上通常把,Ajax,当成,XMLHttpRequest,对象的代名词,Ajax,的工作原理,Ajax,的核心是,JavaScript,对象,XmlHttpRequest,。,该对象在,Internet Explorer 5,中首次引入，它是一种支持异步请求的技术。简而言之，,XmlHttpRequest,使您可以使用,JavaScript,向服务器提出请求并处理响应，而不阻塞用户,。,Ajax,的工作原理,AJAX,采用异步交互过程。,AJAX,在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理,等待,处理,等待缺点。,用户的浏览器在执行任务时即装载了,AJAX,引擎。,AJAX,引擎用,JavaScript,语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。,AJAX,引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流,。,现在，可以用,Javascript,调用,AJAX,引擎来代替产生一个,HTTP,的用户动作，,内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给,AJAX,来执行。,使用,AJAX,，可以为,JSP,、开发人员、终端用户带来可见的便捷：,用户界面,AJAX,引擎,服务器,用户界面,服务器,AJAX,包含的技术,AJAX:(Asynchronous,JavaScript and XML),并不是一项新技术,其实是多种技术的综合，包括,Javascript,、,XHTML,和,CSS,、,DOM,、,XML,和,XMLHttpRequest,.,服务器端语言,：服务器需要具备向浏览器发送特定信息的能力。,Ajax,与服务器端语言无关,。,XML,(,eXtensible,Markup Language,，可扩展标记语言,),是一种描述数据的格式。,AJAX,程序需要某种格式化的格式来在服务器和客户端之间传递信息，,XML,是其中的一种选择,XHTML,（,eXtended,Hypertext Markup Language,使用扩展超媒体标记语言）和,CSS,（,Cascading Style Sheet,级联样式单）,标准化呈现；,DOM,（,Document Object Model,文档对象模型）,实现动态显示和交互；,使用,XMLHTTP,组件,XMLHttpRequest,对象,进行,异步数据读取,使用,JavaScript,绑定和处理所有数据,AJAX,的缺陷,AJAX,不是完美的技术。也存在缺陷,：,1 AJAX,大量使用了,Javascript,和,AJAX,引擎，而这个取决于浏览器的支持。,IE5.0,及以上、,Mozilla1.0,、,NetScape7,及以上版本才支持，,Mozilla,虽然也支持,AJAX,，但是提供,XMLHttpRequest,的方式不一样。所以，使用,AJAX,的程序必须测试针对各个浏览器的兼容性。,2 AJAX,更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。,3,对流媒体的支持没有,FLASH,、,Java Applet,好。,4,一些手持设备（如手机、,PDA,等）现在还不能很好的支持,Ajax,。,XMLHttpRequest,对象,XMLHttpRequest,对象,XMLHttpRequest,是,XMLHTTP,组件的对象，通过这个对象，,AJAX,可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。,XMLHttpRequest,最早是在,IE5,中以,ActiveX,组件的形式实现的。非,W3C,标准,.,创建,XMLHttpRequest,对象（,由于非标准所以实现方法不统一,）,Internet Explorer,把,XMLHttpRequest,实现为一个,ActiveX,对象,其他浏览器（,Firefox,、,Safari,、,Opera,）把它实现为一个本地的,JavaScript,对象。,XMLHttpRequest,在不同浏览器上的实现是兼容的,，所以可以用同样的方式访问,XMLHttpRequest,实例的属性和方法，而不论这个实例创建的方法是什么。,XMLHttpRequest,对象初始化,function,createXmlHttpRequest,(),var,xmlhttp,= null;,try,/,Firefox, Opera 8.0+, Safari,xml,h,ttp,=,new,XMLHttpRequest,();,catch(e),/IE,IE7.0,以下的浏览器以,ActiveX,组件的方式来创建,XMLHttpRequest,对象,var,MSXML =,MSXML2.XMLHTTP.6.0,MSXML2.XMLHTTP.5.0,MSXML2.XMLHTTP.4.0,MSXML2.XMLHTTP.3.0,MSXML2.XMLHTTP,Microsoft.XMLHTTP;,for(var,n = 0; n ,MSXML.length,; n +),try,xmlhttp,= new,ActiveXObject(MSXMLn,);,break;,catch(e,),return xmlhttp;,XMLHttpRequest,对象方法,方法,描述,abort(),停止当前请求,getAllResponseHeaders,(),把,http,请求的所有响应首部作为键,/,值对返回,getResponseHeader(headerLabel,),返回指定首部的串值,open(“method”,”url,”),建立对服务器的调用，,method,参数可以是,GET,POST,。,url,参数可以是相对,URL,或绝对,URL,。这个方法还包括,3,个可选参数。,send(content,),向服务器发送请求,setRequestHeader(label, value),把指定首部设置为所提供的值。在设置任何首部之前必须先调用,open(),XMLHttpRequest,对象属性,发送请求,-,方法和属性介绍,利用,XMLHttpRequest,实例与服务器进行通信包含以下,3,个关键部分：,onreadystatechange,事件处理函数,open,方法,send,方法,发送请求,-,方法和属性介绍,onreadystatechange,:,该事件处理函数由服务器触发，而不是用户,在,Ajax,执行过程中，服务器会通知客户端当前的通信状态。这依靠更新,XMLHttpRequest,对象的,readyState,来实现。,改变,readyState,属性是服务器对客户端连接操作的一种方式。,每次,readyState,属性的改变都会触发,readystatechange,事件,发送请求,-,方法和属性介绍,open(method,url,asynch,),XMLHttpRequest,对象的,open,方法允许程序员用一个,Ajax,调用向服务器发送请求,。,method,：请求类型，类似 “,GET”,或”,POST”,的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用,GET(,可以在,GET,请求里通过附加在,URL,上的查询字符串来发送数据，不过数据大小限制为,2000,个字符,),。若需要向服务器发送数据，用,POST,。,在某些情况下，有些浏览器会把多个,XMLHttpRequest,请求的结果缓存在同一个,URL,。如果对每个请求的响应不同，这就会带来不好的结果。把当前时间戳追加到,URL,的最后，就能确保,URL,的惟一性，从而避免浏览器缓存结果,。,url,：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。,asynch,：表示请求是否要异步传输，默认值为,true(,异步,),。指定,true,，在读取后面的脚本之前，不需要等待服务器的相应。指定,false,，当脚本处理过程经过这点时，会停下来，一直等到,Ajax,请求执行完毕再继续执行,。,var,url,=,GetAndPostExample?timeStamp,=+new,Date().getTime,();,发送请求,-,方法和属性介绍,send(data,),：,open,方法定义了,Ajax,请求的一些细节。,send,方法可为已经待命的请求发送指令,data,：将要传递给服务器的字符串。,若选用的是,GET,请求，则不会发送任何数据， 给,send,方法传递,null,即可,：,request.send(null,);,当向,send(),方法提供参数时，要确保,open(),中指定的方法是,POST,，如果没有数据作为请求体的一部分发送，则使用,null.,完整的,Ajax,的,GET,请求示例：,使用,get,请求时,send,方法参数时,null,如果传值的话，服务器也接受不到,发送请求,-,方法和属性介绍,setRequestHeader(header,value,),当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据,(metadata),。,首部信息用来声明一个请求是,GET,还是,POST,。,Ajax,请求中，发送首部信息的工作可以由,setRequestHeader,完成,参数,header,： 首部的名字,;,参数,value,：首部的值。,如果用,POST,请求向服务器发送数据，需要将 “,Content-type”,的首部设置为 “,application/x-www-form-urlencoded,”.,它会告知服务器正在发送数据，并且数据已经符合,URL,编码了。,该方法必须在,open(),之后才能调用,完整的,Ajax,的,POST,请求示例：,接收,-,方法和属性介绍,用,XMLHttpRequest,的方法可向服务器发送请求。在,Ajax,处理过程中，,XMLHttpRequest,的如下属性可被服务器更改：,readyState,status,responseText,responseXML,接收,-,方法和属性介绍,readyState,readyState,属性,表示,Ajax,请求的当前状态,。它的值用数字代表,。,0,代表未初始化。 还没有调用,open,方法,1,代表正在加载。,open,方法已被调用，但,send,方法还没有被调用,2,代表已加载完毕。,send,已被调用。请求已经开始,3,代表交互中。服务器正在发送响应,4,代表完成。响应发送完毕,每次,readyState,值的改变，都会触发,readystatechange,事件,。如果把,onreadystatechange,事件处理函数赋给一个函数，那么每次,readyState,值的改变都会引发该函数的执行。,readyState,值的变化会因浏览器的不同而有所差异。,但是，当请求结束的时候，每个浏览器都会把,readyState,的值统一设为,4,接收,-,方法和属性介绍,status,服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。,常用状态码及其含义：,404,没找到页面,(not found),403,禁止访问,(forbidden),500,内部服务器出错,(internal service error),200,一切正常,(ok),304,没有被修改,(not modified)(,服务器返回,304,状态，表示源文件没有被修改,),在,XMLHttpRequest,对象中，服务器发送的状态码都保存在,status,属性里。通过把这个值和,200,或,304,比较，可以确保服务器是否已发送了一个成功的响应,接收,-,方法和属性介绍,responseText,XMLHttpRequest,的,responseText,属性,包含了从服务器发送的数据,。它是一个,HTML,XML,或普通文本，这取决于服务器发送的内容。,当,readyState,属性值变成,4,时,responseText,属性才可用，表明,Ajax,请求已经结束。,接收,-,方法和属性介绍,responseXML,如果服务器返回的是,XML,， 那么数据将储存在,responseXML,属性中。,只用服务器发送了带有正确首部信息的数据时，,responseXML,属性才是可用的。,MIME,类型必须为,text/xml,成都,传智播客,cd,.,AJAX,开发框架,AJAX,实质上也是遵循,Request/Server,模式，所以这个框架基本的流程是：,对象,初始化,发送请求,服务器接收,服务器返回,客户端接收,修改客户端页面内容。,只不过这个过程是异步的。,A、,初始化,XMLHttpRequest,对象,function,createXmlHttpRequest,(),var,xmlhttp,= null;,try,/,Firefox, Opera 8.0+, Safari,xml,h,ttp,=,new,XMLHttpRequest,();,catch(e),/IE,IE7.0,以下的浏览器以,ActiveX,组件的方式来创建,XMLHttpRequest,对象,var,MSXML =,MSXML2.XMLHTTP.6.0,MSXML2.XMLHTTP.5.0,MSXML2.XMLHTTP.4.0,MSXML2.XMLHTTP.3.0,MSXML2.XMLHTTP,Microsoft.XMLHTTP;,for(var,n = 0; n ,MSXML.length,; n +),try,xmlhttp,= new,ActiveXObject(MSXMLn,);,break;,catch(e,),return xmlhttp;,B、,指定响应处理函数,指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给,XMLHttpRequest,对象的,onreadystatechange,属性就可以了,.,比如：,XMLHttpReq,.onreadystatechange,=,processResponse,;,注意,:,这个函数名称不加括号，不指定参数。也可以用,Javascript,函数直接量方式定义响应函数。比如：,XMLHttpReq,.onreadystatechange,= function() ;,/,处理返回信息的函数,function,processResponse,() ,C、,发出,HTTP,请求,向服务器发出,HTTP,请求了。这一步调用,XMLHttpRequest,对象的,open,和,send,方法。,http_request.open(GET, http:/,www.example.org/some.file, true);,http_request.send(null,),按照顺序，,open,调用完毕之后要调用,send,方法。,send,的参数如果是以,Post,方式发出的话，可以是任何想传给服务器的内容。,注意,:,如果要传文件或者,Post,内容给服务器，必须先调用,setRequestHeader,方法，修改,MIME,类别。如下：,http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded,”);,这时资料则以查询字符串的形式列出，作为,send,的参数，例如：,name=,value&anothername,=,othervalue&so,=on,发出Http请求的代码,/,发送请求,function,sendRequest,(),/,获取文本框的值,var,chatMsg,=,input.value,;,var,url,=,chatServlet.do?charMsg,=+,chatMsg,;,/,建立对服务器的调用,XMLHttpReq.open(POST,url,true,);,/,设置,MiME,类别,如果用,POST,请求向服务器发送数据，,/,需要将,Content-type,的首部设置为,application/x-www-form-urlencoded,.,/,它会告知服务器正在发送数据，并且数据已经符合,URL,编码了,。,XMLHttpReq.setRequestHeader(Content,-Type, ,application/x-www-form-urlencoded,);,/,状态改变的事件触发器,客户端的状态改变会触发,readystatechange,事件,/,onreadystatechange,会调用相应的事件处理函数,XMLHttpReq.onreadystatechange,=,processResponse,;,/,发送数据,XMLHttpReq.send(null,);,D、,处理服务器返回的信息,处理响应处理函数都应该做什么。,首先，它要检查,XMLHttpRequest,对象的,readyState,值，判断请求目前的状态。参照前文的属性表可以知道，,readyState,值为,4,的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：,if (,http_request.readyState,= 4) ,/,信息已经返回，可以开始处理, else ,/,信息还没有返回，等待,服务器返回信息后，还需要判断返回的,HTTP,状态码，确定返回的页面没有错误。所有的状态码都可以在,W3C,的官方网站上查到。其中，,200,代表页面正常。,if (,http_request.status,= 200) ,/,页面正常，可以开始处理信息, else ,/,页面有问题,D、,处理服务器返回的信息,XMLHttpRequest,对成功返回的信息有两种处理方式：,responseText,：将传回的信息当字符串使用；,responseXML,：将传回的信息当,XML,文档使用，可以用,DOM,处理。,/,处理返回信息的函数,function,processResponse,(),if,(XMLHttpReq.readyState,=4) /,判断对象状态,4,代表完成,if,(XMLHttpReq.status,=200) /,信息已经成功返回，开始处理信息,document.getElementById(chatArea).value,=,XMLHttpReq.responseText,;,数据格式,摘,要,在服务器端,AJAX,是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。,从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言,一般,以如下,3,种格式返回数据：,XML,JSON,HTML,XML,格式,优点：,XML,是一种通用的数据格式。,不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。,利用,DOM,可以完全掌控文档。,缺点：,如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么,responseXML,的值将是空的。,当浏览器接收到长的,XML,文件后，,DOM,解析可能会很复杂,JSON格式,JSON,（,JavaScript Object Notation,）一种简单的数据格式，比,xml,更轻巧。,JSON,是,JavaScript,原生格式,，这意味着在,JavaScript,中处理,JSON,数据不需要任何特殊的,API,或工具包。,JSON,的规则很简单：,对象是一个无序的“名称,/,值对”集合。一个对象以“,”,（左括号）开始，“,”,（右括号）结束。每个“名称”后跟一个“,:”,（冒号）；“名称,/,值对”之间使用“,”,（逗号）分隔,。,规则如下,:,1,）映射用冒号（“：”）表示。名称,:,值,2,）并列的数据之间用逗号（“，”）分隔。,名称,1:,值,1,名称,2:,值,2,3,） 映射的集合（对象）用大括号（“,”,）表示。,名称,1:,值,1,名称,2:,值,2,4,） 并列数据的集合（数组）用方括号,(“”),表示。,名称,1:,值,名称,2:,值,2,名称,1:,值,名称,2:,值,2,5,元素值可具有的类型：,string, number, object, array, true, false, null,JSON,示例,JSON,用冒号,(,而不是等号,),来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。,对象描述中存储的数据可以是字符串，数字或者布尔值。对象描述也可存储函数，那就是对象的方法。,解析JSON,JSON,只是一种文本字符串。它被存储在,responseText,属性中,为了读取存储在,responseText,属性中的,JSON,数据，需要根据,JavaScript,的,eval,语句。,函数,eval,会把一个字符串当作它的参数,。,然后这个字符串会被当作,JavaScript,代码来执行。因为,JSON,的字符串就是由,JavaScript,代码构成的，所以它本身是可执行的,代码实例：,处理JSON,例子一,:,var,people =,firstName,: Brett, ,lastName:McLaughlin,email: ,brettnewI, ;,alert(people.firstName,);,alert(people.lastName,);,alert(people.email,);,处理JSON,例子二,:,var,people =,firstName,: ,Brett,email,: ,brettnewI, ,firstName,: ,Mary,email,: ,marynewI, ,;,alert(people0.firstName);,alert(people0.email);,alert(people1.firstName);,alert(people1.email);,处理JSON,例子三,:,var,people =,programmers:,firstName,: Brett, email: ,brettnewI, ,firstName,: Jason, email: ,jason, ,;,window.alert(people.programmers0.firstName);,window.alert(people.programmers1.email);,处理JSON,例子四,:,var,people =,programmers: , ,firstName,: Brett, email: ,brettnewI, , ,firstName,: Jason, email: ,jason, , ,firstName,: ,Elliotte, ,lastName:Harold, email: ,elharo, ,authors: , ,firstName,: Isaac, genre: science fiction , ,firstName,: Tad, genre: fantasy , ,firstName,: Frank, genre: ,christian,fiction ,musicians: , ,firstName,: Eric, instrument: guitar , ,firstName,: Sergei, instrument: piano ,;,window.alert(people.programmers1.firstName);,window.alert(people.musicians1.instrument);,处理JSON,例子五,var,people =,username:mary,age:20,info:tel:1234566,celltelphone:788666,address:,city:beijing,code:1000022,city:shanghai,code:2210444,;,window.alert(people.username);,window.alert(people.info.tel);,window.alert(people.address0.city);,JSON,小结,优点：,作为一种数据传输格式，,JSON,与,XML,很相似，但是它更加灵巧。,JSON,不需要从服务器端发送含有特定内容类型的首部信息。,缺点：,语法过于严谨,代码不易读,eval,函数存在风险,解析,HTML,HTML,由一些普通文本组成。如果服务器通过,XMLHttpRequest,发送,HTML,， 文本将存储在,responseText,属性中。,不必从,responseText,属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。,插入,HTML,代码最简单的方法是更新这个元素的,innerHTML,属性。,HTML,小结,优点：,从服务器端发送的,HTML,代码在浏览器端不需要用,JavaScript,进行解析。,HTML,的可读性好。,HTML,代码块与,innerHTML,属性搭配，效率高。,缺点：,若需要通过,AJAX,更新一篇文档的多个部分，,HTML,不合适,innerHTML,并非,DOM,标准。,对比小结,若应用程序,不需要与其他应用程序共享数据的时候,使用,HTML,片段来返回数据时最简单的,如果数据需要重用, JSON,文件是个不错的选择,其在性能和文件大小方面有优势,当远程应用程序未知时, XML,文档是首选,因为,XML,是,web,服务领域的,“,世界语”,案例：,省份与城市的联动下拉列表框,效果演示,。,联动下拉：纯静态数据的,html,方式,实验步骤：,演示程序运行的效果。,编写一个静态,province.html,页面，其中使用一个二维数组来装载所有数据，然后分析和编码实现省份与城市的联动下拉列表框。,编写一个静态,jsonProvince.html,页面，其中使用,JSON,对象方式来装载所有数据，然后分析和编码实现此种数据格式下的省份与城市的联动下拉列表框。,联动下拉：动态生成数据的方式,实验步骤：,编写一个,ListProvinceAction,的,Action,和相应的,province.jsp,页面，留出数据待填充，大家清晰看到后面的任务就是生成出数据。,创建代表省份与城市的,province,和,City,实体类，然后将相应的实体对象存放在一个单例的,MemoryDao,中，用一个,ArrayList,集合存储所有,Province,对象，,Province,对象中保存有一个,City,对象的集合，在,MemoryDao,中构建出各个对象及关系。,创建,ProvinceService,类获取所有省份列表和,CityService,类获取某个省份下的所有城市。,在,ListProvinceAction,中编写拼凑出,JSP,页面所需要的那个数组字符串。,编写一个,ListJsonProvinceAction,的,Action,和相应的,jsonProvince.jsp,页面，以生成使用,JSON,对象来装载所有数据，为了方便拼凑,JSON,格式的字符串，在各个实体对象中覆盖,toString,方法返回自身的,JSON,格式字符串，这要比在外面最后统一转换成一个,JSON,字符串的做法要优雅很多，这种分而治之的思想使得程序健壮且易于维护。,编写一个,ListJsonProvince2Action,的,Action,，快速演示和说明一下如何在其内部用,JSONObject,与,JSONArray,工具里来完成,json,字符串的生成工作。,联动下拉：用,Ajax,方式实现的思路分析,传统方式与,Ajax,实现方式的对比与选择：,好比饭馆上菜的方式：一种是先让用户等较长时间，最后一下子将所有的菜全部上上来，一般的火锅店都是这么做的，还有一种方式就是做好一盘菜就上一盘菜，用户等待的时间较短，但送餐服务员要跑好多次，一般的家常菜饭店都是这么做的。,如何选择：传统方式是一下子把所有数据搞到手，以后只是用,js,把到手的数据显示出来即可，第一次得到数据的时间比较长，如果这个时间长得影响了用户的感受，那就考虑用,ajax,进行改进，否则，可以直接使用传统方式。,如果将传统方式改造为,ajax,方式的总结：将原有的一个,jsp,页面改为两个,jsp,页面来实现，第一个页面为那些固定不变的内容和,javascript,代码，第二个页面为那些要改变的区域的代码，因此原来用一个,action,或,servlet,实现的代码要改变为用两个,action,或,servlet,来实现，这称为,二步视图法,。,实现的思路剖析：,第一次要获得一个页面，浏览器以后一直显示这个页面，以后的每个操作都触发这个页面内部的一个,javascript,函数，再由这个,javascript,函数去发请求和处理回应结果。,第一次获得的页面应该包含什么信息？页面的初始内容和,javascript,函数。,以后的每次请求要获得什么样的结果？,联动下拉：用,json,数据传输格式的,Ajax,方式实现,步骤：,编写,AjaxListProvince,的,Action,和,ajaxProvince.jsp,页面，在一个下拉列表框中列出所有省份，编写触发和发送获取某个省份下面的城市的请求消息的代码，先简单的,alert,一下响应结果。,根据客户端的请求信息，分析和编写一个,ListCities,的,Action,调用,CityService,类获取某个省份下的所有城市，,Action,返回一个包含有某个省份下的所有,City,的,json,格式的数组。,在,ajaxProvince.jsp,页面中编写,处理返回结果的,javascript,代码，使用,javascript,自己的,eval,方法处理,json,字符串。,改进为用,prototype,自己的,json,支持来处理返回的,json,串，包括扩展的,String.evalJSON,（）方法和,transport.responseJSON,属性这两种方式。,由于本例子程序返回的城市对象很简单，可以使用一个,map,来表示某个省份下的所有,City,信息，同时简化客户端的,javascript,代码。,联动下拉：用,xml,数据传输格式的,Ajax,方式实现,步骤：,编写一个ListCity2的Action，返回一个包含有某个,省份,下的所有City的xml文档,。,直接用浏览器访问,ListCity2,，测试查看返回的,xml,文档内容是否正确。,客户端页面改为ajaxProvince2.jsp,，在其中编写解析,xml,文档内容和将结果显示在下拉列表框中的代码，并且将,AjaxListProvince,配置为,/ AjaxListProvince2.do,联动下拉：返回整个下拉列表框的,HTML,代码,步骤：,编写一个ListCity3的Action，返回一个包含有某个,省份,下的所有City的,下拉列表框的,html,代码。,直接用浏览器访问,ListCity3,，测试查看返回的,html,代码是否正确。,客户端页面改为AjaxProvince3.jsp,和在其中定义一个,元素来容纳服务器返回的下拉列表框，并且将,AjaxListProvince,配置为,/ AjaxListProvince3.do,。,联动下拉：返回向下拉列表框填充选项的,js,代码,步骤：,编写一个ListCity4的Action，返回一个,用于将,某个,省份,下的所有City,添加进下拉列表框的,javascript,代码。,直接用浏览器访问,ListCity4,，测试查看返回的,javascript,代码是否正确。,客户端页面改为AjaxProvince4.jsp,和使用,eval,方法执行服务器端返回的,javascript,代码，并且将,AjaxListProvince,配置为,/ AjaxListProvince4.do,。,案例扩展：多级地区的动态展现,实验步骤：,演示和分析程序运行的效果。（每选择一个区域，则显示一个包含有其所有子区域的下拉列表框，并清除其他不相关的下拉列表框；当选择了某个没有子区域的选项后，不再显示出新的下拉列表框，而是显示该区域的网吧）,分析数据库表结构该如何设计，并执行预备的脚本文件创建表结构和数据。,分析,JSP,页面该如何设计：,第一个返回的页面应该包含哪些内容？,以后每次请求获得的结果是什么？返回的结果怎样展现在返回的第一个页面中？动态生成出下拉列表框和将下拉列表框追加到其他列表框后面，或者提前预定义若干,span,元素，将新增的下拉列表框添加到相应的,span,元素中。,如果要实现用表格来显示某个区域的网吧，服务器端返回的要么是,select,元素，要么是,table,元素，客户端要判断结果的类型。,编码实现：先用,span,的方式实现；再用,prototype,的删除和添加功能。,
展开阅读全文