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