原生js、jQuery和Vue.js的Ajax的详细对比
原生js
ajax('get', 'http://127.0.0.1:3000/get', function(response){
alert(JSON.parse(response)['message']);
});
ajax('post', 'http://127.0.0.1:3000/post', function (response) {
alert(JSON.parse(response)['message']);
}, JSON.stringify({name: "post测试"}));
function ajax(method, url, callback, data, async){
var data=data || null;
var async=async || true;
var xhr = new window.XMLHttpRequest || ActiveXObject('Microsoft.XMLHTTP');
xhr.open(method, url, async);
xhr.setRequestHeader('content-type', 'application/json');
xhr.send(data);
console.log("发送的数据是:"+data);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >=200&&xhr.status<300||xhr.status==304){
console.log("完成请求,响应就绪");
callback(this.responseText);
}
}
}
}
原生js-Promise
ajax('get', 'http://127.0.0.1:3000/get').then(function (data) {
alert(JSON.parse(data).message);
}).catch(function (error) {
alert(error);
});
ajax('post', 'http://127.0.0.1:3000/post', JSON.stringify({ name: "post测试" })).then(function (data) {
alert(JSON.parse(data).message);
}).catch(function (error) {
alert(error);
});
function ajax(method, url, data, async) {
var data = data || null;
var async = async || true;
var xhr = new window.XMLHttpRequest || ActiveXObject('Microsoft.XMLHTTP');
xhr.open(method, url, async);
xhr.setRequestHeader('content-type', 'application/json');
xhr.send(data);
console.log("发送的数据是:" + data);
return new Promise(function (resolve, reject) {
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
console.log("完成请求,响应就绪");
resolve(this.responseText);
}
else {
reject(new Error(this.statusText));
}
}
}
});
}
jQuery
$.get('http://127.0.0.1:3000/get', function(data, status){
alert(data.message);
});
$.post('http://127.0.0.1:3000/post', {
name: 'post测试',
}, function(data, status){
alert(data.message);
});
Vue.js
new Vue().$http.get('http://127.0.0.1:3000/get').then(function (res) {
alert(res.body.message);
}, function () {
console.log('请求失败处理');
});
new Vue().$http.post('http://127.0.0.1:3000/post', { name: "post测试"}, { emulateJSON: true }).then(function (res) {
alert(res.body.message);
}, function (res) {
console.log(res.status);
});
关于这几个版本的Ajax的实验测试和我的总结,可以查看我的关于Ajax的jQuery、Vue.js、原生js的各个版本的实现对比