AJAX // XHR 練習

閱讀時間約 2 分鐘

AJAX // XHR是什麼:

  1. 利用 Javascript 程式進行連線
  2. 近期使用最新的 fetch

fetch 函示基本語法:

fetch("網址").then(function(回應物件){
  return (回應物件);
});

處理不同格式的語法:

  • 根據連線後回傳的資料格式, 寫出相對應的程式
  • 取得純文字資料的回應
fetch("網址").then(function(response){
  return (response).text();
}).then(function(data){
  console.log(data); // 純文字資料
});
  • 取得 JSON 資料的回應
fetch("網址").then(function(response){
  return respones.json();
}).then(function(data){
  console.log(data); // JSON 資料
});

練習:

<button onclick="getData()">取得連線資料</button>
<div id="result"></div>
<script>
  // 利用 fetch 取得資料
  fetch("網址").then(function(response){
    return response.json();
  }).then(function(data){
    // 把取得的資料, 呈現在畫面上
    let result=document.querySelector("#result");
    result.innerHTML=""; // 先把畫面清空, 避免重複
    for(let i=0;i<data.length;i++){
      let product=data[i];
      // 要寫 += 如果寫 = 會覆蓋不會一條一條列出
      result.innerHTML+="<div>"+product.name+","+product.price;
      } 
    });
  }
</script>

    0會員
    7內容數
    留言0
    查看全部
    發表第一個留言支持創作者!
    Yu Chun的沙龍 的其他內容
    事件是什麼: 發生了一件事情 執行相對應的程式 常見事件的種類: onclick 「點擊」 onmouseover 「滑鼠移入」 onmouseout 「滑鼠移出」 onmousedown 「滑鼠按住」 onmouseup 「滑鼠放開」 事件處理的三大關鍵: 在哪個事件上發生 事件的種類是什麼 執行
    HTML DOM 是什麼? 根據HTML標籤建立的物件結構 每個HTML標籤在Javascript中都有對應的標籤物件 把HTML標籤物件串接在一起, 成為物件結構, 就稱之為HTML DOM HTML DOM (Document Object Model) 操作Document 物件: Docum
    陣列是什麼: 按照順序存放其他資料的容器 Javascript 內建的物件 利用有順序的編號,來管理內部的資料 基本語法: 取得陣列長度: 陣列.length 取得陣列中特定編號的資料: 練習題:班上同學有五位,成績分別為 20,35,45,70,100, 請印出班上成績的總平均:
    基本語法: 物件的函式: 呼叫函式的方法: this 在物件的用法: JSON 寫法:
    事件是什麼: 發生了一件事情 執行相對應的程式 常見事件的種類: onclick 「點擊」 onmouseover 「滑鼠移入」 onmouseout 「滑鼠移出」 onmousedown 「滑鼠按住」 onmouseup 「滑鼠放開」 事件處理的三大關鍵: 在哪個事件上發生 事件的種類是什麼 執行
    HTML DOM 是什麼? 根據HTML標籤建立的物件結構 每個HTML標籤在Javascript中都有對應的標籤物件 把HTML標籤物件串接在一起, 成為物件結構, 就稱之為HTML DOM HTML DOM (Document Object Model) 操作Document 物件: Docum
    陣列是什麼: 按照順序存放其他資料的容器 Javascript 內建的物件 利用有順序的編號,來管理內部的資料 基本語法: 取得陣列長度: 陣列.length 取得陣列中特定編號的資料: 練習題:班上同學有五位,成績分別為 20,35,45,70,100, 請印出班上成績的總平均:
    基本語法: 物件的函式: 呼叫函式的方法: this 在物件的用法: JSON 寫法:
    你可能也想看
    Google News 追蹤
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    JavaScript30 傳送門:https://javascript30.com/ 寫到挑戰六覺得心累ㄌ,向來不是一個可以長久堅持好習慣的人,30 個挑戰聽起來很少,但如果要日復一日堅持下去其實好長r 😮‍💨 挑戰六透過 input 來 filter 從 api 拿回來的資料結
    xhr 在下面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。 具體來說步驟有四個: 建立XMLHttpReque 開啟一個請求。 送出請求。 拿到回應後去處理畫面要如何呈現。
    Thumbnail
    AJAX(Asynchronous JavaScript And XML)為JavaScript和XML的非同步技術,可以讓瀏覽器建立快速、更加和容易使用的操作介面。AJAX核心技術是非同步的HTTP請求(Asynchronous HTTP Requests),除了第一次載入網頁外,HTTP請求是在
    Thumbnail
    哇!蘋果秘密開發ChatGPT和Ajax GPT,巨額AI訓練。由AI高層約翰·吉安安德里帶隊,開發多功能模型,如AppleCare的聊天機器人。Ajax GPT有2000億參數,超越OpenAI GPT-3.5。或將整合“Apple GPT”到Siri。蘋果AI投資將顛覆科技!
    Thumbnail
    當你在網路上購物或查詢資料時,有時候會發現網頁的某部分內容會自動更新,而不需要重新整理整個頁面,這背後的技術就叫做 AJAX。AJAX 是 "Asynchronous JavaScript and XML" ,意思是使用 JavaScript 以非同步的方式和伺服器交換資料。
    Thumbnail
    接下來要講前後端怎麼溝通,最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論,個人推薦使用 axios,那他們又有什麼優缺點呢?讓我簡單講解一下 ajax ajax 用法有點麻煩,要先引入 jQuery,用法如下 ajax 比起 axios 較為笨重也較不安全
    如有需要可以不用浪費效能重新將整個頁面重新載入,可以使用非同步的JS,使用動態載入資料
    Objective 因後面有幾個周末無法全空下時間學習,最近又因為專案開始進行常常會加班,為使課程可於期限內完成,為自己設定的目標就是在7/18學期2-2開始前至少完成一周的作業。現在看來至少是完成了最低的標準,並提前開始下週進度。 Reflective Interpretive
    Thumbnail
    當然,若是執意想買個股的話,我另外的建議是: 1選擇大型權值股,比如台積電、鴻海、中華電…等,相較於其他個股更安全些。 2選擇被很多ETF重覆納入的個股去挑選,如兆豐金就同時被0050、0056、00878納入。 以三大類型的ETF舉例來說:
    Thumbnail
    自從2020年3月份股市從8千多點反彈至今的1萬7千多點,處在這樣地市場氛圍,確實會有股市短期一直往上的錯覺,反而忽略了下跌的風險,甚至有些人還有想辭掉工作,準備當個全職交易者的念頭。 【關於個股需要做的功課】 【投資新手還有更好的選擇】 以三大類型的ETF舉例來說:
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    JavaScript30 傳送門:https://javascript30.com/ 寫到挑戰六覺得心累ㄌ,向來不是一個可以長久堅持好習慣的人,30 個挑戰聽起來很少,但如果要日復一日堅持下去其實好長r 😮‍💨 挑戰六透過 input 來 filter 從 api 拿回來的資料結
    xhr 在下面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。 具體來說步驟有四個: 建立XMLHttpReque 開啟一個請求。 送出請求。 拿到回應後去處理畫面要如何呈現。
    Thumbnail
    AJAX(Asynchronous JavaScript And XML)為JavaScript和XML的非同步技術,可以讓瀏覽器建立快速、更加和容易使用的操作介面。AJAX核心技術是非同步的HTTP請求(Asynchronous HTTP Requests),除了第一次載入網頁外,HTTP請求是在
    Thumbnail
    哇!蘋果秘密開發ChatGPT和Ajax GPT,巨額AI訓練。由AI高層約翰·吉安安德里帶隊,開發多功能模型,如AppleCare的聊天機器人。Ajax GPT有2000億參數,超越OpenAI GPT-3.5。或將整合“Apple GPT”到Siri。蘋果AI投資將顛覆科技!
    Thumbnail
    當你在網路上購物或查詢資料時,有時候會發現網頁的某部分內容會自動更新,而不需要重新整理整個頁面,這背後的技術就叫做 AJAX。AJAX 是 "Asynchronous JavaScript and XML" ,意思是使用 JavaScript 以非同步的方式和伺服器交換資料。
    Thumbnail
    接下來要講前後端怎麼溝通,最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論,個人推薦使用 axios,那他們又有什麼優缺點呢?讓我簡單講解一下 ajax ajax 用法有點麻煩,要先引入 jQuery,用法如下 ajax 比起 axios 較為笨重也較不安全
    如有需要可以不用浪費效能重新將整個頁面重新載入,可以使用非同步的JS,使用動態載入資料
    Objective 因後面有幾個周末無法全空下時間學習,最近又因為專案開始進行常常會加班,為使課程可於期限內完成,為自己設定的目標就是在7/18學期2-2開始前至少完成一周的作業。現在看來至少是完成了最低的標準,並提前開始下週進度。 Reflective Interpretive
    Thumbnail
    當然,若是執意想買個股的話,我另外的建議是: 1選擇大型權值股,比如台積電、鴻海、中華電…等,相較於其他個股更安全些。 2選擇被很多ETF重覆納入的個股去挑選,如兆豐金就同時被0050、0056、00878納入。 以三大類型的ETF舉例來說:
    Thumbnail
    自從2020年3月份股市從8千多點反彈至今的1萬7千多點,處在這樣地市場氛圍,確實會有股市短期一直往上的錯覺,反而忽略了下跌的風險,甚至有些人還有想辭掉工作,準備當個全職交易者的念頭。 【關於個股需要做的功課】 【投資新手還有更好的選擇】 以三大類型的ETF舉例來說: