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
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ā)送給用戶
//寫法沒(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
<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
//獲取服務(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
//第二種方式:使用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
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/html");
}
改為:
text/xml
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)的,就省略了。
第二種方式:使用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ā)送給用戶
//寫法沒(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)的,就省略了。
您可能感興趣的文章:
- jQuery 利用$.ajax 時(shí)獲取原生XMLHttpRequest 對(duì)象的方法
- AJAX XMLHttpRequest對(duì)象詳解
- 解析ajax核心XMLHTTPRequest對(duì)象的創(chuàng)建與瀏覽器的兼容問(wèn)題
- 如何用ajax來(lái)創(chuàng)建一個(gè)XMLHttpRequest對(duì)象
- AJAX中同時(shí)發(fā)送多個(gè)請(qǐng)求XMLHttpRequest對(duì)象處理方法
- AJAX客戶端說(shuō)明,XMLHttpRequest對(duì)象
- AJax 學(xué)習(xí)筆記一(XMLHTTPRequest對(duì)象)
- ajax 入門基礎(chǔ)之 XMLHttpRequest對(duì)象總結(jié)
- AJAX XMLHttpRequest對(duì)象創(chuàng)建使用詳解
相關(guān)文章
使用jquery實(shí)現(xiàn)IE下按backspace相當(dāng)于返回操作
后退鍵在各瀏覽器下默認(rèn)為點(diǎn)擊了一下后退按鈕,下面為大家介紹下如何實(shí)現(xiàn)實(shí)現(xiàn)IE下按backspace相當(dāng)于返回操作,需要的朋友可以參考下2014-03-03
jQuery實(shí)現(xiàn)上下滾動(dòng)公告欄詳細(xì)代碼
之前做項(xiàng)目的時(shí)候,一直都想著做一個(gè)上下滾動(dòng)的公告欄,作為展示網(wǎng)站的最新公告信息,給用戶帶來(lái)極好的用戶體驗(yàn),下面小編通過(guò)實(shí)例代碼給大家分享基于jQuery實(shí)現(xiàn)上下滾動(dòng)公告欄,感興趣的朋友一起看看吧2018-11-11
基于Jquery的動(dòng)態(tài)創(chuàng)建DOM元素的代碼
jquery動(dòng)態(tài)創(chuàng)建頁(yè)面元素,mark一下,以備以后查詢時(shí)使用。以創(chuàng)建div和input為例。2010-12-12
jQuery網(wǎng)頁(yè)定位導(dǎo)航特效實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery網(wǎng)頁(yè)定位導(dǎo)航特效實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了jQuery網(wǎng)頁(yè)定位導(dǎo)航的功能描述、原理與核心實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-12-12
jQuery實(shí)現(xiàn)的checkbox級(jí)聯(lián)選擇下拉菜單效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的checkbox級(jí)聯(lián)選擇下拉菜單效果,涉及jQuery鼠標(biāo)事件響應(yīng)及表格table動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12
jQuery特殊符號(hào)轉(zhuǎn)義的實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇jQuery特殊符號(hào)轉(zhuǎn)義的實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11

