Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
AJAX = Asynchronous JavaScript and XML
是一種非同步技術(Asynchronous)。早期在寫網頁的時候,尚不支援 AJAX 時,無法做到頁面局部更新資料這件事情,每次點擊連結,都一定是整個頁面重新整理。然而在有了 AJAX 技術之後,使得頁面局部更新內容,得以實現。
同步(synchronous):
先印出 1,然後印 100 次的 2,再印出 3,這就是同步(synchronous)的程式概念:一段程式執行之後 才會接續往下執行。
非同步(asynchronous)程式碼:
先印出 1,然後執行到 setTimeout 時,計時 1 秒鐘,在計時的期間,瀏覽器並不會停下來等,而是會繼續往下執行,所以會印出 3,然後計時的 1 秒鐘到了之後,且同步類型的程式碼也都執行完了,這時就會來執行 setTimout 所指定的 function 裡的程式。
2009 年:進入職場,曾任職於中視、華視、Yahoo!、新創公司。
2013 年:全職的網站前端自由工作者。
2016 年:成立卡斯有限公司:承接網站設計開發、主機代管。
2017 年:承接標案
2018 年:網站相關教學
2019 年:合夥存股管家
張互賓/Carlos
個人 email: chang.abin@gmail.com
希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。
課堂上以 Chrome 為主。
Safari
複製以下網址,貼到瀏覽器上看輸出:
https://tw.rter.info/capi.php
如下圖:
如果沒有,可到這個網址安裝,是個 Chrome 瀏覽器上的套件,方便看 JSON 資料。
下載 Postman( https://www.postman.com/downloads/ ),方便進行 API 的測試與觀察。
Postman 可透過以下按鈕,跳過註冊(藍框處:lightweight API client
):
透過 postman,測試以下 API(傳送資料類型選 GET
):
https://tw.rter.info/capi.php
示意圖:
在電腦桌面或其它自己習慣的位置,建立如下圖所示的資料夾:
無論是同個系統或是多個系統之間,互相傳遞資料時,最常用的兩種格式,即 XML 與 JSON。
XML = eXtensible Markup Language。HTML 就是 XML 的其中一種。
JSON = JavaScript Object Notation。
範例假設:
有一個產品,品牌名稱為 the_brand
,型號為 t-123
,價格為 100000
。圖片路徑有 http://ex.com/a.png
、 http://ex.com/b.png
。
請分別用 XML及 JSON 格式來表達:
就像寫 HTML 一樣,只是現在可自行定義標籤名稱:
若想確認 XML 格式是否符合規範的話,可到 XML Viewer 網站測試。如圖:
物件及陣列兩種格式都屬於 JSON 格式:
若想確認 JSON 格式是否符合規範的話,可到 JSON Parser 或 另一個 JSON Parser 網站測試。如圖:
寫一個 JSON 格式,敘述如下:
1、一個物件資料,有兩個 key,分別是 msg 與 data;
2、msg 的 value 部份,是一個字串,就叫「success」;
3、data 是一個陣列資料,裡面存著兩筆書本物件資料,該物件資料 key 的部份 有 book_name
與 book_price
;值的部份,同學可任意填入。
試著用 JSON Parser 工具驗證。