在這個示例程序中,我將使用$.ajax()方法,使用$.get()方法也可以,但我覺得$.ajax()更好一些,代碼更容易懂,並且也不怎麼復雜。
. 代碼如下:
//定義用戶名校驗的方法
function verify(){
//首先測試一下頁面的按鈕按下,可以調用這個方法
//使用javascript的alert方法,顯示一個探出提示框
//alert("按鈕被點擊了!!!");
//1.獲取文本框中的內容
//document.getElementById("userName"); dom的方式
//Jquery的查找節點的方式,參數中#加上id屬性值可以找到一個節點。
//jquery的方法返回的都是jquery的對象,可以繼續在上面執行其他的jquery方法
var jqueryObj = $("#userName");
//獲取節點的值
var userName = jqueryObj.val();
//alert(userName);
//2.將文本框中的數據發送給服務器段的servelt
//javascript當中,一個簡單的對象的定義方法
var obj = {name:"123",age:20};
//使用jquery的XMLHTTPrequest對象get請求的封裝
$.ajax({
type: "POST", //http請求方式
url: "AJAXXMLServer", //服務器段url地址
data: "name=" + userName, //發送給服務器段的數據
dataType: "xml", //告訴JQuery返回的數據格式
success: callback //定義交互完成,並且服務器正確返回數據時調用的回調函數
});
}
回調函數:
. 代碼如下:
//回調函數
function callback(data) {
// alert("服務器段的數據回來了!!");
//3.接收服務器端返回的數據
//需要將data這個dom對象中的數據解析出來
//首先需要將dom的對象轉換成JQuery的對象
var jqueryObj = $(data);
//獲取message節點
var message = jqueryObj.children();
//獲取文本內容
var text = message.text();
//4.將服務器段返回的數據動態的顯示在頁面上
//找到保存結果信息的節點
var resultObj = $("#result");
//動態的改變頁面中div節點中的內容
resultObj.html(text);
alert("");
}