當前位置:才華齋>設計>網頁設計>

jquery中ajax學習筆記

網頁設計 閱讀(3.01W)

摘要:

jquery中ajax學習筆記

ajax學習1中介紹了使用jquery封裝的ajax來接收服務器端的文字資料以及使用XMLHttpReques物件來接收伺服器端的文字資料

ajax學習2中介紹了使用XMLHttpReques來接收伺服器的端XML資料,本節主要介紹使用jqery封裝的ajax使用XML格式接收伺服器端的資料。

由於很多知識都已經做了詳細介紹,本節只介紹需要修改的程式碼,使用jqery封裝的ajax使用XML格式接收伺服器端的資料,、後臺的servet都不用改,

只是中呼叫的方法名稱修改一下,改為新增加的javascript方法。

用到的主要的一個方法介紹:

(options):通過HTTP請求載入遠端資料,

返回值:XMLHttpRequest

引數:options(可選),ajax請求設定。所有選項都是可選的.。

主要選項介紹:

type (String) : (預設: "GET") 請求方式 ("POST" 或 "GET"), 預設為 "GET"。注意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支援

url (String) : (預設: 當前頁地址) 傳送請求的地址

data (Object,String) : 傳送到伺服器的資料。將自動轉換為請求字串格式。GET 請求中將附加在 URL 後

dataType (String) : 預期伺服器返回的資料型別。

如果不指定,jQuery 將自動根據 HTTP 包 MIME 資訊返回 responseXML 或 responseText,並作為回撥函式引數傳遞,可用值:

"xml": 返回 XML 文件,可用 jQuery 處理。

"html": 返回純文字 HTML 資訊;包含 script 元素。

"script": 返回純文字 JavaScript 程式碼。不會自動快取結果。

"json": 返回 JSON 資料

success (Function) : 請求成功後回撥函式。引數:伺服器返回資料,資料格式

error (Function) : (預設: 自動判斷 (xml 或 html)) 請求失敗時呼叫時間

async (Boolean) : (預設: true) 預設設定下,所有請求均為非同步請求。

如果需要傳送同步請求,請將此選項設定為 false。注意,同步請求將鎖住瀏覽器,使用者其它操作必須等待請求完成才可以執行

新增的javascript方法如下:

複製程式碼 程式碼如下:

//通過$()方法 通過HTTP請求載入遠端資料

function verifyJqueryXML(){

var jqueryObj= $("#username");

var username= ();

//javascript當中,一個簡單的物件的定義方法

//var obj={name:"abc",age:20};

//使用jquery的XMLHTTPRequest物件的get請求的封裝

$({

type:"POST",//請求方式

url:"AJAXXMLServer", //伺服器端的url地址

data:"name="+username, // 傳送給伺服器端的資料

dataType:"xml", //告訴Jquery返回的資料格式

success:callback1 //定以互動完成,並且伺服器端正確返回資料時呼叫的回撥函式

}); //注意url和 dataType必須對應

}

function callback1(data){

//首先需要將dom的物件轉換成Jquery物件

var jqueryObj=$(data);

//獲取message節點

var message=dren();

//獲取文字內容

var text=();

//將伺服器端的值動態的顯示在頁面上

var resultObj=$("#result");

(text);

}

通過以上代得到,中的呼叫javascript方法名稱應改為:verifyJqueryXML()