沒有jQuery的香草·阿賈克斯的指南

鑰匙要點

ajax，用於異步JavaScript和XML的縮寫，允許部分頁面更新，減少了整頁刷新的需求，並啟用了更多流暢的用戶體驗。 AJAX請求的基本解剖結構涉及為HTTP請求創建所需類的實例，指定HTTP請求方法和頁面的URL並發送請求。
• 雖然jQuery可以簡化AJAX請求，但並非總是必要的。 Vanilla JavaScript中的Ajax API經歷了重大改進，從標準角度來看，XMLHTTPreQuest規範現在被視為一個單一實體，表明社區承諾堅持一個標準。 Ajax是異步JavaScript和XML的簡短，AJAX是一種進行部分頁面更新的機制。它使您能夠使用來自服務器的數據更新頁面的部分，同時避免需要進行完整的刷新。以這種方式進行部分更新可以有效地創建流體用戶體驗，並且可以減少服務器上的負載。
這是基本Ajax請求的解剖學：

>在這裡，我們正在創建所需類的實例，以向服務器提出HTTP請求。然後，我們調用其開放方法，將HTTP請求方法指定為第一個參數，以及我們要求的頁面的URL。最後，我們將其發送方法稱為NULL作為參數。如果在請求後（在這裡我們使用的是GET），則此參數應包含我們要發送請求的任何數據。

>這就是我們處理服務器的響應的方式：

>

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

> onreadystatechange是異步的，這意味著它隨時被調用。這些類型的功能是回調 - 一旦處理完成後，它就會被調用。在這種情況下，處理器正在服務器上進行。

>

對於那些希望更多地了解Ajax基礎知識的人，MDN網絡有一個很好的指南。

到jQuery還是不jQuery？

> 因此，好消息是上述代碼將在所有最新的主要瀏覽器中起作用。壞消息是，它非常令人費解。好！我已經在尋找優雅的解決方案。

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

>

使用jQuery，可以將整個片段濃縮為：>

這很好。確實，對於包括您在內的許多人來說，JQuery在Ajax方面已成為事實上的標準。但是，你知道嗎？不必是這樣。存在jQuery來繞過醜陋的DOM API。但是，真的是

醜陋的嗎？還是難以理解？

在本文的其餘部分中，我想調查對Vanilla JavaScript中Ajax API的改進。可以在W3C上找到整個規範。令我驚訝的是這個規範。它不再是“ xmlhttprequest級別2”，而是“ xmlhttprequest級別1”，這是兩個規格之間2011年合併的結果。展望未來，它將從標準的角度將其視為一個實體，而生活水平將被稱為XMLHTTPREQUEST。這表明社區有承諾堅持一個標準，這對於想要擺脫jQuery的開發人員而言，這只會意味著好消息。

>

所以讓我們開始吧……

>

>設置

在本文中，我在後端使用node.js。是的，瀏覽器和服務器上將有JavaScript。 Node.js後端很精美，我鼓勵您在Github上下載整個演示並跟隨。這是服務器上的肉和土豆：

>

這將檢查請求URL，以確定應用程序應如何響應。如果請求來自腳本目錄，則將適當的文件與應用程序/JavaScript的內容類型一起提供。否則，如果已將請求的X重新抽出標題設置為XMLHTTPRequest，那麼我們知道我們正在處理AJAX請求，並且可以做出適當的響應。如果沒有這樣的情況，則提供文件視圖/index.html。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

>我將在我們潛入服務器中的AJAX響應中，擴展評論的部分。在node.js中，我不得不對渲染和httphandler進行一些重彈性：

渲染函數異步讀取所請求的文件的內容。它通過對HTTPhandler函數的引用，然後將其作為回調執行。 httphandler函數檢查是否存在錯誤對象（例如，如果無法打開所請求的文件）。提供一切都很好，然後使用適當的HTTP狀態代碼和內容類型為文件的內容提供服務。

>

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

測試API

喜歡使用任何聲音後端API，讓我們編寫一些單元測試以確保其有效。對於這些測試，我正在呼籲Supertest和Mocha尋求幫助：>

這些確保我們的應用程序以正確的內容類型和HTTP狀態代碼響應不同的請求。安裝了依賴項後，您可以使用NPM測試從命令中運行這些測試。

接口

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

現在，讓我們看一下我們在html中構建的用戶界面：

html看起來不錯又整潔。如您所見，所有的興奮都在JavaScript中發生。

> >如果您瀏覽任何規範的Ajax書，您可能會發現到處都有現有狀態。此回調功能帶有嵌套的IF和許多絨毛，這使得很難記住頭頂。讓我們將現有狀態和on載事件直接放在頭上。

>

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

這是控制台中的輸出：

成功

時，Onload事件才會發射。因此，Onload事件是您可以在幾秒鐘內充分利用的現代API。現有的事件將有向後兼容。但是，Onload事件應該是您選擇的工具。 Onload事件看起來像是JQuery上的成功回調，不是嗎？ 是時候將5磅的啞鈴放在一邊，然後移動到手臂捲髮了。

>設置請求標頭

jQuery設置封面下的請求標頭，因此您的後端技術知道這是AJAX請求。通常，後端不在乎get請求只要發送適當的響應即可到達何處。當您想使用相同的Web API支持Ajax和HTML時，這很方便。因此，讓我們看一下如何在Vanilla Ajax中設置請求標題：>

>這樣，我們可以在Node.js中進行檢查：

如您所見，Vanilla Ajax是靈活而現代的前端API。您可以使用請求標題有很多想法，其中之一是版本化。因此，例如，假設我想支持此Web API的多個版本。這很有用，因為當我不想打破URL並提供一種機制，客戶可以選擇他們想要的版本。我們可以這樣設置請求標頭：

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

在後端，請嘗試：

>

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

>我們在家中，沒有汗水！您可能想知道，關於Ajax還有什麼要知道的？好幾個整潔的技巧。

>

響應類型

// app.js
var app = http.createServer(function (req, res) {
  if (req.url.indexOf('/scripts/') >= 0) {
    render(req.url.slice(1), 'application/javascript', httpHandler);
  } else if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
    // Send Ajax response
  } else {
    render('views/index.html', 'text/html', httpHandler);
  }
});

>您可能想知道，當我與之合作時，為什麼ResponseText包含服務器響應，這就是普通的舊json。事實證明，這是因為我沒有設置適當的重新定型。此AJAX屬性非常適合告訴前端API對服務器對期望的響應類型。因此，讓我們充分利用它：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

很棒的，我可以告訴API的期望，而不必退回純文本，而不得不將其解析為JSON。幾乎所有最新的主要瀏覽器都可以使用此功能。當然，jQuery會自動進行這種類型的轉換。但是，我們現在有一種方便的方式在普通的JavaScript中做同樣的事情，這不是很棒嗎？ Vanilla Ajax對許多其他響應類型都有支持，包括XML。 可悲的是，在Internet Explorer中，這個故事並不那麼出色。截至IE 11，該團隊尚未增加對Xhr.ResponseType ='json'的支持。此功能將到達Microsoft Edge。但是，截至撰寫本文時，該錯誤已經近兩年了。我的猜測是微軟的人們一直在努力改造瀏覽器。希望我們希望Microsoft Edge（又名Spartan項目）能兌現其承諾。

a，如果您必須解決這個問題：

>

>緩存破壞

>人們傾向於忘記的一個瀏覽器功能是緩存AJAX請求的能力。例如，Internet Explorer默認情況下會這樣做。我曾經掙扎著幾個小時，試圖弄清為什麼我的Ajax因此因此而無法工作。幸運的是，JQuery默認情況下會破壞瀏覽器緩存。好吧，您也可以在普通的ajax中，這很簡單：

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

>

根據jQuery文檔，它所做的只是將時間戳查詢字符串附加到請求的末尾。這使請求有些獨特，並破壞了瀏覽器緩存。發射http ajax請求時，您可以看到這是什麼樣子：

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

tada！一切都沒有戲劇。

結論

>希望您喜歡300磅的臥推香草·阿賈克斯（Vanilla Ajax）。一段時間以來，阿賈克斯是一個可怕的野獸，但不再是。實際上，我們涵蓋了Ajax的所有基礎知識，而沒有拐杖，sha骨，jQuery。

我會以簡潔的方式給您打電話：

>

這就是響應的樣子：

別忘了，您可以在Github上找到整個演示。我歡迎您在評論中聽到和沒有jQuery的想法。

// app.js
var app = http.createServer(function (req, res) {
  if (req.url.indexOf('/scripts/') >= 0) {
    render(req.url.slice(1), 'application/javascript', httpHandler);
  } else if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
    // Send Ajax response
  } else {
    render('views/index.html', 'text/html', httpHandler);
  }
});

>

在沒有jQuery

的香草ajax上的常見問題（常見問題解答）

vanilla ajax是指使用本機JavaScript創建異步的Web應用程序，而無需依靠JQuery庫。儘管JQuery Ajax提供了一種簡化的跨瀏覽器兼容方法來處理Ajax，但Vanilla Ajax可以使您對基礎過程有更多的控制和理解。如果您想減少諸如JQuery之類的外部庫的依賴關係。

>，這也是一個不錯的選擇。

如何使用vanilla javaScript？

var xhr = new xmlhttprequest（）; xhr.open（“ get”，'https：//api.example.com/data'，true） xhr. onreadystatechange = function（）{
if（xhr.readystate == 4 && xhr.status ===== 200）
console.log（json.parse（xhr.responseText））;
}
xhr.send（）;
>

>我如何處理香草ajax中的錯誤？可以使用XMLHTTPREQUEST對象的OnError事件處理程序完成

var xhr = new xmlhttpRequest（）;

xhr.open（“ get”，'https：//api.example.com/data'，true） 。失敗的“）;

};

xhr.send（）;
var xhr = new xmlhttprequest（）; xhr.open（“ post”，'https：//api.example.com/data'，true） .setRequestheader（“ content-type”， “ application/json”）;
xhr.send（json.stringify（{key：“ value”}））;

如何在Vanilla Javascript中取消AJAX請求？ >您可以通過調用xmlhttprequest對象的中止方法來取消AJAX請求。這將立即終止請求。

>我可以使用vanilla javascript？

>是的，但是不建議這樣做，因為它可以阻止腳本的執行並使您的網頁無反應互動，但不建議這樣做。 。要提出同步請求，請將false作為第三個參數傳遞到打開的方法。

>

>如何監視AJAX請求的進度？

您可以使用AJAX請求的進度來監視AJAX請求的進度XMLHTTPREQUEST對象的OnProgress事件處理程序。此事件是多次觸發的，提供了當前的進度信息。

>我可以與其他JavaScript庫或框架一起使用Vanilla Ajax？ 。這是本機JavaScript功能，不依賴任何外部庫。

>所有現代瀏覽器都支持

以上是沒有jQuery的香草·阿賈克斯的指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！