Ajax+jQuery简要教程

Slide1JavaEE程序设计第四章Ajax/JSONSlide2JavaEE程序设计学习目标•首要目标–学习并掌握Ajax技术及原理；–理解掌握jQuery的使用方法；–掌握JSON语法、使用；–熟练应用Ajax和JSON进行项目开发；•次要目标–理解jQuery框架下的Ajax–理解对象模型APISlide3JavaEE程序设计本章提纲•4.1Ajax技术简介•4.2jQuery技术简介•4.3JSON简介•4.4JavaEE平台中的JSON处理•4.5使用对象模型API•4.6JavaEERESTfulWeb服务中的JSON•4.7Ajax和JSON开发实例Slide4JavaEE程序设计4.1Ajax技术简介•Ajax是指一种创建交互式网页应用的开发技术，通过在后台与服务器进行少量的数据交换，实现网页的异步更新。•与传统Web开发相比（图4-1），Ajax是一种独立于Web服务器的浏览器技术。它在浏览器与服务器之间使用异步传输（HTTP请求）模式客户端/浏览器用户界面Web服务器服务器处理进程服务器HTML响应HTTP请求客户端/浏览器用户界面Web服务器服务器处理进程服务器XMLHTTP请求AJAX引擎HTML+CSSJavaScript传统WebAJAX工作原理Slide5JavaEE程序设计异步与同步•async•Bydefault,allrequestsaresentasynchronous(e.g.thisissettotruebydefault).Ifyouneedsynchronousrequests,setthisoptiontofalse.Notethatsynchronousrequestsmaytemporarilylockthebrowser,disablinganyactionswhiletherequestisactive.Slide6JavaEE程序设计Ajax关键技术•XHTML(可扩展超文本标记语言)和CSS(层叠样式表)：通过标准化的方式显示数据。()•XML和XSLT：进行数据的交互和操作。•DOM（DocumentObjectModel）：实现动态的显示和交互。•XMLHttpRequest(XHR)：用于数据的异步更新。尽管名为XMLHttpRequest，它并不限于和XML文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest对象是名为AJAX的Web应用程序架构的一项关键功能•JavaScript：响应用户动作和处理数据，并将以上关键技术绑定在一起。Slide7JavaEE程序设计Java与JavaScript的关系？关于java和javascript的关系，就好比雷锋和雷峰塔的关系！Javascript，是运行在浏览器中的一种脚本语言，被浏览器解释执行，在web页面中：•可以操作HTML，提供了一种运行时改变HTML的工具•可以附加并执行事件，符合面向事件编程的思想•数据验证功能，在提交表单时对表单数据进行合法性验证•对客户浏览器的操作，前进、后退、刷新、跳转、打开新窗口、打印等•可以创建并使用CookiesSlide8JavaEE程序设计Ajax工作过程•JavaScript脚本使用XMLHttpRequest对象向服务器发送请求。发送请求时，既可以发送GET请求，也可以发送POST请求。•JavaScript脚本使用XMLHttpRequest对象解析服务器响应数据。•JavaScript脚本通过DOM动态刷新HTML页面，也可以为服务器响应数据增加CSS样式表，在当前网页的某个部分加以显示。Slide9JavaEE程序设计4.1.1XMLHttpRequest对象Ajax技术的核心就是异步请求发送，而XMLHttpRequest则是异步发送请求的对象。同步与异步客户端用户动作服务器处理客户端发送请求服务器返回数据客户端发送请求服务器返回数据AJAX引擎服务器发送请求返回数据发送请求返回数据客户端发送请求返回数据用户操作显示结果用户操作显示结果用户操作显示结果图4-2同步交互时序图图4-3异步交互时序图Slide10JavaEE程序设计XMLHttpRequest对象属性与方法•XMLHttpRequest对象提供了一系列的属性和方法，来向服务器发送异步的HTTP请求。在服务器处理用户请求的过程中，XMLHttpRequest通过属性的状态值来实时反映HTTP请求所处的状态，并根据当前状态指示JavaScript做出相应处理表4-1XMLHttpRequest对象方法方法描述abort取消当前请求。调用此方法，当前状态返回UNINITIALIZED状态getAllResponseHeaders将HTTP请求的所有响应头部作为键/值对返回getResponseHeaders从响应信息中获取指定的HTTP头的字符串形式open创建一个新的HTTP请求，并指定此请求的方法、URL、是否异步以及验证信息（用户名/密码）send发送请求到HTTP服务器setRequestHeader把指定头部设置为所提供的指，在调用该方法之前必须先调用open方法Slide11JavaEE程序设计XMLHttpRequest对象属性与方法属性描述onreadystatechange状态改变的事件触发器，当readyState属性改变时会触发此事件。只写readyState当前请求处理返回的状态，只读responseBody将响应信息以unsignedbyte数组形式返回，只读responseStream将响应信息以AdoStream对象形式返回，只读responseText将响应信息以字符串形式返回，只读responseXML将响应信息格式化为XMLDocument对象返回，只读status返回当前请求的HTTP状态码statusTextHTTP状态码的相应文本，只读表4-2XMLHttpRequest对象属性Slide12JavaEE程序设计XMLHttpRequest对象属性与方法状态含义说明0未初始化对象已创建，但未初始化，即尚未调用open()方法1初始化对象已创建，已调用open()方法，但尚未调用send()方法2发送数据send()方法已调用，准备发送数据3数据传送中已接受部分数据，但没有完全接收4传送完成数据接收完毕，此时可以通过response系列方法获取完整回应数据表4-3readyState属性的状态值Slide13JavaEE程序设计实例：第一个Ajax程序•认识了Ajax以及它的核心对象XMLHttpRequest之后，接下来看一个非常简单的例子，感受一下Ajax是如何与服务器之间进行异步通信的。•在webapps目录下新建文件夹FirstAjax，并在其下创建文件index.html和helloworld.html文件。•这个例子的功能是实现单击网页上的一个按钮，显示一句“Hello，world！”。Slide14JavaEE程序设计实例：第一个Ajax程序index.htmlscriptlanguage=javascriptvarxmlHttp;functioncreateXMLHttp(){if(window.XMLHttpRequest){xmlHttp=newXMLHttpRequest();}else{xmlHttp=newActiveXObject(Microsoft.XMLHTTP);}}functionshowMsg(){createXMLHttp();xmlHttp.open(POST,helloworld.html);xmlHttp.onreadystatechange=showMsgCallback;xmlHttp.send(null);}functionshowMsgCallback(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){vartext=xmlHttp.responseText;document.getElementById(msg).innerHTML=text;}}}/script/headbodyinputtype=buttonvalue=调用Ajax的内容onclick=showMsg()/spanid=msg/span/bodySlide15JavaEE程序设计实例：第一个Ajax程序htmlheadtitle/title/headbodyhello,world!/body/htmlhelloworld.html•文件index.html中包括createXMLHttp、showMsg、showMsgCallback三个JavaScript函数。其中createXMLHttp函数完成XMLHttpRequest对象的初始化，showMsg函数向Web服务器发送XMLHttp请求，访问helloworld.html文件里的数据。showMsgCallback函数将服务器返回的信息以字符串的形式赋给text，并在网页上显示。Slide16JavaEE程序设计实例：第一个Ajax程序•单击按钮触发监听事件onclick，从而向服务器异步发送请求，获取返回的信息并显示。运行效果如图所示。Slide17JavaEE程序设计4.2jQuery框架下的Ajax•编写常规的Ajax代码并不容易，因为不同的浏览器对Ajax的实现并不相同。这意味着需要编写额外的代码对浏览器进行测试。jQuery为Ajax提供了多个方法，使用jQuery将极大提高编写JavaScript代码的效率，同时也能解决浏览器兼容性问题。•原始的Ajax需要手动的做很多事情。比如针对不同的浏览器创建XMLHttpRequest对象、判断请求状态、编写回调函数•使用jQuery不仅简化了代码的逻辑结构，使用jQuery的Load方法就能代替一大堆繁琐的函数定义与调用。所以jQuery提供的Ajax方法可以在解决各种差异性问题的同时，大大提高代码的编写效率。Slide18JavaEE程序设计4.2.1jQuery技术简介•jQuery是一个兼容多浏览器的JavaScript库，核心理念是“writeless,domore”。•jQuery的语法设计可以使开发更加敏捷，能完成文档对象的操作、选择DOM对象、制作动画效果、事件处理、使用Ajax以及其他功能。•同时jQuery提供许多成熟的插件，能使用户的HTML代码与内容分离，即不用再在HTML里面插入一堆JavaScript，只需定义ID即可。•模块化的应用模式可以轻松的开发出功能强大的动态页面。•程序设计一个简单的jQuery实例•在该例子中，jQuery选择器$(p)表示选取全部p元素，在绑定的click事件被触发之后调用function()函数，从而隐藏p与/p之间的内容。当然，运行代码之前需要先下载jQuery并通过script标签把它添加到网页中。htmlheadscripttype=text/javascript“src=jquery.js/scriptscripttype=text/javascript$(document).ready(function(){$(p).click(function(){$(this).hide();});});/script/headbodyp点我，我就会隐藏！/p/body/htmlSlide20JavaEE程序设计scripttype=text/javascriptsrc=scripts/jquery-1.3.2-vsdoc2.js/scriptscrip