>這就是我們處理服務器的響應的方式：
>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);
>
對於那些希望更多地了解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。但是，真的是
醜陋的嗎？還是難以理解？>
所以讓我們開始吧……>
>設置這將檢查請求URL，以確定應用程序應如何響應。如果請求來自腳本目錄，則將適當的文件與應用程序/JavaScript的內容類型一起提供。否則，如果已將請求的X重新抽出標題設置為XMLHTTPRequest，那麼我們知道我們正在處理AJAX請求，並且可以做出適當的響應。如果沒有這樣的情況，則提供文件視圖/index.html。
var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);
渲染函數異步讀取所請求的文件的內容。它通過對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，讓我們編寫一些單元測試以確保其有效。對於這些測試，我正在呼籲Supertest和Mocha尋求幫助：
接口
$.ajax({
url: 'send-ajax-data.php',
})
.done(function(res) {
console.log(res);
})
.fail(function(err) {
console.log('Error: ' + err.status);
});
現在，讓我們看一下我們在html中構建的用戶界面：
>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);
時，Onload事件才會發射。因此，Onload事件是您可以在幾秒鐘內充分利用的現代API。現有的事件將有向後兼容。但是，Onload事件應該是您選擇的工具。 Onload事件看起來像是JQuery上的成功回調，不是嗎？
是時候將5磅的啞鈴放在一邊，然後移動到手臂捲髮了。
如您所見，Vanilla Ajax是靈活而現代的前端API。您可以使用請求標題有很多想法，其中之一是版本化。因此，例如，假設我想支持此Web API的多個版本。這很有用，因為當我不想打破URL並提供一種機制，客戶可以選擇他們想要的版本。我們可以這樣設置請求標頭：
>
>您可能想知道，當我與之合作時，為什麼ResponseText包含服務器響應，這就是普通的舊json。事實證明，這是因為我沒有設置適當的重新定型。此AJAX屬性非常適合告訴前端API對服務器對期望的響應類型。因此，讓我們充分利用它： a，如果您必須解決這個問題：
>
在沒有jQuery vanilla ajax是指使用本機JavaScript創建異步的Web應用程序，而無需依靠JQuery庫。儘管JQuery Ajax提供了一種簡化的跨瀏覽器兼容方法來處理Ajax，但Vanilla Ajax可以使您對基礎過程有更多的控制和理解。如果您想減少諸如JQuery之類的外部庫的依賴關係。 var xhr = new xmlhttprequest（）; xhr.send（）; >如何監視AJAX請求的進度？ >所有現代瀏覽器都支持
>這樣，我們可以在Node.js中進行檢查：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);
});
// 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);
}
});
var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);
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);
});
>希望您喜歡300磅的臥推香草·阿賈克斯（Vanilla Ajax）。一段時間以來，阿賈克斯是一個可怕的野獸，但不再是。實際上，我們涵蓋了Ajax的所有基礎知識，而沒有拐杖，sha骨，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);
}
});
如何使用vanilla javaScript？
if（xhr.readystate == 4 && xhr.status ===== 200）
console.log（json.parse（xhr.responseText））;
}
xhr.send（）;
>
>我如何處理香草ajax中的錯誤？可以使用XMLHTTPREQUEST對象的OnError事件處理程序完成xhr.open（“ get”，'https：//api.example.com/data'，true） 。失敗的“）;
};
var xhr = new xmlhttprequest（）;
xhr.send（json.stringify（{key：“ value”}））;
如何在Vanilla Javascript中取消AJAX請求？ >您可以通過調用xmlhttprequest對象的中止方法來取消AJAX請求。這將立即終止請求。
>我可以使用vanilla javascript？>是的，但是不建議這樣做，因為它可以阻止腳本的執行並使您的網頁無反應互動，但不建議這樣做。 。要提出同步請求，請將false作為第三個參數傳遞到打開的方法。
>
以上是沒有jQuery的香草·阿賈克斯的指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
