AJAX学习笔记之XML对象原生JS使用方法

来源：互联网发布：powershell管理linux 编辑：程序博客网时间：2024/05/26 15:58

首先在src文件下写好servlet，命名为AJAXMLServe：

import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.ServletException;import java.io.IOException;import java.io.PrintWriter;import java.net.URLDecoder;public class AJAXXMLServe extends HttpServlet{protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse){doGet(httpServletRequest,httpServletResponse);}protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse){try{//修改,响应的content-Type必须是text/xmlhttpServletResponse.setContentType("text/xml;charset=utf-8");PrintWriter out = httpServletResponse.getWriter();String old = httpServletRequest.getParameter("name");StringBuilder builder = new StringBuilder();builder.append("<message>");if(old == null || old.length() == 0){builder.append("用户名不能为空").append("</message>");}else{String name = old;if(name.equals("123")){builder.append("用户名["+name+"]未存在").append("</message>");}else{builder.append("用户名["+name+"]未存在").append("</message>");}out.println(builder.toString());}}catch(Exception e){e.printStackTrace();}}}

设置好之后，编写web.xml文件:

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  <display-name></display-name>  <welcome-file-list>    <welcome-file>ajax.html</welcome-file>  </welcome-file-list>   <p class="p1"><span class="s1">  </span><span class="s2"><</span>servlet<span class="s2">></span></p><p class="p1"><span class="s1">  <span></span></span><span class="s2"><</span>servlet-name<span class="s2">></span><span class="s1">AJAXXMLServe</span><span class="s2"></</span>servlet-name<span class="s2">></span></p><p class="p1"><span class="s1">  <span></span></span><span class="s2"><</span>servlet-class<span class="s2">></span><span class="s1">AJAXXMLServe</span><span class="s2"></</span>servlet-class<span class="s2">></span></p><p class="p1"><span class="s1">  </span><span class="s2"></</span>servlet<span class="s2">></span></p><p class="p1"><span class="s1">  </span><span class="s2"><</span>servlet-mapping<span class="s2">></span></p><p class="p1"><span class="s1">  <span></span></span><span class="s2"><</span>servlet-name<span class="s2">></span><span class="s1">AJAXXMLServe</span><span class="s2"></</span>servlet-name<span class="s2">></span></p><p class="p1"><span class="s1">  <span></span></span><span class="s2"><</span>url-pattern<span class="s2">></span><span class="s1">/AJAXXMLServe</span><span class="s2"></</span>url-pattern<span class="s2">></span></p><p class="p1"><span class="s1">  </span><span class="s2"></</span>servlet-mapping<span class="s2">></span></p> </web-app>

编写html文件：

<!DOCTYPE html><html>  <head>    <title>ajax.html</title><script type="text/javascript" src="js/jquery-1.11.2.min.js"></script><script type="text/javascript" src="js/ajax.js"></script>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=GB18030">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  </head>    <body>    This is a ajax's test <br>    <input type="text" id="user_Name" />    <input type="button" id="button" value="校验"  />    <div id="result"></div>  </body></html>

编写js文件：

<p class="p1"><span class="s1">var</span> xmlhttp;</p><p class="p1"><span class="s1">function</span> verify_xml(){</p><p class="p1"><span></span><span class="s1">var</span> user_Name = document.getElementById(<span class="s2">"user_Name"</span>).value;</p><p class="p2"><span class="s3"></span>//兼容处理，创建XMLHttpRequest对象</p><p class="p2"><span class="s3"></span><span class="s1">if</span><span class="s3">(window.XMLHttpRequest){</span>//<span class="s4">firefox</span> <span class="s4">mozillar</span> opera <span class="s4">safari</span> ie7 ie8</p><p class="p1"><span></span><span></span>xmlhttp = <span class="s1">new</span> XMLHttpRequest();</p><p class="p1"><span></span><span></span><span class="s1">if</span>(xmlhttp.overrideMimeType){<span class="s5">//部分</span><span class="s6">mozillar</span><span class="s5">返回数据bug的处理</span></p><p class="p1"><span></span><span></span><span></span>xmlhttp.overrideMimeType(<span class="s2">"text/xml"</span>);</p><p class="p1"><span></span><span></span>}</p><p class="p1"><span></span>}<span class="s1">else</span> <span class="s1">if</span>(window.ActiveXObject){<span class="s5">//所有</span><span class="s6">ie</span><span class="s5">，ie6以下的</span></p><p class="p3"><span class="s3"><span></span><span></span></span><span class="s1">var</span><span class="s3"> activexName = [</span>"MSXMl2.XMLHTTP"<span class="s3">,</span>"Microsoft.XMLHTTP"<span class="s3">];</span><span class="s5">//排在前面的版本较新，控件放在数组中</span></p><p class="p1"><span></span><span></span><span class="s1">for</span> (<span class="s1">var</span> i=0; i<activexNmae.length;i++){</p><p class="p1"><span></span><span></span><span></span><span class="s1">try</span>{</p><p class="p1"><span></span><span></span><span></span><span></span>xmlhttp = <span class="s1">new</span> ActveXObject(activexName[i]);</p><p class="p1"><span></span><span></span><span></span><span></span><span class="s1">break</span>;</p><p class="p1"><span></span><span></span><span></span>}<span class="s1">catch</span>(e){}</p><p class="p1"><span></span><span></span>}</p><p class="p1"><span></span>}</p><p class="p1"><span></span><span class="s1">if</span>(!xmlhttp){</p><p class="p3"><span class="s3"><span></span><span></span>alert(</span>"XMLHttpRequest对象创建失败"<span class="s3">);</span></p><p class="p4"><span class="s3"><span></span><span></span></span>return<span class="s3">;</span></p><p class="p4"><span class="s3"><span></span>}</span>else<span class="s3">{</span></p><p class="p2"><span class="s3"><span></span><span></span></span>//alert(<span class="s4">xmlhttp</span>);</p><p class="p1"><span></span>}</p><p class="p2"><span class="s3"></span>//注册回调函数</p><p class="p1"><span></span>xmlhttp.onreadystatechange = callback;<span class="s5">//不要加括号</span></p><p class="p5"><span></span></p><p class="p2"><span class="s3"></span>//设置连接信息，做异步处理</p><p class="p2"><span class="s3"></span>//第一个参数，表示<span class="s4">http</span>的请求方式，支持所有<span class="s4">http</span>的请求方式，主要是get和post</p><p class="p2"><span class="s3"></span>//第二个参数表示请求的<span class="s4">url</span>地址，get方式请求的参数也在<span class="s4">url</span>中</p><p class="p2"><span class="s3"></span>//第三个参数表示请求采用异步还是同步方式交互,true表示异步</p><p class="p2"><span class="s3"></span>//xmlhttp.open("GET","ajax_Server?name="+user_Name,true),get方法</p><p class="p5"><span></span></p><p class="p2"><span class="s3"></span>//以下是get请求的方法</p><p class="p1"><span></span>xmlhttp.open(<span class="s2">"GET"</span>, <span class="s2">"AJAXXMLServe?name="</span>+user_Name, <span class="s1">true</span>);</p><p class="p2"><span class="s3"></span>//设置post <span class="s4">http</span>请求头</p><p class="p2"><span class="s3"></span>//发送数据，开始和服务器进行交互</p><p class="p2"><span class="s3"></span>//同步方式下，send这句话会在服务器端数据回来才执行完</p><p class="p2"><span class="s3"></span>//异步方式下，send这句话会立即完成执行</p><p class="p1"><span></span>xmlhttp.send(<span class="s1">null</span>);</p><p class="p1">}</p><p class="p5"></p><p class="p1"><span class="s1">function</span> callback(){</p><p class="p2"><span class="s3"></span>//接收响应数据，判断对象的状态是交互完成</p><p class="p1"><span></span><span class="s1">if</span>(xmlhttp.readyState == 4){</p><p class="p1"><span></span><span></span><span class="s1">if</span>(xmlhttp.status == 200){<span class="s5">//成功的交互状态，404表示找不到页面</span></p><p class="p2"><span class="s3"><span></span><span></span><span></span></span>//使用respondXML的方式来接受XML数据对象的DOM对象<span></span><span></span><span></span></p><p class="p1"><span></span><span></span><span></span><span class="s1">var</span> domObj = xmlhttp.responseXML;</p><p class="p2"><span class="s3"><span></span><span></span><span></span></span>//希望取到<message>Text</message></p><p class="p2"><span class="s3"><span></span><span></span><span></span></span>//domObj利用getElementsByTagName可以根据标签名来获取元素节点</p><p class="p1"><span></span><span></span><span></span><span class="s1">var</span> messageNodes = domObj.getElementsByTagName(<span class="s2">"message"</span>);</p><p class="p2"><span class="s3"><span></span><span></span><span></span></span>//返回的是标签数组，就是message数组</p><p class="p1"><span></span><span></span><span></span><span class="s1">if</span>(messageNodes>0){</p><p class="p1"><span></span><span></span><span></span><span></span><span class="s1">var</span> textNode = messageNodes[0].firstChild;</p><p class="p1"><span></span><span></span><span></span><span></span><span class="s1">var</span> responseMessage = textNode.nodeValue;</p><p class="p1"><span></span><span></span><span></span><span></span><span class="s1">var</span> divNode = document.getElementById(<span class="s2">"result"</span>);<span class="s5">//找到节点</span></p><p class="p1"><span></span><span></span><span></span><span></span>divNode.innerHTML = responseMessage;</p><p class="p1"><span></span><span></span><span></span>}<span class="s1">else</span>{</p><p class="p1"><span></span><span></span><span></span><span></span>alert(<span class="s2">"数据出错。"</span>+xmlhttp.responseText);</p><p class="p1"><span></span><span></span><span></span>}<span></span><span></span></p><p class="p1"><span></span><span></span>}<span class="s1">else</span>{</p><p class="p1"><span></span><span></span><span></span>alert(<span class="s2">"数据出错。"</span>+xmlhttp.responseText);</p><p class="p1"><span></span><span></span>}</p><p class="p1"><span></span>}</p><p class="p2"><span class="s3"></span>//</p><p class="p5"><span></span></p><p class="p1">}</p>

写完之后，就可以愉快的运行啦

0 0