快捷導(dǎo)航

jquery ajax學(xué)習(xí)筆記2 使用XMLHttpRequest對(duì)象的responseXML

更新時(shí)間：2011年10月16日 23:11:25 作者：

使用XMLHttpRequest對(duì)象的responseXML的方式來(lái)接受XML數(shù)據(jù)對(duì)象的DOM對(duì)象

摘要：本節(jié)補(bǔ)充ajax學(xué)習(xí)筆記1中
第二種方式：使用XMLHttpRequest對(duì)象的responseXML的方式來(lái)接受XML數(shù)據(jù)對(duì)象的DOM對(duì)象
在ajax學(xué)習(xí)筆記1中已經(jīng)對(duì)準(zhǔn)備工作和需要用到的知識(shí)做了比較詳細(xì)的介紹，本節(jié)主要介紹需要修改的代碼以及新增的代碼
.新增一個(gè)servlet類
AJAXXMLServer.java

復(fù)制代碼代碼如下:

 
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的數(shù)據(jù) 
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.取參數(shù) 
String old=request.getParameter("name"); 
StringBuffer sb=new StringBuffer(); 
sb.append("<message>"); 
//2.檢查是否有問(wèn)題 
if(old==null||old.length()==0){ 
sb.append("用戶名不能為空").append("</message>"); //拼裝XML 
}else{ 
//3.校驗(yàn)操作 
String name=old; 
if(name.equals("pan")){ 
//4.和傳統(tǒng)應(yīng)用不同之處。這一步需要將用戶感興趣的數(shù)據(jù)返回給頁(yè)面端，而不是將一個(gè)新的頁(yè)面發(fā)送給用戶 
//寫(xiě)法沒(méi)有變，本質(zhì)變了 
sb.append("用戶名["+name+"]已經(jīng)存在").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

復(fù)制代碼代碼如下:

 
<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文件
第一處：

復(fù)制代碼代碼如下:

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

改為

復(fù)制代碼代碼如下:

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

第二處：
把
responseText

復(fù)制代碼代碼如下:

 
//獲取服務(wù)器端返回的數(shù)據(jù) 
//第一種方式：獲取服務(wù)器端輸出的純文本數(shù)據(jù) 
//var responseText=xmlhttp.responseText; 
//將數(shù)據(jù)顯示在頁(yè)面上 通過(guò)dom的方式找到div標(biāo)簽對(duì)應(yīng)的元素節(jié)點(diǎn) 
//var divNode=document.getElementById("result"); 
//設(shè)置元素節(jié)點(diǎn)中的html的內(nèi)容 
//divNode.innerHTML=responseText; 

改為：
responseXML

復(fù)制代碼代碼如下:

 
//第二種方式：使用responseXML的方式來(lái)接受XML數(shù)據(jù)對(duì)象的DOM對(duì)象 
var domObj = xmlhttp.responseXML; 
var messageNodes = domObj.getElementsByTagName("message"); 
//獲取message節(jié)點(diǎn)中的文本內(nèi)容 
//message標(biāo)簽中的文本是在dom中是message標(biāo)簽所對(duì)應(yīng)的元素節(jié)點(diǎn)的子節(jié)點(diǎn),firstChild可以獲取當(dāng)前節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn) 
if (messageNodes.length > 0) { 
var textNode = messageNodes[0].firstChild; 
//對(duì)于文本節(jié)點(diǎn)來(lái)說(shuō)，可以通過(guò)nodeValue的方式返回文本 
var responseMessage = textNode.nodeValue; 
//把值responseMessage顯示在div上 
var divNode=document.getElementById("result"); 
divNode.innerHTML=responseMessage; 
} else { 
alert("XML數(shù)據(jù)格式錯(cuò)誤，原始文本內(nèi)容為：" + xmlhttp.responseText); 
} 

第三處：
把
text/html

復(fù)制代碼代碼如下:

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

改為：
text/xml

復(fù)制代碼代碼如下:

 
if(xmlhttp.overrideMimeType){ 
xmlhttp.overrideMimeType("text/xml");//XML的方式時(shí)需要修改這個(gè)地方 
} 

對(duì)于IE瀏覽器如果第三處不修改不會(huì)報(bào)錯(cuò)，但是對(duì)于firefox瀏覽器，如果此處不修改，以下語(yǔ)句會(huì)報(bào)錯(cuò)
var domObj = xmlhttp.responseXML;
可以通過(guò)增加alert語(yǔ)句來(lái)驗(yàn)證，IE瀏覽器的時(shí)候第三處修改的代碼的if語(yǔ)句不會(huì)被執(zhí)行，firefox瀏覽器的時(shí)候這個(gè)if語(yǔ)句就會(huì)被執(zhí)行

說(shuō)明：訪問(wèn)路徑、運(yùn)行截圖與ajax學(xué)習(xí)筆記1中都是已經(jīng)的，就省略了。

您可能感興趣的文章: