jQuey_Ajax的使用

標籤：通訊   ready   9.png   txt   script   發送   ges   innerhtml   非同步請求   

非同步呼叫，局部重新整理

Ajax工作流程

    XMLHttpRequest對象直接與伺服器通訊，非同步傳輸資料

Ajax實現步驟

    1.建立XMLHttprequest對象，作用：非同步請求，資料的傳送

    2.設定回呼函數：

        當伺服器做出正確響應返回後，需要對返回的資料進行處理，處理的代碼寫在回呼函數中

        回呼函數最後才調用

    3.初始化HttpRequest組件

    4.發送請求

Ajax原理

原生Ajax：

script>//1.擷取XMLHttpRequest對象的函數fuction getXMLHttpRequest(){if(window.XMLHttpRequest){return new XMLHttpRequest();}}var xht;//文字框失去焦點觸發的函數function inputLogin(txt){xhr = getXMLHttpRequest();//調用方法建立XMLHttpRequest對象//初始化XMLHttpRequest對象xhr.open("GET","AdminServlet?loginId" + loginId,true);//XMLHttpRequest對象發送請求xhr.send(null);}//3.回呼函數function resultFunction(){var s = ducument.getElementById("s");if(xhr.readyState == 4) { //請求完成if(xhr.status ==200) {  //表示服務端正確返回資料var data = xhr.responseText;if(data == "yes"){s.style.color = "green";s.innerHTML = "使用者名稱可用";}else{s.style.color = "red";s.innerHTML = "使用者名稱不可用";}}}}</script>

Ajax實現登入使用者名稱驗證

引入的jar包

迴圈輸出json資料

jQuey_Ajax的使用