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
    美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
    Thumbnail
    Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
    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
    美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
    Thumbnail
    Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
    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舉例來說: