# AJAX
###### tags: `JavaScript` `JS 直播班 - 2021 秋季班`

# AJAX

透過AJAX可以使用非同步請求的方式，向伺服器請求HTML資料

載入資料並不是全部都一次載入，而是照順序載入:

1. HTML結構並會慢慢的解析下去
2. IMG SRC (圖片資源)
3. all.js


## AJAX透過JS發出網路請求(JS原生寫法)

1. XMLHttpRequest
2. Fetch

## 套件，需額外載入JS(axios)

[GitHub - axios/axios: Promise based HTTP client for the browser and node.js](https://github.com/axios/axios)

### 1. axios串接外部資料

// 在html需要先載入
// <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
//套件先載入好在載入自己的js
axios.get('https://hexschool.github.io/ajaxHomework/data.json')  //取得該json的位置
  .then(function (response) {
    console.log(response.data);
    console.log(response.status); //狀態碼200代表成功
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  }); 
//此function會等到伺服器response之後才開始啟用

## 非同步AJAX觀念

### **非同步**

當你在使用 DOM 事件時，其實你已經在運用非同步的概念，你不知道事件什麼時候會發生，但你可以先把要發生的函式準備好，等到事件發生時，就進行處理。


相對於在網頁一開始時就進行一連串動作，上述這種流程稱為「非同步」。由於 JavaScript 可以把函式當成值來傳遞，因此執行程序可以非同步的發生。

當我們在串接第三方 API 時，由於要等待遠端伺服器回應，等待的時候有可能會大幅影響到使用者的體驗，因此「非同步請求」變得更加重要。

## 解決非同步的辦法

由於axios的get function會在伺服器response之後才執行，所以沒辦法在執行時直接同步內容

解法:將get要到的資料寫成一個function，故在response之後直接執行函數就可以解決了

let array=[];
axios.get('https://hexschool.github.io/ajaxHomework/data.json')  //取得該json的位置
  .then(function (response) {
    array = response.data;
    showData();
  }); 

function showData(){  //將需要同步顯示的資料寫成一個function並在get response之後套用
    const go=document.querySelector("h1.go");
    go.textContent=array[0].name; 
}

## **使用 AJAX 提高使用者體驗**

在一般的情境下，瀏覽器每次發出請求，都會接收到一個完整的 HTML 網頁，而伺服器回傳新網頁、瀏覽器重新演算網頁的過程，有一小段空白的等待時間。若使用者在網路不穩定的地方連線，或者傳遞的資料量龐大時，這一小段的空白時間就會嚴重影響到使用者體驗。

另外，從效率考量，有些請求/回應其實只更新了局部的畫面，不需要每次都重新載入一個全新的網頁。因此，為了提升使用者體驗、並提高網頁的效率，而有了 AJAX 技術。透過 AJAX 技術，client 可以向 server 發出非同步請求，索取局部內容的資料進行抽換，大幅度降低每次請求與回應的資料量，從而提高了瀏覽速度。

使用 AJAX 不僅可以讓使用者在不刷新畫面的情況下繼續操作，不會有在操作途中「中斷」與「等候」的時間，創造了更佳的使用者體驗。