淘豆网网友xxj16588近日为您收集整理了关于ajax学习的文档，希望对您的工作和学习有所帮助。以下是文档介绍：ajax学习 1.走进 Ajax最主要的是 XMLHttpRequest 进行异步数据检索然后使用 Dom 进行动态显示和交互使用 xml 和 XSLT 进行数据交换和处理使用 XHTML 和 css 的给予标注的表示技术使用 JavaScript 将以上技术融合在一起2.基本步骤:Servlet 定义:public class AJAXServlet extends HttpServlet{public 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.g(来源：淘豆网[])etParameter("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{try{user.setEmail((来源：淘豆网[])email);user.setUsername(username);user.setPassword(password);user.setHeadpic("nophoto.gif");userService.addUser(user);request.getSession().setAttribute("userlogin",username);//4.和传统应用不同之处,这一步需要将用户感兴趣的数据返回给页面,而不是把一个新的页面发送给用户out.print("ess");}catch(Exception e){//4.和传统应用不同之处,这一步需要将用户感兴趣的数据返回给页面,而不是把一个新的页面发送给用户out.print("注册时出错,请重新注册");}}out.close();}}下载 JQuery Ajax 库 JQuery-1.2.6-release 中的 dist 中的 JQuery,该文件是 J(来源：淘豆网[])avaScript 文件JQuery 的使用:把 JQuery 文件和下面的 JavaScript 文件放在一起在 jsp 页面中引用:<script type="text/javascript" src="jslib/jquery.js"></script><script type="text/javascript" src="jslib/verify.js"></script>verify.js 如下:function verify{//1.获取文本的内容//jquery 的查找节点的方式,参数中#加上 id 属性值可以找到一个节点//jquery 的方法返回的都是 jquery 对象,可以继续在上面执行其他的 jquery 方法var jqueryobj=$("#userName");//获取节点的值var username=jqueryo(来源：淘豆网[])bj.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("A(来源：淘豆网[])JAXServer?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,IE8xmlhttp=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;i<activexName.length;i++){try{//取出一个控件名(来源：淘豆网[])进行创建,如果创建成功就终止循环,如果创建失败,会抛出异常,然后可以继续循环,继续尝试创建xmlhttp=new ActiveXObject(activexName[i]);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 中//第三个参数表示采用异步还是同步的方式交互,tru(来源：淘豆网[])e 表示异步xmlhttp.open("GET","AJAXServer?name="+userName,true);//使用 post 方式请求的代码//xmlhttp.open("POST","AJAXServer",true);//post 方式下,需要设置 http 的请求头//xmlhttp.setRequestHeader("Content-Type","application/x-ded");//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 HttpServlet{public 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("<message>");if(userService.isExit(username)){//4.和传统应用不同之处,这一步需要将用户感兴趣的数据返回给页面,而不是把一个新的页面发送给用户builder.append("该用户已经存在").append("</message>");}else{try{user.setEmail(email);user.setUsername(username);user.setPassword(password);user.setHeadpic("nophoto.gif");userService.addUser(user);request.getSession().setAttribute("userlogin",username);//4.和传统应用不同之处,这一步需要将用户感兴趣的数据返回给页面,而不是把一个新的页面发送给用户builder.append("ess").append("</message>");}catch(Exception e){//4.和传统应用不同之处,这一步需要将用户感兴趣的数据返回给页面,而不是把一个新的页面发送给用户builder.append("注册时出错,请重新注册").append("</message>");}}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,IE8xmlhttp=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;i<activexName.length;i++){try{//取出一个控件名进行创建,如果创建成功就终止循环,如果创建失败,会抛出异常,然后可以继续循环,继续尝试创建xmlhttp=new ActiveXObject(activexName[i]);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-ded");//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){//<message>12121212</message>//dom 中利用 getElementByTagName 可以根据标签名获取元素节点var messageNodes=domObj.getElementsByTagName("message");if(messageNode.length>0){//获取 message 节点中的文本内容//message 标签中的文本在 dom 中是 message 标签所对应的元素节点的子节点,firstChild 可以获取当前节点的第一个子节点//通过以下方式就可以获取文本内容对应的节点var textNode=messageNodes[0].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 ess: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;}else{url=url+"?t="timestamp;}retun url;}校验码问题,换一张问题:<img src="ImgeServer"/><a onclick="changimg()" herf="#">换一张</a>解决中文乱码和跨域访问问题:get 方式的时候,是以 utf8 的方式发送到服务器端的//解决方法 1,页面端发出的数据做一次 encodeURL,服务器端使用 newString(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)==""){url=url.replace("?","&");url="Proxy?url="+url;}return url;}服务端要做的:.....DOM 相关知识:实例一:浮动窗口页面:<a onclick="showwin()" href="#">显示浮动窗口</a><!--如何表示页面中的一个弹出窗口--><div id="win"><div id="title">标题栏<span id="close" onclik="hide()">X</span></div><div id="content">内容</div>我是一个窗口喔</div>win.css:#win{/**希望让窗口有边框*/border:1px red solid;/**希望让窗口的高和宽固定*/width:500px;height:400px;/**希望让窗口的位置*/position:absolute;/**绝对定位*/top:100px;left:350px;/**希望窗口开始时隐藏*/display:none;}#title{/**空盒子标题栏的背景颜色*/background-color:blue;/**控制标题栏的字体颜色*/

播放器加载中，请稍候...
系统无法检测到您的Adobe Flash Player版本
建议您在线安装最新版本的Flash Player 在线安装