jQuery — AJAX

本篇記錄用jQuery操作AJAX的方法

content
Introduction
load()
each()
find()
get()
post()
ajax()
JSONP
bottom

Introduction

先前有筆記過Javascript的AJAX使用方法，jQuery也提供AJAX方法。

load()

jQuery load() 方法是簡單但強大的AJAX 方法。

load() 方法從Server加載資料，並把返回的資料放入被選元素中，加載的資料可以是JSON、XML等格式。

$(selector).load(URL, data, callbackFunction);

URL參數(必需): 希望加載的網址。

data參數(可選): 與請求一同發送的查詢字符串鍵/值對集合。

callbackFunction(可選)參數: 執行的函數名稱。

如果今天要獲取JSON格式資料

可以使用$.getJSON()方法。來源

$(selector).getJSON(url,data,success(data,status,xhr))

只有url為必要的參數，其餘可不寫入。

以 httpbin.or網站作為範例:

JSON物件中可能含有多個屬性，可以用jQuery提供的$.each()方法進行陣列處理。

Top Introduction load() each() find() get() post()
ajax() JSONP bottom

each()

$(selector).each(function(index,element))

index: selector索引值

結合JSON資料格式範例:

Top Introduction load() each() find() get() post()
ajax() JSONP bottom

find()

DOM操作，往下查找所有子節點。

$(selector).find(filter)

get()

$.get(URL,data,function(data,status,xhr),dataType)

dataType指的是資料類型，更多資訊W3C可以查到。

以XML為範例

Top Introduction load() each() find() get() post()
ajax() JSONP bottom

post()

相較於$.get()傳送資料的方法，更加安全。W3C

ajax()

上述的AJAX方法$.ajax()簡化版，目前筆記比較常用到的，更多應用要查看W3C。

$.ajax(url: ' https:// ......' ,  // 網址
        dataType: ' ' ,      // 要求的資料種類
        error: function(){....} ,  // 請求失敗時執行的函數
        success: function(){....} ,  // 請求成功時執行的函數
       complete: function(){....} ,  // 完成執行時執行的函數  
       beforeSend: function(){....} ,  // 在AJAX執行之前發送
       cache: Boolean value(ture/false) // 是否進行快取
 )

Top Introduction load() each() find() get() post()
ajax() JSONP bottom

JSONP

用於跨網域存取的技術之一，會需要這樣的技術主因是瀏覽器有同源政策(Cross-Origin Resource Sharing; CROS)的限制，要從不同網域撈取資料會被block住。

具體的方式為: 由瀏覽器端載入外部程式，JSON透過<script>載入，不過使用上不太方便，可以做一點"加工"，將JSON資料包在一個預先指定的函式名稱內再回傳。

實作範例:

串接環保署的公開資料網站，採$.ajax()方法。

點選右上JSON格式

預覽資料內容(為一個陣列)

UVI為紫外線指數。

目前各地的紫外線強度如上，預先用CSS的class屬性設定顏色，區分強度。

Top Introduction load() each() find() get() post()
ajax() JSONP