標籤：style http java os io 資料 for cti
ajax全稱是：asynchronous javasctipt and xml。
1.為什麼需要ajax？
一般web程式與伺服器的互動是：頁面發送請求等待伺服器處理，伺服器處理資料，使用者頁面重新整理整個頁面，從而完成了一次互動。
如果用這種同步方式進行多次這種頁面與伺服器的互動，使用者將會需要很多時間去等待伺服器處理。
ajax非同步處理的思想是：當頁面發送請求後，交給伺服器處理，伺服器處理的同時，頁面無須等待可以進行其他的操作，當伺服器處理完成後，在當前頁面顯示結果，無須重新整理整個頁面。
2.ajax的簡單實現
實現ajax需要用到javascript的XMLHttpRequest對象。
實現過程
1）建立對象（不同瀏覽器有不同的建立方法，一般需要考慮ie和非ie瀏覽器）
ie瀏覽器要用到ActiveXObject。
非ie瀏覽器可直接建立XMLHttpRequest對象執行個體。
2）發送請求。
發送請求前需要先建立一個與伺服器的串連。它需要的參數有發送類型、串連的url、非同步串連狀態值等。
> 發送類型：GET/POST等。
> url：串連地址 + ？ + 傳送的值 （+ & + 傳送的值..） [這裡是用的get方式]
> 非同步串連狀態值：true / false。預設為true。true表示非同步串連。
在發送請求前還要建立一個返回函數，它是用來指定伺服器響應後要執行的內容。
發送請求。
3）伺服器響應函數
3.一個簡單一實例
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script>//var xmlHttp = new XMLHttpRequest();/*建立XMLHttpRequest對象*/var xmlHttp = false;/*@cc_on @*/ //ie條件編譯/*@if (@_javascript_version >= 5)try{xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");}catch(e){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}catch(e2){xmlHttp = false;}@end @*/if(!xmlHttp && typeof XMLHttpRequest != 'undefined'){xmlHttp = new XMLHttpRequest();}function callServer(){//擷取name和password值var name = document.getElementById("name").value;var password = document.getElementById("password").value;//判斷name和password是否為空白if((name == "null") || (name == "")) return ;if(password == "null" || password == "") return ;//建立要串連的urlvar url = "check.php?name=" + escape(name) + "&password" + escape(password);//建立一個伺服器的串連xmlHttp.open("GET", url, true);//建立伺服器完成後啟動並執行函數xmlHttp.onreadystatechange = updatePage;//發送請求xmlHttp.send(null);}function updatePage(){if(xmlHttp.readyState == 4){ //http就緒狀態if(xmlHttp.status == 200){ //判斷http狀態代碼<span style="white-space:pre"></span>//處理伺服器響應var response = xmlHttp.responseText;document.getElementById("ajax-result").value = response;}else if(xmlHttp.status == 404){alert("Request url does not exist!");}else{alert("ERROR:status code is" + xmlHttp.status);}}}</script></head><body><div id="form"><form method="get">name:<input type="text" id="name" onchange="callServer()"/><br>passwiord:<input type="text" id="password" onchange="callServer()"><br>result:<input type="text" id="ajax-result"/></form></div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
