標籤:lock 顯示 request exp http ansi 案例 技術分享 value
接收伺服器返回的訊息
1,定義觸發Ajax的js效果
2,建立Ajax方法
如果返回的資料是XML,則需使用aj.responseXML
3,接收伺服器返回的訊息,並顯示在網頁上
錯誤案例:直接接收伺服器返回的訊息,是接收不到的.
因為有可能用戶端還在發送請求,而另一段代碼已經執行接收訊息.當然,接收的訊息就為空白.
所以我們應該有一個判別機制,判斷XMLHttpRequest 的狀態
aj.onreadystatechange = function(){
if(aj.readyState == 4){
document.getElementById("dl1").innerHTML = aj.responseText;
}
}
其中onreadystatechange儲存函數(或函數名),每當 readyState 屬性改變時,就會調用該函數。
readyState存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。(一般只能接收到從1到4的資訊)
- 0: 請求未初始化
- 1: 伺服器串連已建立
- 2: 請求已接收
- 3: 請求處理中
- 4: 請求已完成,且響應已就緒
代碼部分:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>接收伺服器資訊</title> 6 </head> 7 <body> 8 <h2>這是返回的請求</h2> 9 <input type="button" value="觸發" onclick="f1()">10 <div id="dl1"></div>11 </body>12 13 <script type="text/javascript">14 15 function f1(){16 //建立ajax對象17 var aj = new XMLHttpRequest();18 19 //建立新的http請求20 aj.open(‘get‘,‘./03.php‘)21 22 //發送請求23 aj.send(null);24 25 aj.onreadystatechange = function(){26 if(aj.readyState == 4){27 document.getElementById("dl1").innerHTML = aj.responseText;28 }29 }30 31 }32 33 </script>34 </html>View Code
1 <?php 2 3 echo "<div style=‘color:green‘>Today is monday</div>";4 5 ?>
View Code
Ajax入門(二)