软件开发架构平台技术：jQuery、JSON、DWR

软件开发架构平台技术CH07AJAXIII目录jQueryJSONDWR为什么需要jQuery使用AJAX技术的Web应用需要在HTML页面中编写大量的JavaScript代码什么是jQueryjQueryjQueryisafast,small,andfeature-richJavaScriptlibrary.ItmakesthingslikeHTMLdocumenttraversalandmanipulation,event

handling,animation,andAjaxmuchsimplerwithaneasy-to-useAPIthatworksacrossamultitudeofbrowsers.Withacombinationofversatilityandextensibility,jQueryhaschangedthewaythatmillionsofpeoplewriteJavaScript.JohnResig,2006,BarCamp,NewYork.jQuery简介目前jQuery有两个版本1.x和2.x。其中1.x支持所有浏览器，而2.x不支持IE6、7、8。在开发中使用jQuery框架很简单，只需将相应版本的对应的.js文件(jquery-2.1.0.js)引入到项目中即可。jQuery语法jQuery语法是为HTML元素的选取而设计的。基本语法：$:用于在JavaScript语言中标识jQuery。selector:选择器，用于查找或查询HTML元素。action()：指对选择的元素执行的特定操作。简单使用范例$(selector).action()$(this).hide()-隐藏当前元素$("p").hide()-隐藏所有段落$("p.test").hide()-隐藏class=“test”的段落$("#test").hide()-隐藏id=“test”的元素jQuery语法Cont.文档就绪函数为了防止HTML文档在完全加载之前运行jQuery代码，一般会将所有的jQuery调用放到文档就绪函数中。$(document).ready(function(){ //jQuery调用

//jQuery调用});jQuery语法Cont.jQuery选择器元素选择器：jQuery使用CSS选择器来选取HTML元素。属性选择器：jQuery使用Xpath表达式来选取带有给定属性的元素。CSS选择器：用于改变HTML元素的CSS属性。$("p"):选取<p>元素$("ro"):选取class=“intro”的p元素$("[href]"):选取所有带有href属性的元素$("[href$='.jpg']"):选取所有href属性以.jpg结尾的元素$(“p”).css(“background-color”,”red”)把所有p元素的背景颜色更改为红色jQuery语法Cont.jQuery事件函数jQuery的核心是事件处理函数，事件处理函数是指当HTML中发生某事件时调用的函数。常用jQuery效果隐藏和显示jQuery与AJAXjQuery框架中的AJAX相关方法通过jQueryAJAX方法，可以使用HTTPGet和HTTPPost从远程服务器上请求文本、HTML、XML或JSON数据同时您能够把这些外部数据直接载入网页的被选元素中。能够大量的简化AJAX开发的前端JavaScript代码。jQuery与AJAXload()方法load()相当于传统AJAX使用中的open()方法。基本语法：URL参数必填，请求的URL资源。data参数可选，向服务器发送的数据，键值对的集合(map)。callback参数可选，回调函数。其他方法:get()方法和post()方法$(selector).load(URL,data,callback);JSONJSON(JavaScriptObjectNotation)JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON是JavaScriptProgrammingLanguage,StandardECMA-2623rdEdition-December1999标准的一个子集。JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯(包括C,C++,C#,Java,JavaScript,Perl,Python等)。这使得JSON成为理想的数据交换语言。JSON语法JSON语法基于下列两种结构：键值对的集合(Acollectionofname/valuepairs)：不同的语言中被理解为对象object，纪录record，结构struct，字典dictionary，哈希表hashtable，有键列表keyedlist，或者关联数组associativearray。值的有序列表(Anorderedlistofvalues)：在大部分语言中都被理解为数组array。以上两种都是常见的数据结构，事实上大部分现代计算机语言都以某种形式提供支持。这使得JSON在同样基于这些结构的编程语言之间交换成为可能。JSON语法Cont.JSON语法——对象对象是一个无序的“键/值”对的集合。一个对象以“{”开始，“}”结束。每个“键”后跟一个“:”“键/值”对之间使用“,”（逗号）分隔。JSON语法Cont.JSON语法——数组数组是值（value）的有序集合。一个数组以“[”开始，“]”结束。值之间使用“,”（逗号）分隔。JSON语法Cont.JSON语法——值值（value）可以是双引号括起来的字符串string、数值number、true、false、null、对象object或者数组array。这些结构可以嵌套。JSON语法Cont.JSON语法——字符串和数值JSON使用范例JSON使用范例Cont.JSON使用范例Cont.JSON最常见的用法:从web服务器上读取JSON数据，将JSON数据转换为JavaScript对象，然后在网页中使用该数据。什么是DWRDWRDWR:DirectWebRemoting.DWRisaJavalibrarythatenablesJavaontheserverandJavaScriptinabrowsertointeractandcalleachotherassimplyaspossible.DWRisEasyAjaxforJava.DWRversion3.0.rc2isthemostrecentdevelopmentrelease.DWRversion2.0.10isthecurrentstablerelease.DWRDWR的特点