iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 13
0
Modern Web

網頁程式設計so easy系列 第 13

Day12 [AJAX]

  • 分享至 

  • xImage
  •  

AJAX(Asychronous JavaScript And XML,非同步JavaScript與XML)

它透過JavaScript讓網頁能動態地從網路下載資料,並顯示在目前瀏覽的網頁上。
使用AJAX技術時,網頁中的JavaScript程式可隨時再向伺服器提出要求,取得新的資料(文字或圖片等),並更新到網頁,使用者不會看到重新載入網頁的動作,因此可做出各種動態網頁效果。

實作時可使用最簡單的load()語法來實作AJAX。
我們在一網頁設置一div區塊,使用$(div區塊).load(網址);,即將網頁透過AJAX的方式傳至div區塊。
範例

JSON(JavaScript Object Notation)
AJAX通常會使用JavaScript較好處理的JSON或XML格式來傳送。
jQuery中,要利用AJAX取得JSON資料可呼叫getJSON()函式:
$.getJSON(網址, 函式function(取得的JSON物件){...});
範例

接下來要測試會使用一個提供CORS(Cross-Origin Resource Sharing,即可提供AJAX服務的網站)存取的網站,其提供各種類型的HTTP存取服務或資料,讓大家透過網路取得各種資料的情形。

當需要重複處理JSON物件中的資料時,可使用下面這個語法
$.each(待處理的物件或陣列, function(這一輪被處理的屬性名稱, 這一輪被處理的屬性值){ ... });
範例

除了JSON,AJAX常用的資料格式為XML,它就像HTML文件一樣是用元素、標籤組成,但其元素、屬性名稱都可自行定義,不像HTML是由W3C規範。
$.get(網址, function(xml資料){ ... } );
範例

範例包含上述語法實作。

更多可參考:http://expect7.pixnet.net/blog/post/37919326-%5B%E7%A8%8B%E5%BC%8F%5D%5Bjquery%5D-jquery%E4%B8%AD%E7%9A%84ajax%E7%9A%84%E5%9F%BA%E7%A4%8E%E9%81%8B%E7%94%A8%E3%80%82%E6%8F%90%E4%BE%9B%E7%AF%84


上一篇
Day11 [RWD & BootStrap]
下一篇
Day13 [javaScript練習-1]
系列文
網頁程式設計so easy30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言