javascrip mode pen 传统 method var start hang ack
// 传统ajax用法
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.timeout = 2000;
console.log(xhr.readyState); //0
xhr.open('GET', url);
console.log(xhr.readyState); //1
xhr.onloadstart = function(e) {
xhr.abort();
console.log(e);
};
xhr.onprogress = function(e) {
console.log(xhr.readyState); //3
console.log(e);
};
xhr.onload = function(res) {
console.log(res);
console.log(xhr.readyState); //4
};
xhr.onerror = function(err) {
console.log(err);
};
xhr.ontimeout = function(e) {
console.log(e);
};
xhr.onabort = function(e) {
console.log(e);
};
xhr.onloaded = function(e) {
console.log(e);
};
xhr.send();
// 传统ajax用法
function req(url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var res = JSON.parse(request.responseText);
callback(res);
}
};
// post
xhr.setRequestHeader('Content - Type', 'application / x - www - form - urlencoded');
xhr.send(data);
// get
xhr.setRequestHeader("Content-Type", "text/xml;charset=utf-8");
xhr.send(null);
}
req(url, data, callback());
// 替代ajax的fetch
fetch(' / users.json', {
method: 'POST',
body: data,
mode: 'cors',
redirect: 'follow',
headers: new Headers({
'Content - Type': 'text / plain'
})
}).then(function(res) {
console.log(res);
}).then(function(res) {
console.log(res);
}).
catch(function(err) {
console.log(err);
});
// 使用async,await的fetch
async
function req(url, data) {
try {
let response = await fetch(url, data);
let data = await response.json();
console.log(data);
} catch(err) {
console.log(err);
}
}
req('https: //www.baidu.com', data);
ajax 与 fetch 的用法
来源: http://www.bubuko.com/infodetail-2466156.html