在web初期階段，前端想要獲取后端服務信息需要刷新整個頁面，這種方式既耗時又讓用戶體驗十分糟糕，那么怎么解決這個問題呢？

想要搭建起前端和后端的快速通道，這個時候就需要使用Ajax。今天小編所要講的內容就是在JS中如何通過Ajax技術進行網絡請求。

一、Ajax介紹

Ajax是什么？

Ajax即Asynchronous JAVAscript And XML（異步JavaScript和XML）在 2005年被Jesse James Garrett提出的新術語，用來描述一種使用現有技術集合的‘新’方法，包括：html 或 XHTML, css, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。

使用Ajax技術網頁應用能夠快速地將增量更新呈現在用戶界面上，而不需要重載（刷新）整個頁面，這使得程序能夠更快地回應用戶的操作。

Ajax的優點：

可以無需刷新頁面而與服務器端進行通信；
允許你根據用戶事件來更新部分頁面內容。

Ajax的缺點：

沒有瀏覽歷史，不能回退；
存在跨域問題（同源）；
seo不友好。

Ajax 原理（發送Ajax請求的五個步驟）

接下來我們來了解一下Ajax 原理是什么，以及發送Ajax請求的五個步驟，其實也就是使用 XMLHttpRequest 對象的五個步驟。

一個完整的 HTTP 請求需要的是：

請求的網址、請求方法 get/post。
提交請求的內容數據、請求主體等。
接收響應回來的內容。

發送 Ajax 請求的五個步驟：

1）創建異步對象，即 XMLHttpRequest 對象。

2）使用 open 方法設置請求參數。open(method, url, async)。參數解釋：請求的方法、請求的 url、是否異步。第三個參數如果不寫，則默認為 true。

3）發送請求：send()。

4）注冊事件：注冊 onreadystatechange 事件，狀態改變時就會調用。如果要在數據完整請求回來的時候才調用，我們需要手動寫一些判斷的邏輯。

5）服務端響應，獲取返回的數據。

二、XMLHttpRequest 對象詳解

在 JavaScript 中，XMLHttpRequest 是客戶端的一個 API，它為瀏覽器與服務器通信提供了一個便捷通道?，F代瀏覽器都支持 XMLHttpRequest API，如 IE 7+、Firefox、Chrome、Safari 和 Opera。

發送請求

發送請求的方法：

open(method, url, async);

參數解釋：

method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）

另外還有個方法：（僅用于 POST 請求）

send(string);

POST 請求時注意：

如果想讓像form表單提交數據那樣使用POST請求，就需要使用 XMLHttpRequest 對象的 setRequestHeader()方法來添加 HTTP 頭。然后在 send() 方法中添加想要發送的數據：

xmlhttp.open('POST', 'ajax_test.php', true);

xmlhttp.setRequestHeader('Content-type', 'Application/x-www-form-urlencoded');

xmlhttp.send('name=smyhvae&age=27');

onreadystatechange 事件

注冊 onreadystatechange 事件后，每當 readyState 屬性改變時，就會調用 onreadystatechange 函數。

readyState：（存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化）

0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

status：

200: “OK”。
404: 未找到頁面。

在 onreadystatechange 事件中，當 readyState 等于 4，且狀態碼為 200 時，表示響應已就緒。

服務器響應的內容

responseText：獲得字符串形式的響應數據。
responseXML：獲得 XML 形式的響應數據。

如果響應的是普通字符串，就使用 responseText；如果響應的是 XML，使用 responseXML。

三、常用Ajax請求方式

手寫第一個 Ajax 請求

get 請求：

//【發送ajax請求需要五步】

//（1）創建XMLHttpRequest對象

var xmlhttp = new XMLHttpRequest();

//（2）設置請求的參數。包括：請求的方法、請求的url。

xmlhttp.open('get', '02-ajax.php');

//（3）發送請求

xmlhttp.send();

//（4）注冊事件。 onreadystatechange事件，狀態改變時就會調用。

//如果要在數據完整請求回來的時候才調用，我們需要手動寫一些判斷的邏輯。

xmlhttp.onreadystatechange = function () {

// 為了保證數據完整返回，我們一般會判斷兩個值

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

//（5）服務端相應：如果能夠進入這個判斷，說明數據請求成功了

console.log('數據返回成功：' + JSON.stringify(xmlhttp.responseText));

// 偽代碼：按業務需要，將接口返回的內容顯示在頁面上

// document.querySelector('h1').innerHTML = xmlhttp.responseText;

}

};

post請求：

//（1）異步對象

var xmlhttp = new XMLHttpRequest();

//（2）設置請求參數。包括：請求的方法、請求的url。

xmlhttp.open('post', '02.post.php');

// 如果想要使用post提交數據,必須添加此行

xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

//（3）發送請求

xmlhttp.send('name=fox&age=18');

//（4）注冊事件

xmlhttp.onreadystatechange = function () {

//（5）服務端相應

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

alert(xmlhttp.responseText);

}

};

封裝 Ajax 請求（重要）

上面的代碼，執行順序很好理解，但在實戰開發中，是不會這么寫的。假如你的頁面中，需要調十次接口，那豈不是要手寫十遍 Ajax 請求？這樣會導致大量的重復代碼。

所以，我們需要把重復代碼封裝成一個公共函數，然后通過回調函數處理成功和失敗的邏輯。

封裝 Ajax 請求的代碼如下：(get 請求為例)

// 封裝 Ajax為公共函數：傳入回調函數 success 和 fAIl

function myAjax(url, success, fail) {

// 1、創建XMLHttpRequest對象

var xmlhttp;

if (window.XMLHttpRequest) {

xmlhttp = new XMLHttpRequest();

} else {

// 兼容IE5、IE6瀏覽器。不寫也沒關系

xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');

}

// 2、發送請求

xmlhttp.open('GET', url, true);

xmlhttp.send();

// 3、服務端響應

xmlhttp.onreadystatechange = function () {

if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {

var obj = JSON.parse(xmlhttp.responseText);

console.log('數據返回成功：' + obj);

success && success(xmlhttp.responseText);

} else {

// 這里的 && 符號，意思是：如果傳了 fail 參數，就調用后面的 fail()；如果沒傳 fail 參數，就不調用后面的內容。因為 fail 參數不一定會傳。

fail && fail(new Error('接口請求失敗'));

}

};

}

// 單次調用 ajax

myAjax('a.json', (res) => {

console.log(res);

});

// 多次調用 ajax。接口請求順序：a --> b --> c

myAjax('a.json', (res) => {

console.log(res);

myAjax('b.json', (res) => {

console.log(res);

myAjax('c.json', (res) => {

console.log(res);

});

});

});

學會了封裝 get 請求之后，封裝 post請求也是類似的寫法。

下面再列舉兩種常見的請求方式：

Jquery-Ajax請求

// get請求

$('button').eq(0).click(()=>{

// 方法中有三個參數，給誰發,發什么參數（對象），回調

$.get('http://127.0.0.1:8001/jquery-server', {a:100,b:200}, (data)=>{

console.log(data);

})

});

// post請求

$('button').eq(1).click(()=>{

// 方法中有四個參數，給誰發 ,發什么參數（對象），回調 ,響應體數據類型

$.post('http://127.0.0.1:8001/jquery-server', {a:100,b:200}, (data)=>{

console.log(data);

})

});

// ajax方式

$('button').eq(2).click(()=>{

// 參數是一個對象

$.ajax({

//url

url:'http://127.0.0.1:8001/jquery-server',

// 攜帶參數

data:{a:100, b:200},

// 響應體結果類型設置

// dataType:'json',

// 請求類型

type:'GET',

// 成功的回調函數

success:function(data){

console.log(data)

},

// 超時時間

// timeout:2000,

// 頭信息設置

// headers:{},

// 失敗的回調

// error:function(){}

})

})

AxIOS-Ajax請求

// 配置baseURL

// axios.defaults.baseURL = 'http://127.0.0.1:8001'

// 有此配置項后，請求地址可省略一部分

const btn = document.querySelectorAll('button');

btn[0].addEventListener('click', ()=>{

//GET請求

axios.get('http://127.0.0.1:8001/axios-server',{

// 請求參數

params:{

a:700,

b:400

},

// 請求頭信息

// headers:{

// name:'張三',

// age:20

// },

// 回調函數

}).then(value =>{

console.log(value)

});

});

btn[1].addEventListener('click',()=>{

axios.post('http://127.0.0.1:8001/axios-server',{

// 攜帶參數

username:'admin',

passward:'admin',

})

})

btn[2].addEventListener('click', ()=>{

axios({

// 請求方法

method:'POST',

//url

url:'http://127.0.0.1:8001/axios-server',

// 參數

params:{

a:10,

b:100,

},

// 請求頭

Headers:{

c:100,

d:200

},

// 請求體參數

// data: {

// username:'admin',

// passward:'admin',

// },

})

})