認識Ajax

Ajax的全名是Asynchronous JavaScript and XML，他是一種互動式網頁應用開發技術，可以提高網頁的互動性(Interactivity)，速度(Speed)，以及可用性(Usability)。

先別管這麼多了！趕快玩玩看吧！

開啟JS Bin: jsbin.com
匯入jquery函式庫
複製貼上以下的Code到JavaScript欄位
看看印出了些什麼東西

$.ajax({
  type: "GET",
  url: "http://opendata.cwb.gov.tw/opendata/DIV2/O-A0001-001.xml",
  dataType: "xml",
  error: function (e) {
    console.log('oh no');
  },
  success: function (e) {
    var data = $(e).find('location');
    var time = data.eq(0).find('time').text();
    var city = data.eq(0).find('parameter').eq(0).find('parameterValue').text();
    var town = data.eq(0).find('parameter').eq(2).find('parameterValue').text();
    console.log(time);
    console.log(city);
    console.log(town);
  }
});

記得安裝CORS Toggle，Chrome上的Ajax才能正常運做CORS

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。 CORS講解影片

剖析Ajax

// Ajax的外觀
$.ajax({
    //要傳去伺服器的參數及內容

});

參數	說明
type	請求方式，POST/GET
url	指定要進行呼叫的位址
data	要傳送至Server的資料
dataType	預期Server傳回的資料類型，ex: xml, json
error	請求失敗時執行函式
success	請求成功時執行函式

其他補充：

// $.get是以GET方式實現Ajax請求
$.get(
    url,
    [data],
    [callback]
);

// $.post是以POST方式實現Ajax請求
$.post(
    url,
    [data],
    [callback],
    [type]
);

// $.getJSON是專門為Ajax獲取JSON數據而生的
$.getJSON(
    url,
    [data],
    [callback]
);

認識資料格式

什麼是JSON

JSON 是個用來儲存和傳送資料的純文字格式，JSON的格式非常容易閱讀，修改起來也非常方便。
直接來看一個例子吧！

{
  "orderID": 12345,
  "shopperName": "John Smith",
  "shopperEmail": "[email protected]",
  "contents": [
    {
      "productID": 34,
      "productName": "SuperWidget",
      "quantity": 1
    },
    {
      "productID": 56,
      "productName": "WonderWidget",
      "quantity": 3
    }
  ],
  "orderCompleted": true
}

剖析JSON

物件可以用 { } 來寫入資料

陣列可以用 [ ] 來寫入資料

name / value 是成對的，中間透過 ( : ) 來區隔

瞭解更多：你不可不知道的JSON基本介紹

安裝JSONView，可以幫助你解析並排版JSON資料

什麼是XML

XML是一種標記式語言。比起HTML，XML的標籤是可以自行訂定的喔！
直接來看一個例子吧！

<object>
  <property>
    <key>orderID</key>
    <number>12345</number>
  </property>
  <property>
    <key>shopperName</key>
    <string>John Smith</string>
  </property>
  <property>
    <key>shopperEmail</key>
    <string>[email protected]</string>
  </property>
  <property>
    <key>contents</key>
    <array>
      <object>
        <property>
          <key>productID</key>
          <number>34</number>
        </property>
        <property>
          <key>productName</key>
          <string>SuperWidget</string>
        </property>
        <property>
          <key>quantity</key>
          <number>1</number>
        </property>        
      </object>
      <object>
        <property>
          <key>productID</key>
          <number>56</number>
        </property>
        <property>
          <key>productName</key>
          <string>WonderWidget</string>
        </property>
        <property>
          <key>quantity</key>
          <number>3</number>
        </property> 
      </object>
    </array>
  </property>
  <property>
    <key>orderCompleted</key>
    <boolean>true</boolean>
  </property>  
</object>

剖析XML

<標籤名>內容</標籤名>

什麼是Ajax