jQuery+AJAX+JSON

1、jQuery什么是jQuery?jQuery是一个优秀的JavaScript框架，一个轻量级的JavaScript类库。jQuery的核心理念是Writeless，Domore。使用jQuery可以兼容各种浏览器，方便的处理HTML、Events、动画效果等，并且方便的为网站提供AJAX交互。jQuery的特点：利用选择器来查找要操作的节点,然后将这些节点封装成一个jQuery对象，通过调用jQuery对象的方法或者属性来实现对底层被封装的节点的操作。好处：a、兼容性更好；b、代码更简洁编程步骤：step1、使用选择器查找节点step2、调用jQuery的属性和方法4.jQuery对象与DOM

2、对象之间的转换什么是jQuery对象？jQuery对象是jQuery对底层对象的一个封装，只有创建了这个对象，才能使用类库中提供的方法。DOM对象jQuery对象DOM对象向jQuery对象的转变很容易，外面追加$和圆括号即可。functionf()varobj=document.getElementById(d1);/DOM-jQuery对象var$obj=$(obj);$obj.html(hellojQuery);jQuery对象DOM对象jQuery对象向DOM对象转化，通过调用get方法加参数值0即可$obj.get(0)。functionf()var$obj=$(#d1);/jQue

3、ry对象-DOMvarobj=$(obj).get(0);obj.innerHTML=hellojQuery;jQuery选择器什么是jQuery选择器？jQuery选择器是一种类似CSS选择器的特殊说明符号，能够帮助jQuery定位到要操作的元素上，吏用了选择器可以帮助HTML实现内容与行为的分离。只需要在元素上加上Id属性。选择器的种类a、基本选择器#id根据指定的ID匹配一个元素.class根据指定的类匹配一个元素element根据的指定的元素名匹配所有的元素select1,select2,将每一个选择器匹配到的元素合并后一起返回*匹配所有元素b、层级选择器1.select1空格sele

4、ct2查找指定元素的所有的后代select1select2查找子节点select1+select2下一个兄弟select1select2下面所有的兄弟c、过滤选择器基本过滤选择器:first获取第一元素:last获取最后一个元素:not排除选择器要求的元素:even匹配所有下标为偶数的元素:odd匹配所有下标为奇数的元素:eq匹配所有给定索引值的元素:gt匹配所有大于给定索引值的元素:lt匹配所有小于给定索引值的元素内容过滤选择器:contains匹配包含给定文本的元素:empty匹配所有不包含子元素或者文本的空元素:has匹配含有选择器所匹配的元素的元素:parent匹配含有子元素或者文本的

5、元素可见性过滤选择器根据元素在页面中的可见属性进行过滤，主要是对hidden属性和visible属性的判断。:hidden匹配所有不可见元素，或者type为hidden的元素:visible匹配所有的可见元素属性过滤选择器属性过滤器会对标记的属性进行判断，符合条件的元素会作为返回的对象。attribute匹配包含给定属性的元素。attribute=value匹配给定的属性是某个特定值的元素attribute!=value匹配所有不含有指定的属性，或者属性不等于特定值的attribute人二value匹配给定的属性是以某些值开始的元素attribute$=value匹配给定的属性是以某些值结尾的

6、元素attribute*=value匹配给定的属性是以包含某些值的元素attrSel1attrSel2attrSelN复合属性选择器，需要同时满足多个条件时使用。子元素过滤选择器子元素过滤选择器会根据子元素的位置的数值来进行筛选。:nth-child(index、enven、odd)匹配其父元素下的第N个子或奇偶元素。注意:eq(index)只匹配一个元素,而这个将为每一个父元素匹配子元素。：nth-chil从1开始的，而:eq()是从0算起的！表单对象属性过滤选择器:enabled匹配所有可用元素:disabled匹配所有不可用元素:checked匹配所有选中的被选中元素(复选框、单选框等，

7、不包括select中的option):selected匹配所有选中的option元素d、表单选择器使用的规则和以上各选择器一致。$(:input”)就会返回所有的input输入框，大多数情况下，表单选择器会和其他选择器进行配合来定位元素。:input匹配所有input,textarea,select和button元素:text匹配所有的单行文本框:password匹配所有密码框:radio匹配所有单选按钮:checkbox匹配所有复选框:submit匹配所有提交按钮:image匹配所有图片:reset匹配所有重置按钮:button匹配所有按钮:file匹配所有的文件域:hidden匹配所有不可

8、见元素，或者type为hidden的元素jQuery操作DOM-查询html()html()等价于innerHTML读取或修改节点的HTML内容的属性和value值。与DOM对象的innerHTML的作用一致。text()text()等价于innerText读取或修改节点中的文本内容，会过滤掉标记内容，与innerText的作用基本一致，但innerText在不同浏览器中写法不同，在jQuery中则使用text()方法即可。val()读取或修改节点的value属性值，也就是针对表单元素中有value属性的哪些元素的操作。attr()读取或设置修改节点的属性。这个方法会更宽泛一些，可以修改元素的

9、任何属性。7.jQuery操作DOM-创建、插入、删除创建DOM节点的语法使用$符号将HTML标记的字符串文本括起来，即创建了DOM节点，如$(html)。大多数时候创建后的节点需要放入文档中，使用到后续的一些方法可以实现节点的插入简写形式女口$(body).append(vdiv.v/div”)插入DOM节点的方法append方法会将DOM节点作为最后一个孩子节点添加进来prepend方法将DOM节点作为第一个孩子节点添加进来after方法将DOM节点作为下一个兄弟节点添加进来before方法将DOM节点作为上一个兄弟节点添加进来3.删除DOM节点的方法remove()可以移除DOM,rem

10、ove(selector)可以按选择器定位后删除，empty()清空节点。4将js和html内容分离$(fn);注意：window.onload二function()等价于$(fucntion();但是内在的机制不相同。fn是一个函数，表示当整个页面记载完成之后就会执行fn。jQuery操作DOM-复制节点1复制DOM节点的方法clone()方法和clone(true)都会实现复制，添加参数true的时候会将节点的行为也复制到新的对象之上。jQuery操作DOM-属性操作属性操作的方法读取属性使用attr()方法，设置属性使用attr(，)方法。删除属性使用removeAttribute(“)

11、方法。jQuery操作DOM-样式操作attr(class,)获取和设置addClass()追加样式removeClass()删除所样式toggleClass()切换样式hasClass()是否有某个样式css()读取css值css(,)设置多个样式ll.jQuery操作DOM-遍历节点childern()/childem(selector)只考虑直子节点next()/next(selector)下一个兄弟的节点perv()/perv(selector)上一个兄弟的节点sibling()/sibling(selector)其他的兄弟find(selector)查找满足选择器的所有的后代pare

12、nt()父节点，没有选择器jQuery事件处理1.使用jQuery实现事件绑定使用jQuery实现事件绑定$obj.bind(事件类型，事件处理函数)；注意：为一个jQuery对象绑定单击事件的代码实现为$obj.bind(click,fn);也可以简写为$obj.click(fn);获得事件对象event$(fucntion(e)e就是事件处理对象(jQuery对底层事件对象做了一个封装，简化代码);事件对象的常用属性a、找到事件源：varobj=e.target获取事件源使用事件对象的target属性。b、获取发生事件时的鼠标点击的坐标：alert（e.pageX+e.pageY）;获取发

13、生事件时的鼠标坐标使用pageX和pageY属性。c、禁止事件冒泡e.stopPropagation（）;事件冒泡子节点产生的事件会依次向上抛给相应的父节点当事件发生时，会首先发送给最内层的元素，在这个元素获得响应机会之后，事件会向上冒泡给更外层的元素，及从内层向外层依次传递。合成事件.hover（over，out）模拟鼠标悬停事件它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，

14、而不触发移出事件（修正了使用mouseout事件的一个常见错误）toggle（f1，f2，）模拟连续单机事件注意的是，通过jQuery这种方式触发事件时，不会发生事件传播；只会执行直接添加到元素的处理程序。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。模拟操作trigger(type,data)在每一个匹配的元素上触发某类事件。也就是提交第一个表单，但不用submit()的效果。$(#username).trigger(focus);简写$obj.focus(

15、);jQuery动画显示隐藏的动画效果.hide()和.show()方法是对display的属性的操作。如果添加一个速度参数，就会产生动画效果。上下滑动式动画效果$(div).slideDown(800);通过高度变化(向下增大)来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。$(div).slideUp(fast);通过高度变化(向上减小)来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。$(div).slideToggle(speed,callback)通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。淡入淡出式动画效果如果针对一个

16、元素，只是逐渐增大其不透明度，那么使用fadeIn(slow);fadeOut是逐渐减少不透明度，可以使用/.fadeOut()自定义动画效果用法：animate(js对象,执行时间，回调函数)；js对象：描述动画执行之后元素的样式执行时间：毫秒数callback回调函数：动画执行结束后要执行的函数jQuery类数组什么是类数组jQuery对象封装的DOM对象。类数组的操作length属性：获得jQuery对象封装的dom对象的个数each(fn)遍历类数组，fn用来处理DOM对象。在fn中this表示正在被遍历的那个DOM对象。fn函数可以添加一个参数i用于表示正在被遍历的DOM对象的下标(

17、从0开始)eq(index):将下标等于index的DOM对象取出来get(index):获得下标为index的dom对象get():返回一个DOM对象组成的数组index(obj):返回DOM或jQuery对象在类数组中的下标jQuery对AJAX的支持load()方法作用：将服务器返回的数据字节添加到符合要求的节点之上用法：$obj.load(请求地址，请求参数)；请求参数可以有两种格式：“username=tom&age=22”username：tom，age：22有请求参数时，load方法发送POST请求，否则发送GET请求$.get和$.post作用:向服务器发送异步请求，可将服务器

18、返回的数据进行处理。用法：$.get(url,data,callback,type)url:请求地址data:请求参数，可以有两种格式格式一;username二tom格式二:username:tomcallback:回调函数，用来处理服务器返回的数据。格式如下：function(data,status),其中，data是服务器返回的数据，status是一个字符串，描述服务器处理请求的状态，比如success。type:服务器返回的数据类型，可以是html:html内容text:文本内容json:json字符串xml:xml文档script:javascript脚本.3$.ajax作用：可以完全

19、控制ajax对象发送请求(包括同步或者异步请求)的过程。用法$.ajax();是一个对象，描述各个选项参数：url:请求地址type:请求方式data:请求参数dataType:服务器返回的数据类型success:回调函数(当服务器处理正确),格式如下:function(data,status),含义同上。error:回调函数(当服务器处理失败),格式如下:function(xhr,err1,err2)async:同步(false)还是异步(true)通过HTTP请求加载远程数据。如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、

20、success、complete。beforeSend在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。error在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象(如果有的话)dataFilter在请求成功之后调用。传入返回的数据以及dataType参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。success当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。complete当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

21、注意，所有的选项都可以通过$&8灭$63卩()函数来全局设置。AJAX什么是AJAX?AsynchronousJavaScriptandXml(异步的JavaScript和Xml)AJAX是一种用来改善用户体验的技术原理：本质是使用XMLHttpRequest对象异步地向服务器发请求，并且发送请求的同时浏览器并不销毁页面，可以继续进行页面的操作，在服务器收到请求之后会返回部分数据，而不是一个完整的页面。3.如何获得AJAX对象?？需要区分不同的浏览器来或得这个对象。functiongetXhr()varxhr=null;if(window.XMLHttpRequest)xhr=newXMLHt

22、tpRequest();elsexhr=newActiveXObject(Microsoft.XMLHTTP);returnxhr;4.异步对象的属性和方法1、onreadystatechangeonreadystatechange需要绑定一个事件处理函数，该函数用来处理readystatechange事件。当从0变成了1,就会产生readystatechange事件。在当前不同的处理状态下，可以进行状态的捕获，做些相应处理2、readyStatereadyState代表请求的状态，使用不同的数字代表一个状态。获得ajax通讯的状态。该属性值有5个：0代表尚未初始化1代表正在发送请求2代表请求

23、完成3代表请求成功，正在接受数据4代表数据接收成功（表示ajax对象已经获得了服务器返回的数据）3、responseText4、responseXML5、statusAJAX编程实现，步骤：获取AJAX对象：获取XMLHttpRequest对象。创建请求：调用XMLHttpRequest对象的open方法。设置回调函数：为AJAX对象的onreadystatechange事件设定响应函数。4.发送请求：调用Ajax对象的send方法stepl:获得对象step2:利用ajax对象发送请求get请求xhr.open(get,URI,true);open()方法可以理解为准备工作，填写发送请求前的

24、信息的准备。第一个参数位置，使用“get”即发送GET请求。第二个参数位置，填写发送请求的地址，如果在发送GET请求时需要在地址中携带参数值，可以通过“？”的方式来追加“name二value”对象第三个参数位置，为boolean类型的值。当该boolean值为true时，服务器请求是异步进行的，也就是脚本执行send()方法后不等待服务器的执行结果，而是继续执行脚本代码；当该boolean值为false时，服务器请求是同步进行的，也就是脚本执行send()方法后等待服务器的执行结果的返回，若在等待过程中超时，则不再等待，继续执行后面的脚本代码！注意：该方法还没有真正的发送请求。step3:编写

25、服务器端的处理程序，一般不需要返回完整的页面，只需要返回部分的页面step4:编写处理函数get请求：xhr.open(get,xx.do?uname=Bear,true);xhr.onreadystatechange=fn;xhr.send(null);post请求：xhr.open(post,xx.do,true);xhr.setRequestHeader(content-type,applicaton/x-www-form-urlencoded);xhr.onreadystatechange=fn;xhr.send(uname=Bear);注意：Http要求在发送post请求的时候需要添

26、加一个“content-type消头”,因为ajax在默认的情况下不会添加消息头，所以需要调用.setRequestHeader()方法来设置消息头。GET请求时的乱码问题为什么会有乱码？乱码的根本原因在于浏览器的的编码和服务器的解码的方式不同而产生的。比如IE浏览器提供的AJAX对象会使用GBK字符集对请求参数进行编码，而其它浏览器会使用UTF-8来编码。也就是不同的浏览器在发送请求时数据编码就已经不一致了。而对于服务器来讲，默认情况下会使用ISO-8859-1进行解码，这种解码格式是Tomcat的配置文件中声明的。解决乱码问题，就需要在客户端和服务器端统一编码和解码的方式即可。stepl:

27、设置服务器端使用“utf-8”来解码，即修改Tomcat的XML文件(conf/service.xmlvconnectorURIEncoding=utf-8)即可，但是此方法只适用于get请求；step2:使用encodeURI函数统一编码。POST请求时的乱码问题乱码产生的原因？POST请求时乱码问题产生的原因依然是编码与解码的不同造成的。因为所有浏览器在进行POST方式提交时都是使用UTF-8方式进行编码的，到了服务器端则默认使用ISO-8859-1方式来解码。所以只需要修改服务器端的解码格式，保证是UTF-8的方式来接吗就可以避免乱码。注：火狐就不用这句代码，是因为这个浏览器会在发送的请

28、求数据包中告诉服务器，它是哪种方式进行的数据编码。服务器端：request.setCharacterEncoding(utf-8);response.setContentType(text/html;charset=utf-8);JSON1.什么是JSON?JSON即Javascript对象表示法，是一种现在主流的数据交换格式。轻量级的数据交换技术标准。a、数据交换：将数据转换成和平台无关的数据发送给接收放来处理b、轻量级相对于xml做数据交换格式，json文档更小，解析的速度更快。特点：a、简单，只有六种类型的符号；，就可以表示任何种类的复杂对象或数组。b、易读，机器解析还是人的阅读都能够从

29、这种格式中快速找到所需要的信息。2.JSON语法：使用JSON表示一个对象属性名:属性值,属性名:属性值,例：varobj=id:1,name:王小贱，age:24;varname=;varobj=id:1,name:王小贱，dep:depld:1,depName:财务部;vardepName=obj.dep.depName;注意：a、属性名要使用引号引起来b、属性值的类型可以多样化，包括string、number、true、false、null、object、arrayc、如果属性值的类型为字符串，则必须使用引号括起来使用JSON表示一个数组Object1,Object2,Object3a、

30、Object的类型可以是string、number、false、true、null、object、array。3使用JSON实现数据交换1.JSON数据交换原理JSON作为数据的交换格式，在客户端和服务器端都要有对应的转换过程。如果是客户端请求数据，那么服务器端就将Java对象先转换成JSON字符串，经响应把字符串传到客户端之后，客户端就会接收到这个转换结果，但JavaScript要求把这个字符串变成对象格式才更方便访问，所以在客户端的JavaScript代码中又需要将这个JSON字符串变成JavaScript能够识别的对象，这样就完成了从服务器端的对象到客户端对象的整个转变过程。同理，如果在客户端填写了数据后想提交给服务器，首先是将客户端数据构造成一个JSON对象字符串，经网络传递到服务器端，服务器端再依据转换规则将JSON字符串变成Java识别的对象。Java对象转换成JSON服务器端在服务器端对象的转换过程可以使用官方提供的API，JSONObject和JSONArray分别为对象和数组的转换类型。JSON字符串转换成JS对象浏览器端当JSON经传输到达客户端时，需要完成JSON到Java