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中都是已經的，就省略了。