HTML 5 學習心得

#第七週

Application Programming Interface

应用程序接口

這一期要學的就是如何通過API (Application Programming Interface) 將別的網頁資料連接上我們的網頁

#因為知識點很多，會盡量將每個知識點的重要部分集中在一起

API指令集網站『例子：台灣痞客邦』

裡面收錄了有關Pixnet網站的指令，例如我們想要拿到Pixnet上面的某某東西的搜索結果、某篇文章、某些資料等等，都可以通過API指令集將Pixnet上面的資料套用到我們的網頁上。

舉個例子

假設我今天要列出文章專欄，hot專欄的內容，我就去Pixnet 指令集網站裡找相關的指令

接著網頁就會跳出有關的指令，以及有關這指令的內容

這是基於我的需求寫的API指令，網站會根據我的指令CallBack資料給我

#第一個指令前面要放上"?"，接下來的每個小指令前面要加上"&"

出來的結果會是這樣，一團密密麻麻的文字，可讀性差，因此我們需要一個“Json閱讀器”

有了閱讀器，原本密密麻麻的文字就會變得井然有序

#Pixnet API網站提供了兩種資料輸出規格，一種是xml，而另一種則是Json，在這裡我都是用json格式舉例

重複以上的步驟，用不同的指令集就可以從Pixnet中撈取到各種的資料到我們的網頁上。接下來要做的就是將撈到的資料連上我們的網頁

pixnet 搜索引擎

自己來做一個Pixnet 搜索引擎，以下是有關的API指令

這是成果

<input></input>；輸入資料

  1. 創建一開始的界面，從界面中讀取使用者輸入的資料
  2. 給<input> 設一個ID(myText)
  3. 創建兩個空間，一個放程式執行狀態（Searching/Found/Error)，另一個放CallBack回來的資料
  4. 創建一個按鈕，當使用者點擊後就開始執行搜索程式

點擊按鈕後開始搜索

#HTTP Status Messages；HTML狀態表示；Error404 應該是大家最熟悉的錯誤訊息吧～～

到了這一步，只要API指令準確無誤，程式就會順利讀取到資料並成功回傳，下一步是要將讀取到的資料展示出來

理解Json架構

再回來看一次Json格式的資料；我們搜索到的資料都被包在“articles”裡面，設計一套方程式，從articles裡讀取每一筆資料的ID, Title, Thumb 以及Tag。

#如果要讀到articles中第一筆資料中的title，獲得該資料的途徑為：articles[0].id

若要獲得其他的資料，方法類似，以此類推

這一部分便是這程式最核心的部分了，完成這步後大體就全部完成了

#這一部分小細節很多，學和寫的時候要特別注意

另外，每個小程式的ID要特別注意，因為一塊程式和另一塊程式之間的連接都靠搜尋ID完成的，所以這部分要特別小心

#程式的結構性沒有很好，以後有機會重新好好設計過一次

執行結果

>>> 程式範本 <<<

總結：這一部分剛開始學的時候會有點辛苦，因為當中有很多的參數，特殊寫法，以及技巧寫法（if那邊），可惜因為時間的緣故，沒有足夠的時間將這一部分好好的延伸出去，細節部分也沒有處理得很好，有很多美中不足的地方。這一期所學的東西應用性很廣，可玩性也很大，但換來的就是需要更多的學習成本，要花一些時間去“撈出”我們要的方程式並完善它。