ajax1学习.docx
- 文档编号:4189016
- 上传时间:2022-11-28
- 格式:DOCX
- 页数:22
- 大小:27.54KB
ajax1学习.docx
《ajax1学习.docx》由会员分享,可在线阅读,更多相关《ajax1学习.docx(22页珍藏版)》请在冰豆网上搜索。
ajax1学习
2.走进Ajax
最主要的是XMLHttpRequest进行异步数据检索
然后使用Dom进行动态显示和交互
使用xml和XSLT进行数据交换和处理
使用XHTML和css的给予标注的表示技术
使用JavaScript将以上技术融合在一起
2.基本步骤:
Servlet定义:
publicclassAJAXServletextendsHttpServlet{
publicvoiddoPost(....){
doGet(...);
}
publicvoiddoGet(...){
//设置编码方式,XMLHttpRequest对象总采用UTF-8方式发送请求
request.setCharacterEncoding("UTF-8");
//设置中文输出流
response.setContentType("text/html;charset=UTF-8");
//获取页面输出流
PrintWriterout= response.getWriter();
//1.取参数
Stringusername=request.getParameter("username");
Stringpassword=request.getParameter("password");
Stringemail=request.getParameter("email");
//2.检查参数是否有问题
//3.校验操作
UserServiceImpluserService=newUserServiceImpl();
Useruser=newUser();
UserHelperuserHelper=newUserHelper();
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("success");
}catch(Exceptione){
//4.和传统应用不同之处,这一步需要将用户感兴趣的数据返回给页面,而不是把一个新的页面发送给用户
out.print("注册时出错,请重新注册");
}
}
out.close();
}
}
下载JQueryAjax库JQuery-1.2.6-release中的dist中的JQuery,该文件是JavaScript文件
JQuery的使用:
把JQuery文件和下面的JavaScript文件放在一起
在jsp页面中引用:
verify.js如下:
functionverify{
//1.获取文本的内容
//jquery的查找节点的方式,参数中#加上id属性值可以找到一个节点
//jquery的方法返回的都是jquery对象,可以继续在上面执行其他的jquery方法
varjqueryobj=$("#userName");
//获取节点的值
varusername=jqueryobj.val();
//2.将文本框中的数据发送给服务器的servlet
//使用jquery的XMLHTTPRequest对象的get请求的封装
$.get("AJAXServer?
name="+username,null(发送到服务器的数据),callback(回调函数名字,当程序运行到这句话,就会把数据发送到服务器进行处理,然后继续进行下面的代码,不会在这里等待,当服务器返回数据的时候,在执行callback函数));
}
//回调函数
functioncallback(data(服务器端返回的纯文本信息存储在data参数中)){
//3.接受服务器端返回的数据
//alert(data);
//4.接受服务器端返回的数据动态的显示在页面上
//找到保存结果信息的节点
varresultObj=$("#result");
resultObj.html(data);
}
简化上面的写法:
functionverfity(){
$.get("AJAXServer?
name="+$("#userName").val(),null,function(data){
$("#result").html(data);
});
}
不用框架来用AJAX
//这个方法使用XMLHTTPRequest对象来进行ajax的异步数据交互,接受纯文本的信息
varxmlhttp;
functionverfity(){
//1.使用dom的方式获取文本框的值
//document.getElementById("userName")是dom中获取元素节点的一种方法,一个元素节点对应html页面中的一个标签
//.value可以获取一个元素节点的value属性值
varuserName=document.getElementById("userName").value;
//2.创建XMLHttpRequest对象
//这是XMLHttpRequest对象使用中最复杂的一步
if(window.XMLHttpRequest){
//针对Firefox,Mozillar,Opera,Safari,IE7,IE8
xmlhttp=newXMLHttpRequest();
//针对某些特定版本的mozillar浏览器的bug进行修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}elseif(window.ActiveXObject){
//针对IE6,IE5.5,IE5
//两个可以用于创建XMLHttpRequest对象的控件名称,保存在一个js的数组中排在前面的版本较新
varactivexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(vari=0;i try{ //取出一个控件名进行创建,如果创建成功就终止循环,如果创建失败,会抛出异常,然后可以继续循环,继续尝试创建 xmlhttp=newActiveXObject(activexName[i]); break; }catch(e){ } } } //确认XMLHttpRequest对象创建成功 //xmlhttp本来是不存在的,为false,取反就是存在了,为true if(! 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); } //回调函数 functioncallback(){ //6.接受响应的数据 //判断对象的状态是否交互完成 if(xmlhttp.readyState==4){ //判断http的交互是否成功 if(xmlhttp.status==200){ //获取服务器端返回的数据 //获取服务器端输出的纯文本数据 varresponseText=xnlhttp.responseText; //将数据显示在页面上 //通过dom到方式中到div标签对应的元素节点 vardivNode=document.getElementById("result"); //设置元素节点中的html内容 divNode.innerHTML=responseText; }else{ alert("出错了"); } } } 下面返回XML数据 Servlet定义: publicclassAJAXXMLServletextendsHttpServlet{ publicvoiddoPost(....){ doGet(...); } publicvoiddoGet(...){ //设置编码方式,XMLHttpRequest对象总采用UTF-8方式发送请求 request.setCharacterEncoding("UTF-8"); //设置中文输出流 修改点1--------- response.setContentType("text/xml;charset=UTF-8"); //获取页面输出流 PrintWriterout= response.getWriter(); //1.取参数 Stringusername=request.getParameter("username"); Stringpassword=request.getParameter("password"); Stringemail=request.getParameter("email"); //2.检查参数是否有问题 //3.校验操作 StringBuilderbuilder=newStringBuilder(); builder.append(" if(userService.isExit(username)){ //4.和传统应用不同之处,这一步需要将用户感兴趣的数据返回给页面,而不是把一个新的页面发送给用户 builder.append("该用户已经存在").append(""); }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("success").append(""); }catch(Exceptione){ //4.和传统应用不同之处,这一步需要将用户感兴趣的数据返回给页面,而不是把一个新的页面发送给用户 builder.append("注册时出错,请重新注册").append(""); } } out.println(build.toString); out.close(); } } //这个方法使用XMLHTTPRequest对象来进行ajax的异步数据交互,接受纯文本的信息 varxmlhttp; functionverfity(){ //1.使用dom的方式获取文本框的值 //document.getElementById("userName")是dom中获取元素节点的一种方法,一个元素节点对应html页面中的一个标签 //.value可以获取一个元素节点的value属性值 varuserName=document.getElementById("userName").value; //2.创建XMLHttpRequest对象 //这是XMLHttpRequest对象使用中最复杂的一步 if(window.XMLHttpRequest){ //针对Firefox,Mozillar,Opera,Safari,IE7,IE8 xmlhttp=newXMLHttpRequest(); //针对某些特定版本的mozillar浏览器的bug进行修正 if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml"); } }elseif(window.ActiveXObject){ //针对IE6,IE5.5,IE5 //两个可以用于创建XMLHttpRequest对象的控件名称,保存在一个js的数组中排在前面的版本较新 varactivexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for(vari=0;i try{ //取出一个控件名进行创建,如果创建成功就终止循环,如果创建失败,会抛出异常,然后可以继续循环,继续尝试创建 xmlhttp=newActiveXObject(activexName[i]); break; }catch(e){ } } } //确认XMLHttpRequest对象创建成功 //xmlhttp本来是不存在的,为false,取反就是存在了,为true if(! 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); } //回调函数 functioncallback(){ //6.接受响应的数据 //判断对象的状态是否交互完成 if(xmlhttp.readyState==4){ //判断http的交互是否成功 if(xmlhttp.status==200){ //获取服务器端返回的数据 //使用responseXML的方式来接受XML数据对象的DOM对象 vardomObj=xnlhttp.responseXML; if(domObj){ // //dom中利用getElementByTagName可以根据标签名获取元素节点 varmessageNodes=domObj.getElementsByTagName("message"); if(messageNode.length>0){ //获取message节点中的文本内容 //message标签中的文本在dom中是message标签所对应的元素节点的子节点,firstChild可以获取当前节点的第一个子节点 //通过以下方式就可以获取文本内容对应的节点 vartextNode=messageNodes[0].firstChild; //对于文本节点,可以通过nodeValue的方式返回文本节点的内容 varreponseMessage=textNode.nodeValue; //将数据显示在页面上 //通过dom到方式中到div标签对应的元素节点 vardivNode=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数据 functionverify{ //1.获取文本的内容 //jquery的查找节点的方式,参数中#加上id属性值可以找到一个节点 //jquery的方法返回的都是jquery对象,可以继续在上面执行其他的jquery方法 varjqueryobj=$("#userName"); //获取节点的值 varusername=jqueryobj.val(); //2.将文本框中的数据发送给服务器的servlet //使用jquery的XMLHTTPRequest对象的get请求的封装 $.get("AJAXServer? name="+username,null(发送到服务器的数据),callback(回调函数名字,当程序运行到这句话,就会把数据发送到服务器进行处理,然后继续进行下面的代码,不会在这里等待,当服务器返回数据的时候,在执行callback函数)); //javascript中一个简单的对象定义方法: varobj={name: "123",age: 20}; //指定返回的数据类型文本,xml $.get()和$.post()返回的都是文本 //$.ajax({ type: "POST", url: "AJAXXMLServer", data: "name="+userName,//传送的数据 dataType: "xml",//告诉JQuery返回的数据类型 success: callback//定义交互完成,并且服务器正确返回数据时,调用的函数 }); } //回调函数 functioncallback(data(服务器端返回的纯文本信息存储在data参数中)){ //3.接受服务器端返回的数据 //需要将data这个dom对象中的数据解析出来 //首先需要将dom对象转换成JQuery的对象 varjqueryObj=$(data); //获取message节点 varmessage=jqueryObj.children();//返回的是数组 //获取文本内容 var
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ajax1 学习
![提示](https://static.bdocx.com/images/bang_tan.gif)