http://MobileDev.TW

1. AJAX Basic
Ryan@MobileDev.TW
1

2. 簡介
• Asynchronous JavaScript and XML
• 更新部分網頁內容，卻不用重新載入整個網頁
• 事件觸發
• 建立XMLHttpRequest物件
• 送出請求
Browser
• 處理請求
• 建立回應
• 送出需求資料
Server
• 接收資料
• 處理資料
• 更新畫面
Browser
2

3. 主要功能
• 取得後端資料
• 即時更新部分網頁
• 資料驗證
• 資料過濾
3

4. 基於以下標準
• XMLHttpRequest object
• 發出請求
• JavaScript/DOM
• 變動網頁內容
• CSS
• 樣式變化
• XML
• 常見資料傳輸格式
4

5. 一個基本的AJAX架構
要資料 - 拿到資料 - 顯示資料
5

6. 按下按鈕取得後端資料
6

7. 1.畫面
先佈局畫面：說明文字、預備顯示區、按鈕
7

8. 1.佈局畫面
8

9. 2.按鈕按下後，觸發loadServerData()
9

10. 3.建立XMLHttpRequest物件
• 確認是否可使用XMLHttpRequest
• 若不行，則發出警告
10

11. 4.設定請求送出請求
• 設定請求方法：open(method,url,async)
• method：傳輸方式 GET / POST
• url：要請求的網路資源
• async：非同步/同步 true / false
• 送出請求方法：send(string)
• POST才需要傳入字串
11

12. 5.處理取得資料
• 確認拿到資料後，將資料顯示到畫面上，並且隱藏按鈕
12

13. 5.處理取得資料
• readystatechange
• 當readyState改變時觸發
認識XMLHttpRequest的兩個屬性與一個事件
• readyState
• 0：尚未初始化
• 1：連線已建立
• 2：請求已接收
• 3：請求處理中
• 4：請求處理完成 回應已準備好
• status
• 200：OK
• 404：找不到
13

14. 顯示今日笑話
利用AJAX取得需求資料
14

15. 運作架構
顯示今日笑話
01/01
笑話A
01/02
笑話B
01/03
笑話C
01/04
笑話D
01/05
笑話E
01/06
笑話F
01/04
笑話D
15

16. 1.準備數則笑話在Server上
• 檔案名稱命名：
• 年月日.txt
• 例如：20150606.txt
16

17. 2.使用AJAX基本架構，修改畫面
• 一個按鈕
• 按鈕文字：顯示今日笑話
• 一個預備顯示區
• id：showData
17

18. 3.依據今日日期，產生需求檔名
1. 取得今天日期
2. 產生今日日期字串，並加上.txt
3. 設定請求該項資料
18

19. Lab：顯示今日笑話
• 修改範例，製作一網頁，點擊按鈕後，可顯示今日笑話
19

20. XML檔案應用 – 取得活動清單
responseText or responseXML
20

21. 取得Server上的XML資料，顯示在網頁上
21

22. 取得Server上的XML資料，顯示在網頁上
22

23. responseText or responseXML
• responseText
• 把拿到的資料當字串來處理
• 使用字串物件的方法
• responseXML
• 把拿到的資料當XML來處理
• 可使用DOM
23

24. 1.修改資料來源
• 使用原先的AJAX基本架構
• 修改要取得的資料來源檔案
24

25. 2.XML
• 取出資料來源的屬性responseXML
• 分析要處理的XML檔案
• 一個活動：一個Info元件
• 活動名稱：title
• 開始日期：startDate
• 如何取出一個元件中某個屬性的屬性值？
25

26. 3.XML - Table
• 前面加上表格的開始語法
• table border=1
• trtd日期/tdtd活動/td/tr
• 中間穿插表格語法
• 後面加上表格的結束語法
• /table
26

27. 查詢今日天氣
跨網域資料存取：JSONP
27

28. 選擇城市，查詢今日天氣
28

29. 選擇城市，查詢今日天氣
• 資料來源
• OpenWeatherMap.org
• 擷取方式
• JSONP – 需要匯入jQuery
29

30. 1.佈局畫面與環境設定
• 匯入jQuery
30

31. 1.佈局畫面與環境設定
• 加入下拉式選單
• 當下拉式選單選定項目時，會觸發方法的執行
31

32. 2.資料擷取與處理
I.選定城市時，將城市id傳入
32

33. 2.資料擷取與處理
II.確認資料是否可成功取得
33

34. 3.資料呈現
• 分析拿到的物件
• 顯示當天日期
• Date()
• 顯示天氣狀態
• msg.weather[0].description
34

35. Lab：加上天氣圖示
http://openweathermap.org/api
35