Ajax基础应用与实例

1、ajaxdayol1. ajax简介 ajax： asynchronouse javascript and xml 作用：增强用户的交互体验 webl.oservlet + jsp + javabean web2.0ajax web3.0flax <- flush2. 同步和异步 同步操作：在jsp/servlet屮发送一个同步的requet,这是川户必须等待响应 特点：返回一整张页面 异步操作：发送了一个异步的request,这时用户不用等待，可以进行后续的操作 特点：返冋一张页面的局部内容（异步刷新）3. ajax1）异步请求对象javascript对象 存在浏览器差异ff： xml

2、httprequestwindow>xm lhttprequestvar xhr = new xmlhttprequest();wi ndow. acti vexobj e ctie： activexobjectvar xhr = new activexobject( "microsoft.xmlhttp"); var xhr = new activcxobjcct(mmsxml2.5.0.xmlhttpn); var xhr = new activcxobjcct(mmsxml2.4.0.xmlhttpn);2) xhr相关方法xhr.open(mpost|getm

3、, url);建立连接xhr.send();传输数据3) xhi相关属性xhr.readystate浏览器为这个属性赋值数字类型的属性0 xhr初始化1 xhi发送请求2 xhrlsei-vlet接受到请求3 servlet 提供 response 的时候4 response到达html贝面的时候xhr.onreadystatechange事件监听属性xheonreadystatechange=funcation() if(xhnreadystate=4)/xxxxxxhr.status返回结果的状态码200正常返冋的状态码404500xhr.responsetext返回的文本内容xhr.re

4、sponsexml返回的xml内容当4）案例1：get方式*【参见：web_dayl6am_110602.zip regl.html<script type=mtext/javascripth>小技巧：通过$(")获得标签 function $(tagld)return document.getelementbyld(tagld);ifunction checkusername() 1获得input中数据var name = $(nnameld").value;2 ajax xhr发送异步请求/2.1 创建 xhrvar xhr;if( wi ndow.xm l

5、httprequest) xhr = new xmlhttprequest();jelse if(window.activexobject)xhr = new activexobject( "microsoft.xmlhttp'1);/2.2发送请求注意：get方式发送时用?传了数据，send()方法参数就为null； post要写xhr.open(hgetll/7ajax/checkservlet?name=,+name);xhr.send(null);/2.3监听servlet异步返回的结果xhr.onreadystatechange = function() if(xh

6、r.readystate=4 &&xhr.status=200)/dom input 写内容var ret = xhr.responsetext;var span = $(hmsgidn);/innerhtml作用 方便往标签中增加内容span.innerhtml = n<font color=,red,>n+ret+h</font>m;</script>5）案例2：post 方式*参见:web_dayl 6pm_ll 0602<zip reg2<html伪代码1 xhi*var xhr = new xmlhttprequest(

7、);var xhr = new activexobject(mmicrosoft.xmlhttph);http:/localhost:8080/servletapp/testservlet?name=xxxx2 xhr.open(”pos,”servle(url”)；属性通过这个属性的设置可以让servlet中通过request-getparametercname");>值 xhr.setrequestheader(mcontent-typem5uapplication/x-www-form-urlencodedn);xhr.scnd(mnamc=n+namc);/query

8、st ring3 xhr.onreadystatechange=function()<form method=hpostnaction="" enctype=napplicaton/x-www-form-urlencodedh>llmutiple/foi*mdata(文件上传)<input type=htextn name二fame"/><input type=ntextm name=hpasswordn/></form>request. getparameter( hnamen); request. getpara

9、meter(mpass word11); xhesetrequestheader(ncontent-tyrpeh/,application/x-www-form-urlencodedn); 通过设置该属性，可以让servlet通过request.getparametert*"*)获得属性 mutiple/fonn-data用于文件上传6）案例3：传输复杂数据【参见：web_dayl6pm01_110602.zip query.html知识点： var xml =xhnresponsexml指获得xml文档的”根”，此处指<students> ajax输出对象或集合时，需要

10、在服务器端xml格式的对象数据，然后通过dom输出到页面4. ajaxutils.js (体会)参见:web day 16pm02 l 10602.zip ajaxutils.jsvar ajax = createxhr:function()if(>nndow.xmlhttprequest)var xhr = new xmlhttprequest();return xhr;else if(window.activexobject)var xhr = new activexobject(,microsoft.xmlhttph);return xhr;, sendrequest:functi

11、on(method9urldata5callback)var xhr = this.createxhr();调用自己的方法要用 thisxhnopen(method,url);if(method=ngetm)xhnsend(null);else if(method=hpost,*)xhesetrequestheader(ttcontent-type,fapplication/x-www-form-urlencodedtt); xhnsend(data); xhnonreadystatechange=function()if(xhr.readystate=4&&xhnstatus

12、=200)var p = text:xhr.responselext, xml: xh nresponsexml callback(p);调用【参见：web_day 16pm()2_110602.zip reg3.html<script type=htext/javascript,f src=najaxutilsjsnx/script><script type=tftext/javascripth>function $(tagld)return document.getelementbyld(tagld);function checkusername()var name

13、 = $(,tnameld,)>value;ajax.sendrequest(hpost',/7ajax/checkservlet,t,mname=',+name,cb); function cb(c)var ret = c.text;var span = $(nmsgldtf);/innerhtml作用方便往标签中增加内容span.innerhtml = '*<font color='red'>"+ret+"v/font>"</script>day021. json1）简介2) json

14、初步a. 传输数据格式javascript1 对象>字符串 json.stringify(student)<script type=ntext/javascriptn src=mjson2.jsn></script><script type=ntext/javascriptm>var student=name:uss,password: "1234",favrate:,java,js,jvar student2=name:ussrpass word:1'12341°,favrate:"java"

15、/,js°1 varsmap = l:student,2:student2; 注意：json 屮的 map alert(json.stringify(smap);</script>知识点： json屮的map集合var map= ' a':'aa',2:'bb'alert(map'at);alert(map|2|);2.字符串“对象json.parseq与 json.stringifyo互逆<script type= htext/javascriptn src=hjson2.jsn></script

16、><script t y pe=hte xt/j avascript m>varjsonobj = ,namen:,ss',password,:h1234,favrate,:"java,jsnh; var stu = json.parse(jsonobj);for(idx in stu)alert(stuidx);</script>注意：json字符串中的"必须转义java注意：需要导入json的jar包1 json 串转->java 对象 jsonobject.fromobject(mstrm);将字符串转换为对象public

17、static void main(string args) string jsonstring = ,uname,':hss,upassword,:,l 234n,uagen:27)m;j son object jobj = jsonobject.fromobject(jsonstring);user u = (user)jobj<tobean(jobj,usenclass);s yste m. out .print(u. getn ame();2. json 数组->java 对象 jsonarray.tocollection()把json数组转换为对象public st

18、atic void main(string args) slringjslr= ”“namc“:%bc“,”namc”:”liyi“；jsonarray ja = jsonarray.fromobject(jstr);collection<usei> c = jsonarray>tocollection(ja, usenclass);list<user> us = new arr町listvuser>(c); 用 colleciton 构造 arraylist system.out.println(us.get(0).getname();知识点： 用 col

19、lection 构造 list list<user> us = new arraylist<user>(c);3. java 对象->json 串public static void main(string args) user u = new user();u.setname(maaaan);u.setpass word( *' 1234");jsonobjectjobj = jsonobject.fromobject(u);system.out.println(jobj.tostring();4. java 数组->json 串inta

20、= 1,2,3；jsonarray jobj = jsonarray.fro mo 切 ect(a);system.out.println(jobj.tostring();5. map->json 串map m = new hashmapo;m.put(nr, mah);注意：key只能为字符串jsonobject jobj = jsonobject.froniobject(m); system.out.println(jobj.tostring();知识点： map转换时要用jsonobject map的key必须是字符串b. 案例"ajax传输复杂数据（修改day01案例3

21、）query.html【参看：web dayl7pm 110603.zip】 ajaxwebrootday2query.html <html><head><script type=ntext/javascripth src=,t«/ajaxutilsjsit></script><script type=ntext/javascripth src=,t«/json2jst,x/script><script type=htext/javascripth>function createtd(tdvalue)v

22、ar td = documenlcreateelement(f,tdh);var txt = document.createtextnode(td value); td.appendchild(txt);return td;function createtr(tds)var tr = documentcreateelement(htrn);for(var i=0; i< tds.leng th; i+) tnappendchild(tdsi);return tr;function query()/i发送异步请求ajax.sendrequest(,getm,7ajax/queryralls

23、tudentsservlet,',null,fun); 111接收返回值 进行dom的处理function fun(data)var span = documenlgetelementbyid(tfln); span.innerhtml = ,n;var students = json.parse(data.text);var tb = document.getelementbyid(utblf); for(idx in students)var student = studentsidx;var nametd = createtd(studenlname);var agetd = c

24、reatetd(student.age);var emailtd = createtd(student.email);var tr = c reate tr(nametdagetd5emailtd);tb>appendchild(tr);</script></head><body onload=1 * query(); h><centerxhlxspan id=,frf>loading</spanx/hlx/center><table cellpaddin沪'o' cellspacing二'o

25、9; align='center' width二'80%' border=t> <tbody id=ntbh></tbodv>v</table></body></html>queryallstudentsservletjava【参看：web_dayl7pm_110603.zip】 ajaxwebrootd町2 package com.tarena.ajax.day2;import java.io.ioexception;import java.ioeprint writer;import java.utillist;import javax.se rviet.servletexception;i