iT邦幫忙

2023 iThome 鐵人賽

DAY 28
0
Modern Web

Web互動式網頁系列 第 28

DAY28 JavaScript網絡請求(Ajax)

  • 分享至 

  • xImage
  •  

什麼是Ajax?

Ajax是一種技術,允許JS在不刷新整個頁面的情況下向伺服器發送和接收數據。
全名是"Asynchronous JavaScript and XML",儘管最初用於XML數據的交換但通常使用JSON格式。

優勢

  • 異步請求:允許網頁發送和接收數據時不阻塞使用者操作來提高了用戶體驗。

  • 局部刷新:只有部分網頁內容需要刷新時不必整個頁面刷新,節省網路頻寬加快頁面加載速度。

  • 動態性:使網頁可以根據用戶的操作實時更新數據實現動態性和互動性。

工作原理

Ajax是一個基於瀏覽器內建的XMLHttpRequest對象的技術,允許網頁在不刷新整個頁面的情況下與伺服器進行數據交換。
實現網頁的異步請求使網頁可以繼續執行其他操作而不必等待請求完成。

範例:
使用JS進行網絡請求向伺服器發送GET請求並處理回應:

// 建立一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();

// 設置請求(GET)和URL
xhr.open("GET", "https://api.example.com/data", true);

// 定義當請求完成時的處理函數
xhr.onload = function () {
  if (xhr.status === 200) {
    // 請求成功,處理伺服器的回應
    var responseData = JSON.parse(xhr.responseText);
    console.log(responseData);
  } else {
    // 請求失敗,處理錯誤
    console.error("請求失敗:" + xhr.status);
  }
};

// 發送請求
xhr.send();

工作流程:

  • 建立XMLHttpRequest對象
    負責處理瀏覽器和伺服器之間的通信。

  • 設置請求和URL:
    通過調用open方法指定要使用的HTTP請求(如GET、POST、PUT等)和目標URL。
    第三個參數通常設置為true,表示使用異步請求。

  • 定義請求處理函數
    我們使用xhr.onload屬性來指定當請求完成時應該執行的處理函數,用於處理伺服器的回應數據。

  • 發送請求
    使用xhr.send()來發送HTTP請求並等待伺服器的回應。

今天介紹到這邊,感謝觀看!


上一篇
DAY27 JavaScript 本地存儲(LocalStorage & SessionStorage)
下一篇
DAY29 JavaScript網絡請求(Fetch API)
系列文
Web互動式網頁30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言