[ajax 學習筆記] ajax初試
阿新 • • 發佈：2017-06-02
什麽 efi microsoft word ml2 undefined erro php ajax異步處理
/* */_on @*/ //ie條件編譯
[email protected] (@_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 ;
//創建要連接的url
var url = "check.php?name=" + escape(name) + "&password" + escape(password);
//建立一個server的請求
xmlHttp.open("GET", url, true);
//創建server完畢後執行的函數
xmlHttp.onreadystatechange = updatePage;
//發送請求
xmlHttp.send(null);
}
function updatePage(){
if(xmlHttp.readyState == 4){ //http就緒狀態
if(xmlHttp.status == 200){ //推斷http狀態代碼
var response = xmlHttp.responseText; //處理server響應
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>
ajax全稱是：asynchronous javasctipt and xml。
1.為什麽須要ajax？
一般web程序與server的交互是：頁面發送請求等待server處理，server處理數據。用戶頁面刷新整個頁面。從而完畢了一次交互。
假設用這樣的同步方式進行多次這樣的頁面與server的交互。用戶將會須要非常多時間去等待server處理。
ajax異步處理的思想是：當頁面發送請求後。交給server處理，server處理的同一時候，頁面無須等待能夠進行其它的操作，當server處理完畢後。在當前頁面顯示結果。無須刷新整個頁面。
2.ajax的簡單實現
實現ajax須要用到javascript的XMLHttpRequest對象。
實現過程
1）創建對象（不同瀏覽器有不同的創建方法，一般須要考慮ie和非ie瀏覽器）
ie瀏覽器要用到ActiveXObject。
非ie瀏覽器可直接新建XMLHttpRequest對象實例。
2）發送請求。
發送請求前須要先建立一個與server的連接。它須要的參數有發送類型、連接的url、異步連接狀態值等。
> 發送類型：GET/POST等。
> url：連接地址 + ？ + 傳送的值 （+ & + 傳送的值..） [這裏是用的get方式]
> 異步連接狀態值：true / false。默覺得true。true表示異步連接。
在發送請求前還要建立一個返回函數，它是用來指定server響應後要運行的內容。
發送請求。
3）server響應函數
3.一個簡單實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> //var xmlHttp = new XMLHttpRequest(); /*創建XMLHttpRequest對象*/ var xmlHttp = false; [email protected]
[ajax 學習筆記] ajax初試