AJAX機制 Javascript--"XMLHttpRequest"

2012-04-20

3832
0
AJAX
2015-03-25

摘要:Javascript AJAX機制--"XMLHttpRequest"

繼前篇的JQery AJAX機制--"$.post"，順便就把Javascript的AJAX技術順便寫一下好了

(迷之聲:美好的星期五下班不回家，寫甚麼鬼文章阿!!)

不囉嗦，還是直接用實例說明比較快。

Client Side：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript">

        var xmlhttp;

        function createxmlhttp() {
            //IE
             if (window.ActiveXObject) {

                xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');

            } else if (window.XMLHttpRequest) {
            //Firefox
             xmlhttp = new XMLHttpRequest;
            }

            xmlhttp.onreadystatechange = ajax;                       
            xmlhttp.open("get", location.href + '?a=1', true)
            xmlhttp.send(null)
        }

        function ajax() {
                //0未初始化　1正在載入　2己載入　3互動中　4完成
                if (xmlhttp.readyState == 4) {

                if (xmlhttp.status == 200) {

                    document.getElementById('showtxt').innerHTML = xmlhttp.responseText;

                }               
            }
           
        }
    </script>

</head>


<body>
    <form id="form1" runat="server">
   
    <input id="Button1" type="button" value="button" />

    <div id="showtxt"></div>
   
    </form>
</body>
</html>

首先我們在建立XMLHttpRequest 物件的事情會遇到，因為瀏覽器不同，而且不同的語法

(寫前端的人真的很辛苦，常常要配合工具)，因此我在JS上判斷了一下，取得XMLHttpRequest

物件之後，我們要向遠端某個網址要求資料，這裡我說明一下open()內帶的三個參數，

參數一：Htpp的方法，有get、post(本例用get說明)。

參數二：向哪個url取得資料。

參數三：是不是非同步。

由於本範例是用get的方式，因此send用null，由於我在server side要讓讀者能感覺出ajax的fu，

我帶個一個參數 ? a=1給這個要求取得資料的網址。

在open以及send之前，我們需要一個函式處理 "當ajax完成了之後傳回的資料的後續動作"，

因此在xmlhttp.onreadystatechange我設定=ajax這個js funtcion去處理後續的動作，

讓我們來看看ajax這支function，我們的xmlhttp會有四種狀態(通常我們都是處理完成的狀態)

0:xmlhttp尚未初始化(還沒呼叫open)

1:xmlhttp載入中(open完了，尚未呼叫send)

2:xmlhttp已經載入了。

3:xmlhttp互動中。

4:完全完成。

server處理結束之後，會回傳一個處理結果，但這個結果可能成功或是失敗(成功的狀態=200)

判斷為200後再去做後續的處理。

PS.值得注意的是我們只能取在同一個domain的資料，跨網域似乎就不行了(不知道能不能放個crossdomain.xml)就抓得到

這部分就要再去測試看看就知道了 ^_^。

Server Side：

Protected Sub form1_Load(sender As Object, e As System.EventArgs) Handles form1.Load

        If Not String.IsNullOrEmpty(Request("a")) Then

            Response.Write("馬久里，你還不趕快下班")
            Response.End()

        End If

End Sub

瀏覽畫面:

如此就完成了Javascript的AJAX了，至於用post的方法，之後再補上一篇了，美好的星期五要趕快下班才行。

AJAX

回首頁