jquery中ajax學(xué)習(xí)筆記3
更新時(shí)間:2011年10月16日 23:19:45 作者:
由于很多知識(shí)都已經(jīng)做了詳細(xì)介紹,本節(jié)只介紹需要修改的代碼,使用jqery封裝的ajax使用XML格式接收服務(wù)器端的數(shù)據(jù),web.xml、后臺(tái)的servet都不用改
摘要:
ajax學(xué)習(xí)1中介紹了使用jquery封裝的ajax來接收服務(wù)器端的文本數(shù)據(jù)以及使用XMLHttpReques對(duì)象來接收服務(wù)器端的文本數(shù)據(jù)
ajax學(xué)習(xí)2中介紹了使用XMLHttpReques來接收服務(wù)器的端XML數(shù)據(jù),本節(jié)主要介紹使用jqery封裝的ajax使用XML格式接收服務(wù)器端的數(shù)據(jù)。
由于很多知識(shí)都已經(jīng)做了詳細(xì)介紹,本節(jié)只介紹需要修改的代碼,使用jqery封裝的ajax使用XML格式接收服務(wù)器端的數(shù)據(jù),web.xml、后臺(tái)的servet都不用改,
只是ajax.html中調(diào)用的方法名稱修改一下,改為新增加的javascript方法。
用到的主要的一個(gè)方法介紹:
jQuery.ajax(options):通過HTTP請(qǐng)求加載遠(yuǎn)程數(shù)據(jù),
返回值:XMLHttpRequest
參數(shù):options(可選),ajax請(qǐng)求設(shè)置。所有選項(xiàng)都是可選的。
主要選項(xiàng)介紹:
type (String) : (默認(rèn): "GET") 請(qǐng)求方式 ("POST" 或 "GET"), 默認(rèn)為 "GET"。注意:其它 HTTP 請(qǐng)求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支持
url (String) : (默認(rèn): 當(dāng)前頁(yè)地址) 發(fā)送請(qǐng)求的地址
data (Object,String) : 發(fā)送到服務(wù)器的數(shù)據(jù)。將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式。GET 請(qǐng)求中將附加在 URL 后
dataType (String) : 預(yù)期服務(wù)器返回的數(shù)據(jù)類型。
如果不指定,jQuery 將自動(dòng)根據(jù) HTTP 包 MIME 信息返回 responseXML 或 responseText,并作為回調(diào)函數(shù)參數(shù)傳遞,可用值:
"xml": 返回 XML 文檔,可用 jQuery 處理。
"html": 返回純文本 HTML 信息;包含 script 元素。
"script": 返回純文本 JavaScript 代碼。不會(huì)自動(dòng)緩存結(jié)果。
"json": 返回 JSON 數(shù)據(jù)
success (Function) : 請(qǐng)求成功后回調(diào)函數(shù)。參數(shù):服務(wù)器返回?cái)?shù)據(jù),數(shù)據(jù)格式
error (Function) : (默認(rèn): 自動(dòng)判斷 (xml 或 html)) 請(qǐng)求失敗時(shí)調(diào)用時(shí)間
async (Boolean) : (默認(rèn): true) 默認(rèn)設(shè)置下,所有請(qǐng)求均為異步請(qǐng)求。
如果需要發(fā)送同步請(qǐng)求,請(qǐng)將此選項(xiàng)設(shè)置為 false。注意,同步請(qǐng)求將鎖住瀏覽器,用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行
新增的javascript方法如下:
<!--用戶名稱的校驗(yàn),采用jquery封裝的ajax,接收XML格式的響應(yīng)數(shù)據(jù)-->
//通過$.ajax()方法 通過HTTP請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)
function verifyJqueryXML(){
var jqueryObj= $("#username");
var username= jqueryObj.val();
//javascript當(dāng)中,一個(gè)簡(jiǎn)單的對(duì)象的定義方法
//var obj={name:"abc",age:20};
//使用jquery的XMLHTTPRequest對(duì)象的get請(qǐng)求的封裝
$.ajax({
type:"POST",//請(qǐng)求方式
url:"AJAXXMLServer", //服務(wù)器端的url地址
data:"name="+username, // 發(fā)送給服務(wù)器端的數(shù)據(jù)
dataType:"xml", //告訴Jquery返回的數(shù)據(jù)格式
success:callback1 //定以交互完成,并且服務(wù)器端正確返回?cái)?shù)據(jù)時(shí)調(diào)用的回調(diào)函數(shù)
}); //注意url和 dataType必須對(duì)應(yīng)
}
function callback1(data){
//首先需要將dom的對(duì)象轉(zhuǎn)換成Jquery對(duì)象
var jqueryObj=$(data);
//獲取message節(jié)點(diǎn)
var message=jqueryObj.children();
//獲取文本內(nèi)容
var text=message.text();
//將服務(wù)器端的值動(dòng)態(tài)的顯示在頁(yè)面上
var resultObj=$("#result");
resultObj.html(text);
}
通過以上代得到,ajax.html中的調(diào)用javascript方法名稱應(yīng)改為:verifyJqueryXML()
ajax學(xué)習(xí)1中介紹了使用jquery封裝的ajax來接收服務(wù)器端的文本數(shù)據(jù)以及使用XMLHttpReques對(duì)象來接收服務(wù)器端的文本數(shù)據(jù)
ajax學(xué)習(xí)2中介紹了使用XMLHttpReques來接收服務(wù)器的端XML數(shù)據(jù),本節(jié)主要介紹使用jqery封裝的ajax使用XML格式接收服務(wù)器端的數(shù)據(jù)。
由于很多知識(shí)都已經(jīng)做了詳細(xì)介紹,本節(jié)只介紹需要修改的代碼,使用jqery封裝的ajax使用XML格式接收服務(wù)器端的數(shù)據(jù),web.xml、后臺(tái)的servet都不用改,
只是ajax.html中調(diào)用的方法名稱修改一下,改為新增加的javascript方法。
用到的主要的一個(gè)方法介紹:
jQuery.ajax(options):通過HTTP請(qǐng)求加載遠(yuǎn)程數(shù)據(jù),
返回值:XMLHttpRequest
參數(shù):options(可選),ajax請(qǐng)求設(shè)置。所有選項(xiàng)都是可選的。
主要選項(xiàng)介紹:
type (String) : (默認(rèn): "GET") 請(qǐng)求方式 ("POST" 或 "GET"), 默認(rèn)為 "GET"。注意:其它 HTTP 請(qǐng)求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支持
url (String) : (默認(rèn): 當(dāng)前頁(yè)地址) 發(fā)送請(qǐng)求的地址
data (Object,String) : 發(fā)送到服務(wù)器的數(shù)據(jù)。將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式。GET 請(qǐng)求中將附加在 URL 后
dataType (String) : 預(yù)期服務(wù)器返回的數(shù)據(jù)類型。
如果不指定,jQuery 將自動(dòng)根據(jù) HTTP 包 MIME 信息返回 responseXML 或 responseText,并作為回調(diào)函數(shù)參數(shù)傳遞,可用值:
"xml": 返回 XML 文檔,可用 jQuery 處理。
"html": 返回純文本 HTML 信息;包含 script 元素。
"script": 返回純文本 JavaScript 代碼。不會(huì)自動(dòng)緩存結(jié)果。
"json": 返回 JSON 數(shù)據(jù)
success (Function) : 請(qǐng)求成功后回調(diào)函數(shù)。參數(shù):服務(wù)器返回?cái)?shù)據(jù),數(shù)據(jù)格式
error (Function) : (默認(rèn): 自動(dòng)判斷 (xml 或 html)) 請(qǐng)求失敗時(shí)調(diào)用時(shí)間
async (Boolean) : (默認(rèn): true) 默認(rèn)設(shè)置下,所有請(qǐng)求均為異步請(qǐng)求。
如果需要發(fā)送同步請(qǐng)求,請(qǐng)將此選項(xiàng)設(shè)置為 false。注意,同步請(qǐng)求將鎖住瀏覽器,用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行
新增的javascript方法如下:
復(fù)制代碼 代碼如下:
<!--用戶名稱的校驗(yàn),采用jquery封裝的ajax,接收XML格式的響應(yīng)數(shù)據(jù)-->
//通過$.ajax()方法 通過HTTP請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)
function verifyJqueryXML(){
var jqueryObj= $("#username");
var username= jqueryObj.val();
//javascript當(dāng)中,一個(gè)簡(jiǎn)單的對(duì)象的定義方法
//var obj={name:"abc",age:20};
//使用jquery的XMLHTTPRequest對(duì)象的get請(qǐng)求的封裝
$.ajax({
type:"POST",//請(qǐng)求方式
url:"AJAXXMLServer", //服務(wù)器端的url地址
data:"name="+username, // 發(fā)送給服務(wù)器端的數(shù)據(jù)
dataType:"xml", //告訴Jquery返回的數(shù)據(jù)格式
success:callback1 //定以交互完成,并且服務(wù)器端正確返回?cái)?shù)據(jù)時(shí)調(diào)用的回調(diào)函數(shù)
}); //注意url和 dataType必須對(duì)應(yīng)
}
function callback1(data){
//首先需要將dom的對(duì)象轉(zhuǎn)換成Jquery對(duì)象
var jqueryObj=$(data);
//獲取message節(jié)點(diǎn)
var message=jqueryObj.children();
//獲取文本內(nèi)容
var text=message.text();
//將服務(wù)器端的值動(dòng)態(tài)的顯示在頁(yè)面上
var resultObj=$("#result");
resultObj.html(text);
}
通過以上代得到,ajax.html中的調(diào)用javascript方法名稱應(yīng)改為:verifyJqueryXML()
您可能感興趣的文章:
- IE關(guān)閉時(shí)判斷及AJAX注銷案例學(xué)習(xí)
- Ajax與JSON的一些學(xué)習(xí)總結(jié)
- 那些年,我還在學(xué)習(xí)Ajax 學(xué)習(xí)筆記
- jquery中ajax學(xué)習(xí)筆記4
- 從零開始學(xué)習(xí)jQuery (六) jquery中的AJAX使用
- AJax 學(xué)習(xí)筆記二(onreadystatechange的作用)
- AJax 學(xué)習(xí)筆記一(XMLHTTPRequest對(duì)象)
- Jquery Ajax學(xué)習(xí)實(shí)例 向頁(yè)面發(fā)出請(qǐng)求,返回XML格式數(shù)據(jù)
- 揭開AJAX神秘的面紗(AJAX個(gè)人學(xué)習(xí)筆記)
- Ajax學(xué)習(xí)全套(最全最經(jīng)典)
相關(guān)文章
jQuery中innerHeight()方法用法實(shí)例
這篇文章主要介紹了jQuery中innerHeight()方法用法,實(shí)例分析了innerHeight()方法的功能、定義及獲取第一個(gè)匹配元素內(nèi)部區(qū)域高度的使用技巧,需要的朋友可以參考下2015-01-01
基于zepto的移動(dòng)端輕量級(jí)日期插件--date_picker
這篇文章主要介紹了基于zepto的移動(dòng)端輕量級(jí)日期插件--date_picker,需要的朋友可以參考下2016-03-03
使用jQuery實(shí)現(xiàn)圖片遮罩半透明墜落遮擋
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)圖片遮罩半透明墜落遮擋,效果非常棒,小伙伴們做相冊(cè)的時(shí)候可以直接拿走使用。2015-03-03
jQuery中table數(shù)據(jù)的值拷貝和拆分
在開發(fā)的過程中,經(jīng)常會(huì)遇到彈出框顯示前一頁(yè)table列表的情況,這時(shí)候會(huì)有好多方法來來解決。下面小編給大家介紹怎么用jquery將值拷貝到第二頁(yè)并拆分拷貝的值,需要的朋友參考下2017-03-03

