前言: Vue的使用使前端程序员主要精力放在业务上，省去了大量dom的操作。身边的很多同事仍然使用JQuery的ajax发送请求，使用JQuery 也就仅仅使用了封装好的ajax，这样给页面的加载增加负担，JQuery的引入使页面的加载显的很笨重。前端发送请求的方式很多种，不一定要再页面上大量使用JQuery封装的ajax，有几种请求方式可以省去JQuery的引入进行ajax请求。下面我将进行一一介绍：
一.axios
首先需要知道：axios不是一种新的技术。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
使用
使用 npm:
$ npm install axios使用 bower:
$ bower install axios使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>get请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 上面的请求也可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});post请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
二.fetch
fetch是前端发展的一种新技术产物。
使用
不需要引入js，只要引入vue.js就可以，很方便
发送请求
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});post请求传参
fetch("http://127.0.0.1:8080/getUser",
{
method: 'POST',
headers: {
'Content-Type':'application/x-www-form-urlencoded'
},
body:"id=39"
})
.then(function(resp) {
console.log(resp);
return resp.json();
})
.then(data=>{
console.log(data)
that.obj=data
})
.catch(error=>{
console.log(error)
})三.ajax
用的比较广泛的一种异步请求方式
如果没有 jQuery，AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。
$.ajax({
//请求方式
type : "POST",
//请求的媒体类型
contentType: "json",
//请求地址
url : "http://127.0.0.1/admin/list/",
//数据，json字符串
data : {
},
//请求成功
success : function(result) {
console.log(result);
},
//请求失败，包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
});jQuery load()方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：
$(selector).load(URL,data,callback);$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
jQuery $.get() 方法
语法:
$.get(URL,callback);$("button").click(function(){
$.get(URL,function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});jQuery $.post() 方法
语法：
$.post(URL,data,callback);$("button").click(function(){
$.post(URL,
{
name:"参数",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
四.Vue.js Ajax(vue-resource)
vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件
提供了一般的 HTTP请求接口和RESTful架构请求接口，并且提供了全局方法和VUe组件实例方法。
使用
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>get 请求
this.$http.get('/try/ajax/ajax_info.txt').then(function(res){
document.write(res.body);
},function(){
console.log('请求失败处理');
});如果需要传递数据，可以使用 this.$http.get('get.php',{params : jsonData}) 格式，第二个参数 jsonData 就是传到后端的数据。
this.$http.get('get.php',{params : {a:1,b:2}}).then(function(res){
document.write(res.body);
},function(res){
console.log(res.status);
});post 请求
post 发送数据到后端，需要第三个参数 {emulateJSON:true}。
emulateJSON 的作用： 如果Web服务器无法处理编码为 application/json 的请求，你可以启用 emulateJSON 选项。
this.$http.post('/try/ajax/demo_test_post.php',
{name:"参数",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){
document.write(res.body);
},function(res){
console.log(res.status);
});
