AJAX - 建立 XMLHttpRequest 對象

XMLHttpRequest 物件

XMLHttpRequest物件是Ajax技術的核心。

所有現代瀏覽器均支援 XMLHttpRequest 物件（IE5 和 IE6 使用 ActiveXObject）。

不刷新頁面就和伺服器進行互動是Ajax最大的特色。這個重要的特點主要歸功於XMLHttpRequest物件。使用XMLHttpRequest物件使得網頁應用程式像windows應用程式一樣，能夠及時響應用戶與伺服器之間的交互，不必進行頁面刷新或跳轉，並且能夠進行一系列的資料處理，這些功能可以使用戶的等待時間縮短，同時也減輕了伺服器端的負載。

建立 XMLHttpRequest 物件

有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 物件。

建立XMLHttpRequest 物件的語法：

variable=new XMLHttpRequest();

舊版的Internet Explorer （IE5 和IE6）使用ActiveX 物件：

variable=new ActiveXObject("Microsoft.XMLHTTP");

為了應對所有的現代瀏覽器，包括IE5 和IE6，請檢查瀏覽器是否支援XMLHttpRequest 物件。如果支持，則建立 XMLHttpRequest 物件。如果不支持，則建立 ActiveXObject ：:

<!DOCTYPE html>
<html>
<head>
<script>
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
        xmlhttp.send();
    }
</script>
</head>
<body>
    <div id="myDiv"><h2>使用AJAX</h2></div>
    <button type="button" onclick="loadXMLDoc()">点击修改</button>
</body>
</html>

繼續學習

新建檔案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script>
 function ajaxFunction()
 {
 var xmlHttp;
 try
 {
 // Firefox,Opera 8.0+,Safari
 xmlHttp=new XMLHttpRequest();
 }
 catch (e)
 {
 // Internet Explorer
 try
 {
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e)
 {
 try
 {
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 catch (e)
 {
 alert("您的浏览器不支持AJAX！");
 return false;
 }
 }
 }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX