摘要：本节补充ajax学习笔记1中
第二种方式：使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象
在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍，本节主要介绍需要修改的代码以及新增的代码
1.新增一个servlet类
AJAXXMLServer.java
1 import javax.servlet.http.HttpServlet;
2 import javax.servlet.http.HttpServletRequest;
3 import javax.servlet.http.HttpServletResponse;
4 import javax.servlet.ServletException;
5 import java.io.IOException;
6 import java.io.PrintWriter;
7 //XML的数据
8 public class AJAXXMLServer extends HttpServlet {
9 public void doGet(HttpServletRequest request, HttpServletResponse response)
10 throws ServletException, IOException {
11 //response.setContentType("text/html;charset=utf-8");
12 response.setContentType("text/xml;charset=utf-8"); //修改此次为text/xml
13
14 PrintWriter out=response.getWriter();
15 //1.取参数
16 String old=request.getParameter("name");
17 StringBuffer sb=new StringBuffer();
18 sb.append("<message>");
19 //2.检查是否有问题
20 if(old==null||old.length()==0){
21 sb.append("用户名不能为空").append("</message>"); //拼装XML
22 }else{
23 //3.校验操作
24 String name=old;
25 if(name.equals("pan")){
26 //4.和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面端，而不是将一个新的页面发送给用户
27 //写法没有变，本质变了
28 sb.append("用户名["+name+"]已经存在").append("</message>"); //拼装XML
29 }else{
30 sb.append("用户名["+name+"]可以使用").append("</message>"); //拼装XML
31 }
32 }
33 out.println(sb.toString());//注意，此句一定不能少了，并且注意放置的位置
34 }
35 public void doPost(HttpServletRequest request, HttpServletResponse response)
36 throws ServletException, IOException {
37 this.doGet(request,response);
38 }
39 }
2.修改web.xml
加入AJAXXMLServer类的配置
1 <servlet>
2 <servlet-name>AJAXXMLServer</servlet-name>
3 <servlet-class>AJAXXMLServer</servlet-class>
4 </servlet>
5 <servlet-mapping>
6 <servlet-name>AJAXXMLServer</servlet-name>
7 <url-pattern>/AJAXXMLServer</url-pattern>
8 </servlet-mapping>
3.修改verify.js文件
第一处：
把xmlhttp.open("GET","AJAXServer?name="+username,true);
改为
xmlhttp.open("GET","AJAXXMLServer?name="+username,true);//responseXML方式，修改类名
第二处：
把
1 //获取服务器端返回的数据
2 //第一种方式：获取服务器端输出的纯文本数据
3 //var responseText=xmlhttp.responseText;
4 //将数据显示在页面上 通过dom的方式找到div标签对应的元素节点
5 //var divNode=document.getElementById("result");
6 //设置元素节点中的html的内容
7 //divNode.innerHTML=responseText;
改为：
1 //第二种方式：使用responseXML的方式来接受XML数据对象的DOM对象
2 var domObj = xmlhttp.responseXML;
3 var messageNodes = domObj.getElementsByTagName("message");
4 //获取message节点中的文本内容
5 //message标签中的文本是在dom中是message标签所对应的元素节点的子节点,firstChild可以获取当前节点的第一个子节点
6 if (messageNodes.length > 0) {
7 var textNode = messageNodes[0].firstChild;
8 //对于文本节点来说，可以通过nodeValue的方式返回文本
9 var responseMessage = textNode.nodeValue;
10 //把值responseMessage显示在div上
11 var divNode=document.getElementById("result");
12 divNode.innerHTML=responseMessage;
13 } else {
14 alert("XML数据格式错误，原始文本内容为：" + xmlhttp.responseText);
15 }
第三处：
把
1 if(xmlhttp.overrideMimeType){
2 xmlhttp.overrideMimeType("text/html");
3 }
改为：
1 if(xmlhttp.overrideMimeType){
2 xmlhttp.overrideMimeType("text/xml");//XML的方式时需要修改这个地方
3 }
对于IE浏览器如果第三处不修改不会报错，但是对于firefox浏览器，如果此处不修改，以下语句会报错
var domObj = xmlhttp.responseXML;
可以通过增加alert语句来验证，IE浏览器的时候第三处修改的代码的if语句不会被执行，firefox浏览器的时候这个if语句就会被执行
说明：访问路径、运行截图与ajax学习笔记1中都是已经的，就省略了。