![3.資料呈現
• 分析拿到的物件
• 顯示當天日期
• Date()
• 顯示天氣狀態
• msg.weather[0].description
34](https://image.slidesharecdn.com/ajax-150507115505-lva1-app6892/85/AJAX-Basic-34-320.jpg)
Uploaded byRyan Chung
AJAX Basic
本文件介绍了AJAX的基本概念，包括其异步工作原理、主要功能和基本架构。文档中详细说明了如何通过XMLHttpRequest对象获取和处理数据，以及如何在网页上动态更新内容。最后，文档涉及了通过AJAX调用天气数据和笑话的示例应用。
![第一次用 Vue.js 就愛上 [改]](https://cdn.slidesharecdn.com/ss_thumbnails/vuejs-160518081021-thumbnail.jpg?width=640&height=640&fit=bounds)
AJAX Basic
- 1.
- 2. 簡介 • Asynchronous JavaScriptand XML • 更新部分網頁內容，卻不用重新載入整個網頁 • 事件觸發 • 建立XMLHttpRequest物件 • 送出請求 Browser • 處理請求 • 建立回應 • 送出需求資料 Server • 接收資料 • 處理資料 • 更新畫面 Browser 2
- 3. 主要功能 • 取得後端資料 • 即時更新部分網頁 • 資料驗證 • 資料過濾 3
- 4. 基於以下標準 • XMLHttpRequest object • 發出請求 • JavaScript/DOM • 變動網頁內容 • CSS • 樣式變化 • XML • 常見資料傳輸格式 4
- 5. 一個基本的AJAX架構 要資料 - 拿到資料- 顯示資料 5
- 6.
- 7.
- 8.
- 9.
- 10.
- 11. 4.設定請求送出請求 • 設定請求方法：open(method,url,async) • method：傳輸方式GET / POST • url：要請求的網路資源 • async：非同步/同步 true / false • 送出請求方法：send(string) • POST才需要傳入字串 11
- 12.
- 13. 5.處理取得資料 • readystatechange • 當readyState改變時觸發 認識XMLHttpRequest的兩個屬性與一個事件 • readyState • 0：尚未初始化 • 1：連線已建立 • 2：請求已接收 • 3：請求處理中 • 4：請求處理完成 回應已準備好 • status • 200：OK • 404：找不到 13
- 14.
- 15.
- 16. 1.準備數則笑話在Server上 • 檔案名稱命名： • 年月日.txt • 例如：20150606.txt 16
- 17. 2.使用AJAX基本架構，修改畫面 • 一個按鈕 • 按鈕文字：顯示今日笑話 • 一個預備顯示區 • id：showData 17
- 18. 3.依據今日日期，產生需求檔名 1. 取得今天日期 2. 產生今日日期字串，並加上.txt 3. 設定請求該項資料 18
- 19.
- 20. XML檔案應用 – 取得活動清單 responseTextor responseXML 20
- 21.
- 22.
- 23. responseText or responseXML • responseText • 把拿到的資料當字串來處理 • 使用字串物件的方法 • responseXML • 把拿到的資料當XML來處理 • 可使用DOM 23
- 24.
- 25. 2.XML • 取出資料來源的屬性responseXML • 分析要處理的XML檔案 • 一個活動：一個Info元件 • 活動名稱：title • 開始日期：startDate • 如何取出一個元件中某個屬性的屬性值？ 25
- 26. 3.XML - Table • 前面加上表格的開始語法 • table border=1 • trtd日期/tdtd活動/td/tr • 中間穿插表格語法 • 後面加上表格的結束語法 • /table 26
- 27.
- 28.
- 29. 選擇城市，查詢今日天氣 • 資料來源 • OpenWeatherMap.org • 擷取方式 • JSONP – 需要匯入jQuery 29
- 30.
- 31.
- 32.
- 33.
- 34. 3.資料呈現 • 分析拿到的物件 • 顯示當天日期 • Date() • 顯示天氣狀態 • msg.weather[0].description 34
- 35.