Javascript Note(3)

最近的作業提到了Ajax，花了點時間來研究一下

Ajax全名為Asynchronous JavaScript and XML，不過看完全名可能完全不知道在幹嘛！其實Ajax就是一種利用用javascript來對遠端server提出HTTP request，並得到server response所回傳的XML，早期很多的資料都是以XML檔來做儲存，不過Ajax中的X(XML)近年來已經慢慢被light weight的json所慢慢取代，所以講白一點Ajax的目的其實就是希望以非同步的方式來更新部分網頁的內容，這樣做的最大好處就是加快對使用者的回應

在篇網誌不會說明傳統的Ajax寫法，W3c的Tutorial寫的非常的詳細，可以參考，這裡會記錄用jQuery來轉寫Ajax，為什麼要用jQuery，對於程式設計師來說最重要的就是code好寫好懂好簡短，剛好jQuery的Ajax Template就有這種特性！

1. 首先記得要先include jQuery，當然可以下載下來放到自己的server上，但是好google不用嗎ＸＤ

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Template

$.ajax({
    url: "path",
    data: {
        data1: input1,
        data2: input2         
    },
    type: "POST",
    success: function(result, status, xhr){

        // do something after get data(result)
    }
});

上方就是一個很簡單的jQuery Ajax template

• url: 代表client提出request的url
• data: 代表要送給server的相關資訊，在這裏data是以dictionary來表達
• type: 代表HTTP的方法，最常見的不外乎就是GET,POST
• success: 這是一個call back function，代表server成功回傳後接下來要做的動作

如果要比較完整一點的如下

$.ajax({
    url: "path",
    data: {
        data1: input1,
        data2: input2
    },
    type:"POST",
    dataType:'text',
    success: function(msg){
        alert(msg);
    },
    error:function(xhr, ajaxOptions, thrownError){ 
        alert(xhr.status); 
        alert(thrownError); 
    }
});

上面為一個比較完整一點jQuery Template，可以看到多了

• dataType: 這個代表所接收到的資料格式，如果沒有指定的話通常會以HTTP header中的MIMI type自動選擇，常用的格式有
  • xml
  • html
  • script(可執行的Javascript)
  • json
  • text
• error: 這裡代表發生error時的處理函數

Reference:

W3C Ajax

W3C jQuery Ajax

jQuery Ajax基礎應用