AJAX学习笔记02
学习课程：
| 学习内容 |
相关文件 |
| 通过XMLHttpRequest对象手动实现AJAX |
AjaxServlet.java verifyOwn.js verifyOwn.jsp |
| 通过XMLHttpRequest对象接受与处理XML数据 |
AjaxXml.java verifyXml.js verifyXml.jsp |
| 使用JQuery接受和处理XML数据 |
AjaxXml.java verifyXml-jquery.js verifyXml-jquery.jsp |
学习步骤：
| 说明： Servlet文件 AjaxServlet.java对应的URL为servlet/AjaxServlet Servlet文件 AjaxXml.java对应的URL为servlet/AjaxXml 特别提醒：JavaScript代码区分大小写 |
| JSP页面的代码都一样，只不过在调用JS代码文件上有区别
-
-
<scripttypescripttype= "text/javascript" src= "jslib/verifyOwn.js"></script><input type= "text" id= "username" name= "username"/><input type= "button" id= "submit" value= "提交" onclick= "verify()"/> <div id= "result"></div>
|
1.通过XMLHttpRequest对象手动实现AJAX
|
| AjaxServlet.java文件中doPost方法的代码 |
|
-
-
request.setCharacterEncoding( "utf-8" );response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();String s = request.getParameter( "username" );out.print( "返回结果:" + s );
|
|
|
| VerifyOwn.js文件的所有代码 |
-
-
var xmlhttp = null;//定义成全局变量，可以在回调函数中进行调用 function verify(){//1.使用DOM方式获取文本框中的值 var userName = document.getElementById("username").value;//2.创建XMLHttpRequest对象 //需要针对IE和其它类型的浏览器建立这个对象的不同方式写不同的代码 if ( window.XMLHttpRequest ){//如果这个对象存在 //针对FireFox，MOzillar，Opear，Safari，IE7，IE8这些浏览器 xmlhttp = new XMLHttpRequest();//对于某些特殊浏览器回穿数据是有BUG,进行修正的代码如下 if ( xmlhttp.overrideMimeType ){xmlhttp.overrideMimeType("text/xml");}} else if ( window.ActiveXObject ){ //Active控件 //针对IE5，IE5 //两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js的数组中 var activexName = ( "MSXML2.XMLHTTP" ,"Microsoft.XMLHTTP" );//= new ActiveXObject(""); for ( var i = 0; i < activeName.length; i++ ){//取出一个空间名进行创建，如果创建成功，种植 //如果创建失败，则抛出异常，然后可以继续循环，继续尝试创建 try {xmlhttp = new ActiveXObject( activeName[i] );} catch ( e ) {}}}//确认XMLHttpRequest对象成功 if ( !xmlhttp ){alert("XMLHttpRequest创建失败。");} else {//IE7.0弹出信息框"[Object]"表示表用成功 alert( xmlhttp );}//3.注册回调函数 //需要的是把回调函数的函数名注册个xmlhttp对象，如果加入括号就调用该函数 //，将函数的返回值注册给该对象 xmlhttp.onreadystatechange = callback;//4.设置连接信息 //第一个参数表示http的请求方式，支持所有的请求方式，主要使用get和post //第二个参数表示请求的URL地址，get方式请求的参数也在URL中 //第三个参数表示是采用同步还是异步方式交互，默认为true //注：第二个参数传递的userName是在JavaScript中定义的变量不是页面中的Id //xmlhttp.open("GET" ,"servlet/AjaxServlet?username="+userName //, true ); //5.发送数据，开始和服务器进行交互，设置为null，get方式要传递的数据都在URL中设置了，不需 //要单独设置。如果采用同步方式，则在此处暂停，等待从服务器端传递来信息 //异步方式下，send不会暂停，而是向下执行 //xmlhttp.send( null ); //下面是采用Post方法进行提交数据 xmlhttp.open( "POST" , "servlet/AjaxServlet" , true );xmlhttp.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );xmlhttp.send( "username=" + userName );}//定义回调函数 function callback(){//6.判断XMLHttpRequest交互完成，并且判断http响应是成功的，才进行接受。 if ( xmlhttp.readyState == 4 ){ //交互状态一共有5中从0到4，状态为4表示完成 if ( xmlhttp.status == 200 ){ //判断http的交互是否成功 ,返回代码为200，表示成功 //获取服务器端返回的数据，有两种形式 //1.存文本数据 var responseText = xmlhttp.responseText;//将数据显示到页面上 //通过dom的方式找到div标签将所对应的元素节点 var divNode = document.getElementById( "result" );//设置元素结点的html内容 divNode.innerHTML = responseText;}}}
|
|
2.通过XMLHttpRequest对象接受与处理XML数据
|
| AjaxXml.java中doPost方法的代码，让数据以XML的形式返回到客户端 |
|
-
-
response.setContentType("text/xml;charset=utf-8");request.setCharacterEncoding( "utf-8" );PrintWriter out = response.getWriter();StringBuffer s = new StringBuffer();s.append( "<message>" );String param = request.getParameter( "username" );if ( (null == param) || "".equals(param.trim()) ){s.append( "获取数据为空" ).append( "</message>" );} else {s.append( param ).append( "</message>" );}out.println( s.toString() );
|
|
|
| verifyXml.js文件中回调函数的主要代码，其他的代码与上面的一样 注：domObj.getElementsByTagName( "message" );此句代码是Elements不是Element |
|
-
-
//通过DOM方式获取服务器端返回的数据 var divNode = document.getElementById( "result" );//使用responseXML的方式来接受XML数据对象的DOM对象 var domObj = xmlhttp.responseXML;//首先找到message标签对应的元素节点，返回一个数组类型 var messageNode = domObj.getElementsByTagName( "message" );//通过判断messageNode的长度来判断正确性 if ( messageNode.length == 0 ){divNode.innerHTML = "获取数据错误。";} else {//寻找标签中的文本内容,获取第一个元素，获取元素中的内容 var result = messageNode[0].firstChild;var responseText = result.nodeValue;//设置元素结点的html内容 divNode.innerHTML = responseText; }
|
|
3.使用JQuery接受和处理XML数据
| 这个实例只需要修改js页面代码就可以了 在对这个实例进行调试的时候发现一个现象 这次居然支持中文了，是不是因为接受和处理的是XML数据呢？ |
-
-
function verify(){//1.获取文本框中的内容，返回类型为JQuery var jqueryObj = $("#username");var userName = jqueryObj.val();//使用jquery的XMLHttpRequest对象POST请求的封装 $.ajax( {type : "POST" , //请求方式 url : "servlet/AjaxXml" , //服务器端URL地址 data : "username=" + userName , //发送的数据 dataType : "xml" , //预期服务器返回的数据类型 //定义交互完成，并且服务器正确返回数据时调用的回调函数 success : callback });}//回调函数 function callback( data ){//需要将data这个DOM对象中的数据解析出来 //首先需要将dom的对象中的数据解析出来 var jqueryObj = $( data );//获取messsage节点 var message = jqueryObj.children();//获取文本内容 var text = message.text();var resultObj = $("#result");//4.将服务器端返回来的数据动态显示到页面上 resultObj.html( text );}
|
| 附件信息： javascript中简单对象的定义方法 var obj = {}; 为对象添加属性 var obj = { name:"123" , age:20 }; |
文章来源: blog.csdn.net，作者：fengda2870，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/fengda2870/article/details/3293953
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
评论（0）