Ajax 筆記

Technorati 標籤: ajax

一、Ajax 簡介

    Ajax = 異步的 javascript 和 xml;

    Ajax是一種用於快速創建動態網頁的技術。原理圖如下:

image

二、Demo

   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">
   3: <head>
   4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5: <title>ajax</title>
   6: <script type="text/javascript">
   7:  
   8:     
   9:     function loadDoc() {
  10:         var xmlhttp;
  11:         if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  12:             xmlhttp = new XMLHttpRequest();
  13:         } else {// code for IE6, IE5
  14:             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  15:         }
  16:         xmlhttp.onreadystatechange = function() {
  17:             if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  18:                 document.getElementById("text").innerHTML = xmlhttp.responseText;
  19:             }
  20:         }
  21:         xmlhttp.open("get", "/ajaxTest/text.txt", true);
  22:         xmlhttp.send();
  23:     }
  24:  
  25: </script>
  26: </head>
  27:  
  28: <body>
  29:     <div id="text">Ajax can change these text<
  30:     <button onclick="loadDoc()" value="change">change</button>
  31: </body>
  32: </html>
  33:  
  34: //text.txt 內容可以自己隨意編寫,只需保證其在路徑下就行了。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章