第二种方式:使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象
在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍,本节主要介绍需要修改的代码以及新增的代码
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); } }
2.修改web.xml
加入AJAXXMLServer类的配置
<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>
3.修改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;
改为:
第三处:
把
text/html
if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/html"); }
改为:
if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml");//XML的方式时需要修改这个地方 }
对于IE浏览器如果第三处不修改不会报错,但是对于firefox浏览器,如果此处不修改,以下语句会报错 var domObj = xmlhttp.responseXML; 可以通过增加alert语句来验证,IE浏览器的时候第三处修改的代码的if语句不会被执行,firefox浏览器的时候这个if语句就会被执行 说明:访问路径、运行截图与ajax学习笔记1中都是已经的,就省略了。