jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML

摘要：本节补充ajax学习笔记1中
第二种方式：使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象
在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍，本节主要介绍需要修改的代码以及新增的代码
.新增一个servlet类
AJAXXMLServer.java

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; 
//XML的数据 
public class AJAXXMLServer extends HttpServlet { 
public void doGet(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
//response.setContentType("text/html;charset=utf-8"); 
response.setContentType("text/xml;charset=utf-8"); //修改此次为text/xml 
PrintWriter out=response.getWriter(); 
//1.取参数 
String old=request.getParameter("name"); 
StringBuffer sb=new StringBuffer(); 
sb.append("<message>"); 
//2.检查是否有问题 
if(old==null||old.length()==0){ 
sb.append("用户名不能为空").append("</message>"); //拼装XML 
}else{ 
//3.校验操作 
String name=old; 
if(name.equals("pan")){ 
//4.和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面端，而不是将一个新的页面发送给用户 
//写法没有变，本质变了 
sb.append("用户名["+name+"]已经存在").append("</message>"); //拼装XML 
}else{ 
sb.append("用户名["+name+"]可以使用").append("</message>"); //拼装XML 
} 
} 
out.println(sb.toString());//注意，此句一定不能少了，并且注意放置的位置 
} 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
this.doGet(request,response); 
} 
}

.修改web.xml
加入AJAXXMLServer类的配置
web.xml

<servlet> 
<servlet-name>AJAXXMLServer</servlet-name> 
<servlet-class>AJAXXMLServer</servlet-class> 
</servlet> 
<servlet-mapping> 
<servlet-name>AJAXXMLServer</servlet-name> 
<url-pattern>/AJAXXMLServer</url-pattern> 
</servlet-mapping>

.修改verify.js文件
第一处：

把xmlhttp.open("GET","AJAXServer?name="+username,true);

改为

xmlhttp.open("GET","AJAXXMLServer?name="+username,true);//responseXML方式，修改类名

第二处：
把
responseText

//获取服务器端返回的数据 
//第一种方式：获取服务器端输出的纯文本数据 
//var responseText=xmlhttp.responseText; 
//将数据显示在页面上 通过dom的方式找到div标签对应的元素节点 
//var divNode=document.getElementById("result"); 
//设置元素节点中的html的内容 
//divNode.innerHTML=responseText;

改为：
responseXML

//第二种方式：使用responseXML的方式来接受XML数据对象的DOM对象 
var domObj = xmlhttp.responseXML; 
var messageNodes = domObj.getElementsByTagName("message"); 
//获取message节点中的文本内容 
//message标签中的文本是在dom中是message标签所对应的元素节点的子节点,firstChild可以获取当前节点的第一个子节点 
if (messageNodes.length > 0) { 
var textNode = messageNodes[0].firstChild; 
//对于文本节点来说，可以通过nodeValue的方式返回文本 
var responseMessage = textNode.nodeValue; 
//把值responseMessage显示在div上 
var divNode=document.getElementById("result"); 
divNode.innerHTML=responseMessage; 
} else { 
alert("XML数据格式错误，原始文本内容为：" + xmlhttp.responseText); 
}

第三处：
把
text/html

if(xmlhttp.overrideMimeType){ 
xmlhttp.overrideMimeType("text/html"); 
}

改为：
text/xml

if(xmlhttp.overrideMimeType){ 
xmlhttp.overrideMimeType("text/xml");//XML的方式时需要修改这个地方 
}

对于IE浏览器如果第三处不修改不会报错，但是对于firefox浏览器，如果此处不修改，以下语句会报错
var domObj = xmlhttp.responseXML;
可以通过增加alert语句来验证，IE浏览器的时候第三处修改的代码的if语句不会被执行，firefox浏览器的时候这个if语句就会被执行

说明：访问路径、运行截图与ajax学习笔记1中都是已经的，就省略了。