前言：作為前端開發，向后端發起請求這是必不可少的一個步驟，通過請求，后端返回給我們相應的數據，根據數據我們做出相應的操作。一般來說，現在很多前端開發者發起請求時都是采用第三方庫來實現，比如axios、jQuery庫等等。

一.利用jQuery實現ajax方法

采用jQuery封裝好的ajax方法發起請求很簡單，代碼就簡單如下就可以了。

$.ajax({url: ,type: '',dataType: '',data: {},success: function(){},error: function(){}})

我們只需要填入相應的參數屬性就可以了。

二.利用原生JavaScript實現ajax請求

原生JS中，我們主要是利用一個叫做XMLHttpRequest的對象進行后臺與服務端數據的交換，具體代碼可參考如下：

var Ajax={get: function(url, fn) {// XMLHttpRequest對象用于在后臺與服務器交換數據 var xhr = new XMLHttpRequest(); xhr.open('GET', url, true);xhr.onreadystatechange = function() {// readyState == 4說明請求已完成if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // 從服務器獲得數據 fn.call(this, xhr.responseText); }};xhr.send();},// datat應為'a=a1&b=b1'這種字符串格式，在jq里如果data為對象會自動將對象轉成這種字符串格式 post: function (url, data, fn) {var xhr = new XMLHttpRequest();xhr.open("POST", url, true);// 添加http頭，發送信息至服務器時內容編碼類型xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() {if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {fn.call(this, xhr.responseText);}};xhr.send(data);} }

注釋：

1. open(method, url, async) 方法需要三個參數:

**method：**發送請求所使用的方法（GET或POST）；與POST相比，GET更簡單也更快，并且在大部分情況下都能用；然而，在以下情況中，請使用POST請求：

無法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
**url：**規定服務器端腳本的 URL(該文件可以是任何類型的文件，比如 .txt 和 .xml，或者服務器腳本文件，比如 .asp 和 .php （在傳回響應之前，能夠在服務器上執行任務）)；

**async：**規定應當對請求進行異步（true）或同步（false）處理；true是在等待服務器響應時執行其他腳本，當響應就緒后對響應進行處理；false是等待服務器響應再執行。

2. send() 方法可將請求送往服務器。

3. onreadystatechange：存有處理服務器響應的函數，每當 readyState 改變時，onreadystatechange 函數就會被執行。

4. readyState：存有服務器響應的狀態信息。（更加具體的狀態碼信息可自行百度）

0: 請求未初始化（代理被創建，但尚未調用 open() 方法） 1: 服務器連接已建立（open方法已經被調用） 2: 請求已接收（send方法已經被調用，并且頭部和狀態已經可獲得） 3: 請求處理中（下載中，responseText 屬性已經包含部分數據） 4: 請求已完成，且響應已就緒（下載操作已完成） 5. responseText：獲得字符串形式的響應數據。 6. setRequestHeader()：POST傳數據時，用來添加 HTTP 頭，然后send(data)，注意data格式；GET發送信息時直接加參數到url上就可以，比如url?a=a1&b=b1。

示例：

var uri = 自己的API//創建XMLHTTPRequest對象var req = new XMLHttpRequest();//使用open方法設置和服務器的交互信息,參數一是請求的類型,//參數二是請求的url, 可以帶參數, 動態的傳遞參數starName到服務端 參數三是規定應當對請求進行異步（true）或同步（false）處理req.open("get", uri, false);//設置HTTP請求頭部req.setRequestHeader("Accept", "application/json");req.setRequestHeader("Content-Type", "application/json; charset=utf-8");req.setRequestHeader("OData-MaxVersion", "4.0");req.setRequestHeader("OData-Version", "4.0");//注冊事件 onreadystatechange 狀態改變就會調用req.onreadystatechange = function () {if (this.readyState == 4) {if (this.status == 200) {var data = JSON.parse(this.responseText);if (data.value.length > 0) {//獲取信息state = data.value[0].字段;show = true;} else {show = false;}}}};//發送請求req.send();

進行封裝處理：

this.executeWebAPI = function (requestType, requestUri, requestData, successCallback, errorCallback, isAsync) {var req = new XMLHttpRequest();if (isAsync == null) {isAsync = true;}req.open(requestType, encodeURI(requestUri), isAsync);req.setRequestHeader("Accept", "application/json");req.setRequestHeader("Content-Type", "application/json; charset=utf-8");req.setRequestHeader("OData-MaxVersion", "4.0");req.setRequestHeader("OData-Version", "4.0");req.setRequestHeader("Prefer", "odata.include-annotations=*");req.onreadystatechange = function () {if (this.readyState == 4 /* complete */) {req.onreadystatechange = null;if (this.status == 200) {if (successCallback) {successCallback(JSON.parse(this.responseText));}}else if (this.status == 204) {if (successCallback) {successCallback(this.getResponseHeader("OData-EntityId"));}}else {var error = JSON.parse(this.response).error;if (errorCallback) { errorCallback(error); }else { Xrm.Utility.alertDialog(error.message); }}}};req.send(JSON.stringify(requestData));}

調用：

executeWebAPI("GET", //請求方式uri, //請求路徑null, //攜帶的參數function (data) { //響應成功alert(data)},function (data) { //響應失敗alert(data.message);}, false); //是否異步請求

總結

以上是生活随笔為你收集整理的原生JS实现Ajax请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。