AJAX学习笔记02

 

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 };