DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> 分享Ajax創建簡單實例代碼
分享Ajax創建簡單實例代碼
編輯:AJAX基礎知識     

XmlHttp是一套可以在Javascript、VbScript、Jscript等腳本語言中通過http協議傳送或從接收XML及其他數據的一套API。XmlHttp最大的用處是可以更新網頁的部分內容而不需要刷新整個頁面。幾乎所有的浏覽器都支持XMLHttpRequest對象,它是Ajax應用的核心技術。
js代碼如下:

<html>
 <head>
 <title> New Document </title>
 <meta charset="utf-8">
 </head>
<script type="text/javascript">
 /**創建 XMLHttpRequest 對象
 *IE7+、Firefox、Chrome、Safari 以及 Opera均內建 XMLHttpRequest 對象
 *IE5,IE6使用ActiveX對象,xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
 **/
 function createXMLHttpRequest(){
 var xmlHttp;
 if (window.XMLHttpRequest)
 {
  xmlHttp = new XMLHttpRequest();
 }else{
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlHttp.onreadystatechange = function(){
  if (xmlHttp.readyState == 4)
  {
  
  if (xmlHttp.status == 200)
  { 
   document.getElementById("myDiv").innerHTML = xmlHttp.responseText;
  }
  }else{
  document.getElementById("myDiv").innerHTML = "正在加載...";
  }
 };
    //向服務器放松請求
 xmlHttp.open("GET","test.php",true);
 xmlHttp.send();
 }
</script>
 <body>
 <input type="button" onclick="createXMLHttpRequest()" value="請求數據" />
 <div id="myDiv"></div>
 </body>
</html>

對上面js代碼部分解釋:
(1).XMLHttpRequest對象的onreadystatechange屬性,當請求被發送到服務器時,需要執行任務。每當 readyState 改變時,就會觸發onreadystatechange事件。
(2).XMLHttpRequest對象的readyState屬性,存有 XMLHttpRequest 的狀態(0~4)。

  •     0: 請求未初始化
  •     1: 服務器連接已建立
  •     2: 請求已接收
  •     3: 請求處理中
  •     4: 請求已完成,且響應已就緒

(3).open(method,url,async) 方法:規定請求的類型、URL 以及是否異步處理請求。
(4).send(content) 向服務器發送請求。

以上就是Ajax創建簡單實例代碼,希望對大家的學習有所幫助,大家也可以自己動手創建Ajax簡單實例。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved