您的位置：首页 > Web前端 > JavaScript

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

2015-04-26 17:17 901 查看

首先在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/xml
httpServletResponse.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"&
c97c
gt;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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 原生js ajax dom encoding xml

相关文章推荐

新的分享

章节导航