ajax学习.doc

1.走进Ajax最主要的是XMLHttpRequest进行异步数据检索然后使用Dom进行动态显示和交互使用xml和XSLT进行数据交换和处理使用XHTML和css的给予标注的表示技术使用JavaScript将以上技术融合在一起2.基本步骤：Servlet定义：public class AJAXServlet extends HttpServletpublic void doPost(.)doGet(.);public void doGet(.) /设置编码方式，XMLHttpRequest对象总采用UTF-8方式发送请求 request.setCharacterEncoding(UTF-8); /设置中文输出流 response.setContentType(text/html;charset=UTF-8); /获取页面输出流 PrintWriter out = response.getWriter(); /1.取参数 String username = request.getParameter(username); String password=request.getParameter(password); String email=request.getParameter(email); /2.检查参数是否有问题 /3.校验操作 UserServiceImpl userService=new UserServiceImpl(); User user=new User(); UserHelper userHelper=new UserHelper(); userService.setUserHelper(userHelper); if(userService.isExit(username) /4.和传统应用不同之处，这一步需要将用户感兴趣的数据返回给页面，而不是把一个新的页面发送给用户 out.print(该用户已经存在); else tryuser.setEmail(email); user.setUsername(username); user.setPassword(password); user.setHeadpic(nophoto.gif); userService.addUser(user); request.getSession().setAttribute(userlogin,username); /4.和传统应用不同之处，这一步需要将用户感兴趣的数据返回给页面，而不是把一个新的页面发送给用户 out.print(success); catch(Exception e) /4.和传统应用不同之处，这一步需要将用户感兴趣的数据返回给页面，而不是把一个新的页面发送给用户 out.print(注册时出错，请重新注册); out.close();下载JQuery Ajax库JQuery-1.2.6-release中的dist中的JQuery，该文件是JavaScript文件JQuery的使用：把JQuery文件和下面的JavaScript文件放在一起在jsp页面中引用：verify.js如下：function verify/1.获取文本的内容/jquery的查找节点的方式，参数中#加上id属性值可以找到一个节点/jquery的方法返回的都是jquery对象，可以继续在上面执行其他的jquery方法var jqueryobj=$(#userName);/获取节点的值var username=jqueryobj.val();/2.将文本框中的数据发送给服务器的servlet/使用jquery的XMLHTTPRequest对象的get请求的封装$.get(AJAXServer?name=+username,null(发送到服务器的数据),callback(回调函数名字,当程序运行到这句话，就会把数据发送到服务器进行处理,然后继续进行下面的代码，不会在这里等待，当服务器返回数据的时候，在执行callback函数);/回调函数function callback(data(服务器端返回的纯文本信息存储在data参数中)/3.接受服务器端返回的数据/alert(data);/4.接受服务器端返回的数据动态的显示在页面上/找到保存结果信息的节点var resultObj=$(#result);resultObj.html(data);简化上面的写法：function verfity()$.get(AJAXServer?name=+$(#userName).val(),null,function(data) $(#result).html(data););不用框架来用AJAX/这个方法使用XMLHTTPRequest对象来进行ajax的异步数据交互，接受纯文本的信息var xmlhttp；function verfity()/1.使用dom的方式获取文本框的值/document.getElementById(userName)是dom中获取元素节点的一种方法，一个元素节点对应html页面中的一个标签/.value可以获取一个元素节点的value属性值var userName=document.getElementById(userName).value;/2.创建XMLHttpRequest对象/这是XMLHttpRequest对象使用中最复杂的一步if(window.XMLHttpRequest)/针对Firefox，Mozillar，Opera，Safari，IE7，IE8 xmlhttp=new XMLHttpRequest();/针对某些特定版本的mozillar浏览器的bug进行修正if(xmlhttp.overrideMimeType) xmlhttp.overrideMimeType(text/xml);else if(window.ActiveXObject) /针对IE6，IE5.5，IE5 /两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js的数组中排在前面的版本较新 var activexName=MSXML2.XMLHTTP,Microsoft.XMLHTTP; for(var i=0;iactivexName.length;i+) try /取出一个控件名进行创建，如果创建成功就终止循环，如果创建失败，会抛出异常，然后可以继续循环，继续尝试创建 xmlhttp=new ActiveXObject(activexNamei); break; catch(e) /确认XMLHttpRequest对象创建成功/xmlhttp本来是不存在的，为false，取反就是存在了，为trueif(!xmlhttp)alert(XMLHttpRequest对象创建失败);return;else/alert(xmlhttp);/3.注册回调函数/注册回调函数时，需要函数名，不要加括号xmlhttp.onreadystatechange=callback;/4.设置连接信息/第一个参数表示http的请求方式，支持所有的http的请求方式，主要使用get和post/第二个参数表示请求的url地址，get方式请求的参数也在url中/第三个参数表示采用异步还是同步的方式交互，true表示异步xmlhttp.open(GET,AJAXServer?name=+userName,true);/使用post方式请求的代码/xmlhttp.open(POST,AJAXServer,true);/post方式下，需要设置http的请求头/xmlhttp.setRequestHeader(Content-Type,application/x-www/form-urlencoded);/post方式发送数据/xmlhttp.send(name=+userName);/5.发送数据，开始和服务器端进行交互/同步方式下，send这句话会在服务器端数据回来后才执行完/异步方式下，send这句话会立即完成执行xmlhttp.send(null);/回调函数function callback()/6.接受响应的数据/判断对象的状态是否交互完成if(xmlhttp.readyState=4) /判断http的交互是否成功 if(xmlhttp.status=200) /获取服务器端返回的数据 /获取服务器端输出的纯文本数据 var responseText=xnlhttp.responseText; /将数据显示在页面上 /通过dom到方式中到div标签对应的元素节点 var divNode=document.getElementById(result); /设置元素节点中的html内容 divNode.innerHTML=responseText; else alert(出错了); 下面返回XML数据Servlet定义：public class AJAXXMLServlet extends HttpServletpublic void doPost(.)doGet(.);public void doGet(.) /设置编码方式，XMLHttpRequest对象总采用UTF-8方式发送请求 request.setCharacterEncoding(UTF-8); /设置中文输出流 修改点1- response.setContentType(text/xml;charset=UTF-8); /获取页面输出流 PrintWriter out = response.getWriter(); /1.取参数 String username = request.getParameter(username); String password=request.getParameter(password); String email=request.getParameter(email); /2.检查参数是否有问题 /3.校验操作 StringBuilder builder=new StringBuilder(); builder.append(); if(userService.isExit(username) /4.和传统应用不同之处，这一步需要将用户感兴趣的数据返回给页面，而不是把一个新的页面发送给用户 builder.append(该用户已经存在).append(); else tryuser.setEmail(email); user.setUsername(username); user.setPassword(password); user.setHeadpic(nophoto.gif); userService.addUser(user); request.getSession().setAttribute(userlogin,username); /4.和传统应用不同之处，这一步需要将用户感兴趣的数据返回给页面，而不是把一个新的页面发送给用户 builder.append(success).append(); catch(Exception e) /4.和传统应用不同之处，这一步需要将用户感兴趣的数据返回给页面，而不是把一个新的页面发送给用户 builder.append(注册时出错，请重新注册).append(); out.println(build.toString); out.close();/这个方法使用XMLHTTPRequest对象来进行ajax的异步数据交互，接受纯文本的信息var xmlhttp；function verfity()/1.使用dom的方式获取文本框的值/document.getElementById(userName)是dom中获取元素节点的一种方法，一个元素节点对应html页面中的一个标签/.value可以获取一个元素节点的value属性值var userName=document.getElementById(userName).value;/2.创建XMLHttpRequest对象/这是XMLHttpRequest对象使用中最复杂的一步if(window.XMLHttpRequest)/针对Firefox，Mozillar，Opera，Safari，IE7，IE8 xmlhttp=new XMLHttpRequest();/针对某些特定版本的mozillar浏览器的bug进行修正if(xmlhttp.overrideMimeType) xmlhttp.overrideMimeType(text/xml);else if(window.ActiveXObject) /针对IE6，IE5.5，IE5 /两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js的数组中排在前面的版本较新 var activexName=MSXML2.XMLHTTP,Microsoft.XMLHTTP; for(var i=0;iactivexName.length;i+) try /取出一个控件名进行创建，如果创建成功就终止循环，如果创建失败，会抛出异常，然后可以继续循环，继续尝试创建 xmlhttp=new ActiveXObject(activexNamei); break; catch(e) /确认XMLHttpRequest对象创建成功/xmlhttp本来是不存在的，为false，取反就是存在了，为trueif(!xmlhttp)alert(XMLHttpRequest对象创建失败);return;else/alert(xmlhttp);/3.注册回调函数/注册回调函数时，需要函数名，不要加括号xmlhttp.onreadystatechange=callback;/4.设置连接信息/第一个参数表示http的请求方式，支持所有的http的请求方式，主要使用get和post/第二个参数表示请求的url地址，get方式请求的参数也在url中/第三个参数表示采用异步还是同步的方式交互，true表示异步xmlhttp.open(GET,AJAXServer?name=+userName,true);/使用post方式请求的代码/xmlhttp.open(POST,AJAXServer,true);/post方式下，需要设置http的请求头/xmlhttp.setRequestHeader(Content-Type,application/x-www/form-urlencoded);/post方式发送数据/xmlhttp.send(name=+userName);/5.发送数据，开始和服务器端进行交互/同步方式下，send这句话会在服务器端数据回来后才执行完/异步方式下，send这句话会立即完成执行xmlhttp.send(null);/回调函数function callback()/6.接受响应的数据/判断对象的状态是否交互完成if(xmlhttp.readyState=4) /判断http的交互是否成功 if(xmlhttp.status=200) /获取服务器端返回的数据 /使用responseXML的方式来接受XML数据对象的DOM对象 var domObj=xnlhttp.responseXML; if(domObj) /12121212 /dom中利用getElementByTagName可以根据标签名获取元素节点 var messageNodes=domObj.getElementsByTagName(message); if(messageNode.length0) /获取message节点中的文本内容 /message标签中的文本在dom中是message标签所对应的元素节点的子节点，firstChild可以获取当前节点的第一个子节点 /通过以下方式就可以获取文本内容对应的节点 var textNode=messageNodes0.firstChild; /对于文本节点，可以通过nodeValue的方式返回文本节点的内容 var reponseMessage=textNode.nodeValue; /将数据显示在页面上 /通过dom到方式中到div标签对应的元素节点 var divNode=document.getElementById(result); /设置元素节点中的html内容 divNode.innerHTML=responseMessage; else alert(xml数据格式错误，原始文本内容为：+xmlhttp.reponseText); else alert(xml数据格式错误，原始文本内容为：+xmlhttp.reponseText); else alert(出错了); 总结：AJAX应用的五个步骤：1.建立XMLHttpRequest对象2.设置回调函数3.使用open方法与服务器建立连接4.向服务器端发送数据5.在回调函数针对不同的响应状态进行处理下面用JQuery实现ajax获取xml数据function verify/1.获取文本的内容/jquery的查找节点的方式，参数中#加上id属性值可以找到一个节点/jquery的方法返回的都是jquery对象，可以继续在上面执行其他的jquery方法var jqueryobj=$(#userName);/获取节点的值var username=jqueryobj.val();/2.将文本框中的数据发送给服务器的servlet/使用jquery的XMLHTTPRequest对象的get请求的封装$.get(AJAXServer?name=+username,null(发送到服务器的数据),callback(回调函数名字,当程序运行到这句话，就会把数据发送到服务器进行处理,然后继续进行下面的代码，不会在这里等待，当服务器返回数据的时候，在执行callback函数);/javascript中一个简单的对象定义方法：var obj=name:123,age:20;/指定返回的数据类型文本，xml $.get()和$.post()返回的都是文本/$.ajax(type:POST,url:AJAXXMLServer,data:name=+userName,/传送的数据dataType:xml,/告诉JQuery返回的数据类型success:callback/定义交互完成，并且服务器正确返回数据时，调用的函数);/回调函数function callback(data(服务器端返回的纯文本信息存储在data参数中)/3.接受服务器端返回的数据/需要将data这个dom对象中的数据解析出来/首先需要将dom对象转换成JQuery的对象var jqueryObj=$(data);/获取message节点var message=jqueryObj.children();/返回的是数组/获取文本内容var text=message.text();/如果message节点不是一个，那么会把所有节点的内容拼接在一起/4.接受服务器端返回的数据动态的显示在页面上/找到保存结果信息的节点var resultObj=$(#result);resultObj.html(text);解决IE缓存问题：如果和服务器交互的内容一样，即访问的地址一样 IE就会cache缓存，我们想让每次都访问服务器，那么：给url地址加上时间，骗过浏览器，不读取缓存function verfity()var url=AJAXServer?name=+$(#userName).val();url=convertURL(url)$.get(url,null,function(data) $(#result).html(data););function convertURL(url)/获取时间戳var timestamp=(new Date().valueOf();/将时间信息拼接到url上if(url.indexof(?)=0)url=url+&t=+timestamp;elseurl=url+?t=timestamp;retun url;校验码问题，换一张问题：换一张解决中文乱码和跨域访问问题：get方式的时候，是以utf8的方式发送到服务器端的/解决方法1，页面端发出的数据做一次encodeURL，服务器端使用new String(old.getBytes(iso8859-1,UTF-8)首先：var url=AJAXServer?name=+encodeURL($(#userName).val();然后服务器：String old=httpServletRequest.getParameter(name); String name=new String(old.getBytes(iso8859-1),UTF-8);/解决方法2：页面端发出的数据做两次encodeURL 建议使用这种方法首先：var url=AJAXServer?name=+encodeURL(encodeURL($(#userName).val();服务器端：String old=httpServletRequest.getParameter(name); String name=URLDecoder.decode(old,UTF-8);跨域访问就是XMLHttpRequest访问不在同一个服务器上的url(serverlet),那么使用代理机制解决这个问题在浏览器的代码中，我们需要在调用open方法之前判断一下要连接的地址是不是以http开头的，如果是则认为要访问的是跨域资源，首先将当前的url中的“？”变成“&”这是因为将要连接的地址改为“Proxy?url=”+url以后，如果原来的url地址中有参数的话，新的url地址中就会有两个“？”这回导致服务器解析参数错误，“url=”之后的内容表示本来要访问的跨域资源的地址function convertURL(url) if(url.substring(0,7)=http:/) url=url.replace(?,&); url=Proxy?url=+url; return url;服务端要做的：.DOM相关知识：实例一：浮动窗口页面：显示浮动窗口 标题栏X 内容 我是一个窗口喔win.css：#win/*希望让窗口有边框*/border:1px red solid;/*希望让窗口的高和宽固定*/width:500px;height:400px;/*希望让窗口的位置*/position:absolute;/*绝对定位*/top:100px;left:350px;/*希望窗口开始时隐藏*/display:none;#title/*空盒子标题栏的背景颜色*/background-color:blue;/*控制标题栏的字体颜色*/color:yellow;/*控制标题栏的左内边距*/padding-left:3px;#contentpadding-left:3px;padding-top:5px;#close/*使关闭按钮向右移动*/margin-left:158px;/*用让鼠标进入时可以显示个小手*/cursor:pointer;JavaScript：function showwin()/1.找到创建窗口对应的div var winNode=$(#win);/2.让div对应的窗口显示出来/方法1：修改节点css的值，让窗口显示出来 winNode.css(display,block);/方法2：利用Jquery的show方法 winNode.show(slow);/方法3：利用Jquery的fadeIn方法 winNode.fadeIn(slow);function hide/1.找到创建窗口对应的div var winNode=$(#win);/2.让div对应的窗口隐藏/方法1：修改节点css的值，让窗口显示出来 winNode.css(display,none);/方法2：利用Jquery的show方法 winNode.hide(slow);/方法3：利用Jquery的fadeIn方法 winNode.fadeOut(slow);实例二:实现级联菜单 菜单1 子菜单1 子菜单2 菜单2 子菜单3 子菜单4css文件：/*如何让li前面不显示小圆点*/lilist-style:none;/*使li前面的小圆点消失*/margin-left:18px;/*让子菜单向右移动一段距离，达到缩进的效果*/display:none;/*子菜单隐藏*/text-decoration:none;/*去掉下划线*/JavaScript文件：/点击主菜单时候，对应的子菜单可以显示，再次单击子菜单则隐藏/需要编写代码，在页面中装在时候，给所有的菜单添加onclick的事件，保证主菜单点击时候可以显示ihe隐藏子菜单/注册页面装在时候执行的方法$(document).ready(function()/首先需要找所有的主菜单,然后给所有的主菜单注册点击事件var as=$(ul).children(a);/var as=$(ul a)as.click(function() /这里需要找到当前ul中的li，然后让li显示出来 /获取当前被点击的a节点 var aNode=$(this); /找到当前a节点的所有li兄弟节点 var lis=aNode.nextAll(li); /让子节点显示或者隐藏 lis.toggle(show););/如果点击子菜单时，装在其他页面可以这样做：$(li a).click(function() $(#content).load($(this).attr(id);); ); 实例三：可编辑的表格： 123456 123456 css文件table,td border-collapse:collapse;/*让相邻边框合并*/ border:1px solid black;/*边框*/javaSctipr文件/在页面装载时候，让所有的td都拥有一个点击事件$(document).ready(function()/找到所有的td节点 var tds=$(td); /给所有的td节点增加点击事件tds.click(tdclick););/td被点击的事件function tdclick() var td=$(this); /1.取出当前td中的文本内容保存起来var text=td.text();/2.清空td里面的内容td.html();/3.建立文本框，也就是input的元素节点var input=$();/4.设置文本框的值是保存起来的文本内容input.attr(value,text);/4.5 让文本框可以响应键盘按下的事件，主要是处理回车确认input.keyup(function(event)/0.获取当前用户按下的键值 var myEvent=event|window.event; var kcode=myEvent.keyCode;/1.判断是否是回车按下 if(kcode=13) var inputnode=$(this) /2.获取当前文本框中的内容 var inputtext=inputnode.text(); /3.清空td里面的内容 var tdNode=inputnode.parent(); /4.将保存的文本框的内容填充到td中 tdNode.html(inputtext); /5.让td重新拥有点击事件 tdNode.click(tdclick); );/5.将文本框加入到td中td.append(input);/5.5将文本框中的字高亮选中/需要将jquery对象转化成dom对象var inputdom=input.get(0);inputdom.select(); /select方法是dom中的 而不是jquery中的/6.取消onclick事件td.unbind(click);实例四：股票例子public class Stock/*昨天的收盘价*/private double yesterday;/*今天的开盘价*/private double today;/*当前价*/private doubvle now;/*股票名称*/private String name;/*股票代码*/private String id;public Stock(double yesterday.double today,String name,String id)this.yesterday=yesterday;this.today=today;=name;this.id=id;this.now=today;/*属性的get和set方法*/.public class GetStocksInfo extends HttpServlet/保存股票对象的mapprivate HashMap stocks;protected void doPost(.).protected void doGet(.)/返回两只股票的价格信息/1.计算随机数double sz=Math.random()*20;double pf=Math.random()*0.5;/通过随机数是奇数还是偶数判断股票是张还是跌boolean flagsz=(int)(Math.random()*10)%2=0;boolean flagpf=(int)(Math.random()*10)%2=0;/2.将随机数和股票的当前价格进行加或者减操作，得到新的当前价格Stock szzs=stocks.get(300001);stock pufy=stocks.get(000001);double temp;if(flagsz)temp=szzs.getNow()+sz;elsetemp=szzs.getNow()-sz;/需要对新的当前价格进行截取，只保留小数点后两位temp=(int)(temp*100)/100.0szzs.setNow(temp);if(flagpf)temp=pufy.getNow()+pf;elsetemp=pufy.getNow()-pf;temp=(int)(temp*100)/100.0pufy.setNow(temp);/3.返回两只股票的昨天收盘，今天开盘和当前价格/采用json的数据格式返回股票的信息/ /采用数组的方式回传两个股票对象,页面端的代码获得对象 /* builder.append(name:).append(szzs.getName().append(,id:).append(szzs.getId() .append(,yes:).append(szzs.getYesterday().append(,tod:).append(szzs.getToday() .append(,now:).append(szzs.getNow() .append(,) .append(name:).append(pfyh.getName().append(,id:).append(pfyh.getId() .append(,yes:).append(pfyh.getYesterday().append(,tod:).append(pfyh.getToday() .append(,now:).append(pfyh.getNow() .append(); */ /采用对象的方式回传两个股票对象 builder.append() .append().append(szzs.getId().append(:name:).append(szzs.getName() .append(,yes:).append(szzs.getYesterday().append(,tod:).append(szzs.getToday() .append(,now:).append(szzs.getNow() .append(,) .append().append(pfyh.getId().append(:name:).append(pfyh.getName() .append(,yes:).append(pfyh.getYesterday().append(,tod:).append(pfyh.getToday() .append(,now:).append(pfyh.getNow() .append();out.print(builder);/* name:szzs.getName(), id:szzs.getId(), yes:szzs.getyesterday(),