原始模型

最初載入頁面的方式——你為網站傳送一個請求到伺服器， 只要沒有出錯你將會獲取資源並顯示網頁到你的電腦上。但問題是每次請求都要載入整個頁面

AJAX模型

Ajax的全稱是Asynchronous JavaScript And XML，即非同步JavaScript和XML

通過使用諸如 XMLHttpRequest 、 Fetch API 等來實現，這些技術允許網頁直接處理對伺服器上可用的特定資源的 HTTP 請求，並在顯示之前根據需要對結果資料進行格式化。簡而言之，Ajax模型能使用Web API作為代理來更智慧地請求資料，而不僅僅是讓瀏覽器重新載入整個頁面。

為了進一步提高速度，可以在首次請求時將資源儲存在使用者的計算機上，這意味著在後續訪問中，他們將使用本地版本，而不是在首次載入頁面時下載新副本。 內容僅在更新後從伺服器重新載入。

XMLHttpRequest

XMLHttpRequest （XHR）現在是一個相當古老的技術 - 它是在20世紀90年代後期由微軟發明的，並且已經在相當長的時間內跨瀏覽器進行了標準化。不能跨域

let xhr = new XMLHttpRequest(); //1. 建立xml物件
xhr.open('GET', 'https://www.easy-mock.com/mock/5f5089e9eb182d5f62995f1c/xml/getNum');//2. 初始化請求
xhr.send();//3. 傳送請求
xhr.onload = function() {//4. onload表示當請求正確併成功返回資料時呼叫
    console.log(JSON.parse(this.response))
    let num=JSON.parse(this.response).data.number
    document.body.innerHTML=num
};
 

Fetch

Fetch API基本上是XHR的一個現代替代品——它是最近在瀏覽器中引入的，它使非同步HTTP請求在JavaScript中更容易實現，對於開發人員和在Fetch之上構建的其他API來說都是如此。

fetch('https://www.easy-mock.com/mock/5f5089e9eb182d5f62995f1c/xml/getNum')
.then(response => response.json())
.then(data => {
    let num=data.data.number
    document.body.innerHTML=num
});

axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get('https://www.easy-mock.com/mock/5f5089e9eb182d5f62995f1c/xml/getNum')
  .then(function (response) {
    let num=response.data.data.number
    document.body.innerHTML=num
})
</script>

jq中的ajax

可以引入jquery，使用其為我們封裝好的xml，可以跨域

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
$.ajax('https://www.easy-mock.com/mock/5f5089e9eb182d5f62995f1c/xml/getNum',{
    type:"GET",	
    success:function(res){
        let num=res.data.number
        document.body.innerHTML=num
    }
})
</script>

Jsonp

JSON with Padding，是一種藉助於script 標籤傳送跨域請求的技巧。它本質上不是一個請求，而是通過script標籤請求一個服務端的PHP檔案，這個檔案返回的結果是一段Js，作用是呼叫我們事先定義好的一個函式，從而將服務端想要給客戶端發過去的資料傳送給客戶端。你可以自己封裝，也可以通過安裝一個npm包使用：

$ npm install jsonp