簡單AJAX請求JSon資料

標籤：代碼   and   情況   chrome   win   size   簡單   script   span   

Ajax 全名為Asynchronous JavaScript and XML（非同步 JavaScript 和 XML）。

它是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。

在傳統方法中，當我們需要向伺服器請求資料時，瀏覽器需要等待該請求完成之後才能夠進行下一步的操作，而在此之前是不能夠對網頁進行其他的操作，如果因請求的資料過大或者網路延遲等原因而造成的等待伺服器響應的時間過久，無疑會使得使用者的體驗感降低，甚至有可能直接導致程式掛起。

而如果我們採用AJax技術，則可以避免這種情況的發生，對於 web 開發人員來說，發送非同步請求是一個巨大的進步。很多在伺服器執行的任務都相當費時。AJAX 出現之前，這可能會引起應用程式掛起或停止。

通過 AJAX，JavaScript 無需等待伺服器的響應，而是：

• 在等待伺服器響應時執行其他指令碼
• 當響應就緒後對響應進行處理

XMLHttpRequest 是 AJAX 的基礎。 

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

XMLHttpRequest 用於在後台與伺服器交換資料。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

建立 XMLHttpRequest 對象的文法：

var iable=new XMLHttpRequest();

老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 對象：

var iable=new ActiveXObject("Microsoft.XMLHTTP");

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

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");  }

向伺服器發送請求：

我們可以利用XMLHttpRequest的open(method,url,async)和send(string)方法向伺服器發送請求。

其中open的三個參數分別是：規定請求的類型、URL 以及是否非同步處理請求。

• method：請求的類型；GET 或 POST

GET 還是 POST？

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

• • • 無法使用快取檔案（補救伺服器上的檔案或資料庫）
    • 向伺服器發送大量資料（POST 沒有資料量限制）
    • 發送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠

//範例程式碼
//getxmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);xmlhttp.send();//postxmlhttp.open("POST","ajax_test.asp",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//為了能夠像表單那樣操作，需使用setRequestHeader方法xmlhttp.send("fname=Bill&lname=Gates")//字串只能用於post

• url：檔案在伺服器上的位置，請求的伺服器位址
• async：true（非同步）或 false（同步）

send的string則是只能用於post。

完整範例程式碼（訪問Yahoo的天氣API，查看返回的JSON資料）：

// 執行個體化非同步請求對象var xhr = new XMLHttpRequest();// 監聽狀態xhr.onreadystatechange = function() {    if (xhr.readyState === 4) {        if (xhr.status === 200) {//狀態代碼200 -> ok            var result = JSON.parse(xhr.responseText);            console.log(result);        }    }}// 初始化請求xhr.open(‘GET‘, ‘https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20%3D%202151330&format=json‘, true);// 發送請求xhr.send();

 

簡單AJAX請求JSon資料