快速學習AJAX之一 Ajax基礎

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

大家好，這是一套AJAX的基礎教程，首先聲明一下我是從事ASP.NET開發

但是我這回講解的AJAX不是ASP.NET其中的哪些控制項的操作。雖然ASP.NET內建的AJAX控制項給我們使用AJAX帶來了極大的方便

但是我決定我還是要一篇篇的更新 “原生態的AJAX”

呵呵，我也不知道這套教程大概有多少講，但是有一點我一定將我知道的AJAX完全以一種簡單通俗的方式告訴大家。

AJAX是什麼呢？英文的全稱你可以“有道一下” 說白了就是非同步JavaScript+XML

大家可以去Google上面搜尋一下AJAX的來曆什麼的，我這裡一些從簡。弱弱的記得希臘英雄裡面有一個名字挺像 “AJAX”的，哈哈......

其實大家簡單的理解AJAX就是一種“無重新整理的技術”當然這是泛泛而談，畢竟

AJAX技術沒有這麼簡單。

我們接觸比較多的AJAX技術就是線上地圖服務了，Google地圖就是率先將AJAX技術應用到切合實際的技術當中去的。

AJAX技術中用到的四個比較重要的技術點 Javascrip Css Dom(文件物件模型) XMLHttpRequest對象這個我們會在後面慢慢的接觸到

當你瞭解了以上的前三項技術，那麼你就可以接下來學習AJAX應用了。

好了，開始我們的AJAX之路

首先我們需要建立XmlHttpRequest對象。當然由於一些原因，瀏覽器安全色性問題，建立方式不同

我們首先建立一個支援多瀏覽器的 XMLHttpRequest 對象

    <script type="text/javascript">        var xmlHttp = false;  //這個聲明成什麼都無所謂啦        try {            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");        } catch (e1) {            try {                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");            } catch (e2) {                xmlHttp = false;            }        }        if (!xmlHttp && typeof XMLHttpRequest!='undefined') {            xmlHttp = new XMLHttpRequest();        }    </script>

然後我們寫好了這個，大家可以自己把他寫到一個 function中去

下面我們繼續寫完成我們的第一個例子 Ajax 你好呵呵夠俗了吧

為了完成這個我們需要建立一個一般處理常式

然後我們在一般處理常式當中寫上如下的簡單代碼

public void ProcessRequest(HttpContext context)      {          context.Response.ContentType = "text/html";          context.Response.Write(DateTime.Now.ToString());      }

好了下面開始我們的主要任務

<head>    <title></title>    <script type="text/javascript">        var xmlHttp = false;  //這個聲明成什麼都無所謂啦        try {            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");        } catch (e1) {            try {                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");            } catch (e2) {                xmlHttp = false;            }        }        if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {            xmlHttp = new XMLHttpRequest();        }        function getAjax() {            xmlHttp.open("GET", "Ajax.ashx");            xmlHttp.onreadystatechange = function () {                if (xmlHttp.readyState == 4 && xmlHttp.status ==200) {                    alert(xmlHttp.responseText);                }            }            xmlHttp.send();        }    </script></head><body>  <input type="button" value="單擊我顯示時間" onclick="getAjax();" /></body></html>

上面的代碼就是特別簡單的一個例子了

我給大家簡單的說明一下

xmlHttp.open("GET", "Ajax.ashx"); 這句話中包含的幾個要點第一 “GET” 這個是得到資料的一種方式，當然常見的也有 “POST”

其實還有幾種，我記得好像是有7種（HEAD,PUT,DELETE,OPTION,TRACE）這些方法大家可以自己去尋找資料都是幹神馬的，我就不詳細說明了。

後面是請求的路徑，當然你可以請求一個URL的地址。

其實後面還有第三個參數，是設定非同步作業還是同步操作的，這個我們以後再說。

onreadystatechange：

當請求被發送到伺服器時，我們需要執行一些基於響應的任務。

簡單點說就是

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

還有 onreadystatechange 只是一個屬性名稱，而不是函數名稱，這裡其實是建立了一個匿名函數

readyState：

表示的是當前的對象狀態【他有五個值】

0: uninitialized, 【請求未初始化】

1: loading, 【伺服器串連已建立】

2: loaded, 【請求已接收】

3: interactive, 【請求處理中】

4: complete。【請求已完成，且響應已就緒】

status：

HTTP響應狀態代碼具體的可以去Google上面找

我簡單的舉幾個例子

403 Forbidden，

404 Not Found，【你懂的】

200正常返回

所以我們需要滿足這兩個條件。

好了，剩下的就交給

xmlHttp.responseText 去讀取吧。

哦了，第一節課就到這裡了，講解的不好，還望大家海涵，我會繼續寫下去的，謝謝！

對了，大家可以試一下頁面上面嵌入一個視頻，然後再調用 Alert（）時間，看看那個視頻會中斷嗎？(*^__^*) 嘻嘻…… 傳說中的無重新整理

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More