Javascript學習筆記十二——Ajax入門

作者: 飛林沙來源: 博客園發布時間: 2010-01-25 13:14 閱讀: 2671 次推薦: 1 原文鏈接 [收藏]

系列文章導航：

JavaScript學習筆記一——數據類型

JavaScript學習筆記二——函數

JavaScript學習筆記三——作用域

JavaScript學習筆記四——Eval函數

JavaScript學習筆記五——類和對象

JavaScript學習筆記六：prototype的提出

Javascript學習筆記七——原型鏈的原理

Javascript學習筆記八——用JSON做原型

Javascript學習筆記九——prototype封裝繼承

Javascript學習筆記十——網頁運行原理

Javascript學習筆記十一——包裝DOM對象

Javascript學習筆記十三——關于響應事件

Javascript學習筆記十二——Ajax入門

Ajax:Asynchronous Javascript And XML。寫個簡單的例子：

<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="LabelTime" runat="server">asp:Label>
    div>
    form>
    <script type="text/javascript">
        if (!window.XMLHttpRequest) {
            window.XMLHttpRequest = function () {
                return new ActiveXObject("Microsoft.XMLHTTP");
            };
        }
        function UpdateClock() {
            var request = new XMLHttpRequest();
            request.open("post", "TimeTest.aspx", false);
            request.send("");
            document.getElementById("LabelTime").innerText = request.responseText;
        }
        setInterval(UpdateClock, 1000);
        
    script>
body>

而在另一個頁面寫下當前時間，這樣就形成了一個鐘表。

代碼很簡單，就是操縱一個XMLHttpRequest對象來獲取服務器時間，然后更新時間。上面的代碼在與服務器交互時，并沒有頁面整體刷新，而是局部刷新。

但是上面的代碼在request.open時，最后一個參數為false，表示發出的XMLHttpRequest是同步的，由于Javascript是單線程的，所以在等待請求的過程中，線程會被阻塞，如果請求時間過長，瀏覽器會停止響應。

雖然Javascript是單線程的，但是XMLHttpRequest具備異步處理請求的能力。代碼如下：

<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="LabelTime" runat="server">asp:Label>
    div>
    form>
    <script type="text/javascript">
        if (!window.XMLHttpRequest) {
            window.XMLHttpRequest = function () {
                return new ActiveXObject("Microsoft.XMLHTTP");
            };
        }

        function AsynRequest() {
            var request = new XMLHttpRequest();
            request.open("post", "TimeTest.aspx", true);
            request.onreadystatechange = function () {
                if (request.readyState === 4) {
                    UpdateClock(request.responseText);
                }
            };
            request.send("");
        }
        function UpdateClock(time) {
            document.getElementById("LabelTime").innerText = time;
        }
        setInterval(AsynRequest, 1000);
        
    script>
body>