如何使用JavaScript进行AJAX调用,而不使用jQuery?
当前回答
老了,但我会尝试,也许有人会发现这个信息有用。
这是执行GET请求并获取一些JSON格式数据所需的最小代码量。这只适用于现代浏览器,如最新版本的Chrome, FF, Safari, Opera和Microsoft Edge。
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json'); // by default async
xhr.responseType = 'json'; // in which format you expect the response to be
xhr.onload = function() {
if(this.status == 200) {// onload called even on 404 etc so check the status
console.log(this.response); // No need for JSON.parse()
}
};
xhr.onerror = function() {
// error
};
xhr.send();
还可以查看新的Fetch API,它是XMLHttpRequest API的基于承诺的替代品。
其他回答
这是一个没有JQuery的JSFiffle
http://jsfiddle.net/rimian/jurwre07/
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
var url = 'http://echo.jsontest.com/key/value/one/two';
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
} else if (xmlhttp.status == 400) {
console.log('There was an error 400');
} else {
console.log('something else other than 200 was returned');
}
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
};
loadXMLDoc();
From youMightNotNeedJquery.com + JSON.stringify
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(JSON.stringify(data));
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
使用“vanilla”(普通)JavaScript:
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
if (xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
else if (xmlhttp.status == 400) {
alert('There was an error 400');
}
else {
alert('something else other than 200 was returned');
}
}
};
xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send();
}
jQuery:
$.ajax({
url: "test.html",
context: document.body,
success: function() {
$(this).addClass("done");
}
});
XMLHttpRequest ()
您可以使用XMLHttpRequest()构造函数创建一个新的XMLHttpRequest(XHR)对象,该对象将允许您使用标准的HTTP请求方法(如GET和POST)与服务器交互:
const data = JSON.stringify({
example_1: 123,
example_2: 'Hello, world!',
});
const request = new XMLHttpRequest();
request.addEventListener('load', function () {
if (this.readyState === 4 && this.status === 200) {
console.log(this.responseText);
}
});
request.open('POST', 'example.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
fetch ()
你也可以使用fetch()方法获取一个Promise,它解析为响应对象,表示对请求的响应:
const data = JSON.stringify({
example_1: 123,
example_2: 'Hello, world!',
});
fetch('example.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
},
body: data,
}).then(response => {
if (response.ok) {
response.text().then(response => {
console.log(response);
});
}
});
领航员sendBeacon()。
另一方面,如果你只是试图POST数据,不需要服务器的响应,最短的解决方案是使用navigator.sendBeacon():
const data = JSON.stringify({
example_1: 123,
example_2: 'Hello, world!',
});
navigator.sendBeacon('example.php', data);