如何使用JavaScript进行AJAX调用,而不使用jQuery?
当前回答
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);
其他回答
尝试使用Fetch Api (Fetch Api)
fetch('http://example.com/movies.json').then(response => response.json()).then(data => console.log(data));
非常清澈,100%香草味。
下面的几个例子的一个小组合,创造了这个简单的作品:
function ajax(url, method, data, async)
{
method = typeof method !== 'undefined' ? method : 'GET';
async = typeof async !== 'undefined' ? async : false;
if (window.XMLHttpRequest)
{
var xhReq = new XMLHttpRequest();
}
else
{
var xhReq = new ActiveXObject("Microsoft.XMLHTTP");
}
if (method == 'POST')
{
xhReq.open(method, url, async);
xhReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhReq.send(data);
}
else
{
if(typeof data !== 'undefined' && data !== null)
{
url = url+'?'+data;
}
xhReq.open(method, url, async);
xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhReq.send(null);
}
//var serverResponse = xhReq.responseText;
//alert(serverResponse);
}
// Example usage below (using a string query):
ajax('http://www.google.com');
ajax('http://www.google.com', 'POST', 'q=test');
或者如果你的参数是object(s) -轻微的额外代码调整:
var parameters = {
q: 'test'
}
var query = [];
for (var key in parameters)
{
query.push(encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key]));
}
ajax('http://www.google.com', 'POST', query.join('&'));
两者都应该完全兼容浏览器+版本。
在浏览器中使用纯JavaScript:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE ) {
if(xhr.status == 200){
console.log(xhr.responseText);
} else if(xhr.status == 400) {
console.log('There was an error 400');
} else {
console.log('something else other than 200 was returned');
}
}
}
xhr.open("GET", "mock_data.json", true);
xhr.send();
或者如果你想使用Browserify使用node.js来捆绑你的模块。你可以使用超级代理:
var request = require('superagent');
var url = '/mock_data.json';
request
.get(url)
.end(function(err, res){
if (res.ok) {
console.log('yay got ' + JSON.stringify(res.body));
} else {
console.log('Oh no! error ' + res.text);
}
});
这个版本在普通ES6/ES2015中怎么样?
function get(url) {
return new Promise((resolve, reject) => {
const req = new XMLHttpRequest();
req.open('GET', url);
req.onload = () => req.status === 200 ? resolve(req.response) : reject(Error(req.statusText));
req.onerror = (e) => reject(Error(`Network Error: ${e}`));
req.send();
});
}
函数返回一个promise。下面是一个关于如何使用该函数并处理它返回的承诺的示例:
get('foo.txt')
.then((data) => {
// Do stuff with data, if foo.txt was successfully loaded.
})
.catch((err) => {
// Do stuff on error...
});
如果你需要加载一个json文件,你可以使用json .parse()将加载的数据转换为JS对象。
您还可以集成req。responseType='json'到函数中,但不幸的是,没有IE支持它,所以我将坚持使用json .parse()。
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();