《Aja+jQuery简要教程》由会员分享，可在线阅读，更多相关《Aja+jQuery简要教程（71页珍藏版）》请在金锄头文库上搜索。
1、第四章 Aja/JSON,学习目标,首要目标学习并掌握Aja技术及原理；理解掌握jQuery的使用方法；掌握JSON语法、使用；熟练应用Aja和JSON进行项目开发；次要目标理解jQuery框架下的Aja理解对象模型API,本章提纲,4.1 Aja技术简介4.2 jQuery技术简介4.3 JSON简介4.4 JavaEE平台中的JSON处理4.5 使用对象模型API4.6 JavaEE RESTful Web服务中的JSON4.7 Aja和JSON开发实例,4.1 Aja技术简介,Aja 是指一种创建交互式网页应用的开发技术，通过在后台与服务器进行少量的数据交换，实现网页的异步更新。与传统W
2、eb开发相比（图4-1），Aja是一种独立于Web服务器的浏览器技术。它在浏览器与服务器之间使用异步传输（HTTP请求）模式,异步与同步,asyncBy default, all requests are sent asynchronous (e.g. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any a
3、ctions while the request is active.,Aja关键技术,HTML(可扩展超文本标记语言)和CSS(层叠样式表)：通过标准化的方式显示数据。(http:/ Object Model）：实现动态的显示和交互。MLHttpRequest(HR)：用于数据的异步更新。尽管名为 MLHttpRequest，它并不限于和 ML 文档一起使用：它可以接收任何形式的文本文档。MLHttpRequest 对象是名为 AJA 的 Web 应用程序架构的一项关键功能JavaScript：响应用户动作和处理数据，并将以上关键技术绑定在一起。,Java与JavaScript的关系？,关于
4、java和javascript的关系，就好比雷锋和雷峰塔的关系！ Javascript，是运行在浏览器中的一种脚本语言，被浏览器解释执行，在web页面中：可以操作HTML，提供了一种运行时改变HTML的工具可以附加并执行事件，符合面向事件编程的思想数据验证功能，在提交表单时对表单数据进行合法性验证对客户浏览器的操作，前进、后退、刷新、跳转、打开新窗口、打印等可以创建并使用Cookies,Aja工作过程,JavaScript脚本使用MLHttpRequest对象向服务器发送请求。发送请求时，既可以发送GET请求，也可以发送POST请求。JavaScript脚本使用MLHttpRequest对象解
5、析服务器响应数据。JavaScript脚本通过DOM动态刷新HTML页面，也可以为服务器响应数据增加CSS样式表，在当前网页的某个部分加以显示。,4.1.1 MLHttpRequest对象,Aja技术的核心就是异步请求发送，而MLHttpRequest则是异步发送请求的对象。同步与异步,图4-2 同步交互时序图,图4-3 异步交互时序图,MLHttpRequest对象属性与方法,MLHttpRequest对象提供了一系列的属性和方法，来向服务器发送异步的HTTP请求。在服务器处理用户请求的过程中，MLHttpRequest通过属性的状态值来实时反映HTTP请求所处的状态，并根据当前状态指示Ja
6、vaScript做出相应处理,表4-1 MLHttpRequest对象方法,MLHttpRequest对象属性与方法,表4-2 MLHttpRequest对象属性,MLHttpRequest对象属性与方法,表4-3 readyState属性的状态值,实例：第一个Aja程序,认识了Aja以及它的核心对象MLHttpRequest之后，接下来看一个非常简单的例子，感受一下Aja是如何与服务器之间进行异步通信的。在webapps目录下新建文件夹FirstAja，并在其下创建文件inde.html和helloworld.html文件。这个例子的功能是实现单击网页上的一个按钮，显示一句“Hello，wo
7、rld！”。,实例：第一个Aja程序,inde.html, var mlHttp; function createMLHttp() if(window.MLHttpRequest) mlHttp=new MLHttpRequest(); else mlHttp=new ActiveObject(Microsoft.MLHTTP); function showMsg() createMLHttp(); mlHttp.open(POST,helloworld.html); mlHttp.onreadystatechange=showMsgCallback; mlHttp.send(null); ,
8、function showMsgCallback() if(mlHttp.readyState=4) if(mlHttp.status=200) var tet=mlHttp.responseTet; document.getElementById(msg).innerHTML=tet; ,实例：第一个Aja程序, hello,world!,helloworld.html,文件inde.html中包括createMLHttp、showMsg、showMsgCallback三个JavaScript函数。其中createMLHttp函数完成MLHttpRequest对象的初始化，showMsg函数
9、向Web服务器发送MLHttp请求，访问helloworld.html文件里的数据。showMsgCallback函数将服务器返回的信息以字符串的形式赋给tet，并在网页上显示。,实例：第一个Aja程序,单击按钮触发监听事件onclick，从而向服务器异步发送请求，获取返回的信息并显示。运行效果如图所示。,4.2 jQuery框架下的Aja,编写常规的Aja代码并不容易，因为不同的浏览器对Aja的实现并不相同。这意味着需要编写额外的代码对浏览器进行测试。jQuery为Aja提供了多个方法，使用jQuery将极大提高编写JavaScript代码的效率，同时也能解决浏览器兼容性问题。原始的Aja需
10、要手动的做很多事情。比如针对不同的浏览器创建MLHttpRequest对象、判断请求状态、编写回调函数使用jQuery不仅简化了代码的逻辑结构，使用jQuery的Load方法就能代替一大堆繁琐的函数定义与调用。所以jQuery提供的Aja方法可以在解决各种差异性问题的同时，大大提高代码的编写效率。,4.2.1 jQuery技术简介,jQuery是一个兼容多浏览器的JavaScript库，核心理念是“write less, do more”。jQuery的语法设计可以使开发更加敏捷，能完成文档对象的操作、选择DOM对象、制作动画效果、事件处理、使用Aja以及其他功能。同时jQuery提供许多成熟
11、的插件，能使用户的HTML代码与内容分离，即不用再在HTML里面插入一堆JavaScript，只需定义ID即可。模块化的应用模式可以轻松的开发出功能强大的动态页面。http:/ $(document).ready(function() $(p).click(function()$(this).hide(););); 点我，我就会隐藏！ , $(function() $(#btnAjaJquery).click(function(event) $(#divResult).load(data/AjaGetCityInfo.jsp, resultType: html ); ); ) 使用jQuery
12、的load方法 ,4.2.1 jQuery框架下的Aja,4.2.2 利用jQuery的Aja功能调用远程方法,jQuery提供了多个与Aja相关的方法，通过调用这些方法能够使用HTTP GET或HTTP POST从远程服务器上请求文本、HTML、ML或JSON数据。jQuery.load (url, data, callback)方法jQuery.get (url, callback)方法jQuery.post (url, data, callback)方法jQuery.aja (options)方法,jQuery.load方法,jQuery.load (url, data, callback)方法url：规定希望加载的urldata：与请求一同发送的查询字符串键/值对集合callback：load方法完成后所执行的函数名称,jQuery.load方法,jQuery.load是最简单的Aja函数，使用具有一定的局限性。它主要用于直接返回HTML的Aja接口。下面的这句代码会把jQuery-load.tt文件中id=p1的元素内容加载到指定的元素中。,jQuery and AjaThis is some tet in a paragraph.,jQuery-load.tt,$(#div1).load(jQuery-load.tt #p1);,
