Vuejs全家桶系列（二）--- Ajax请求

简介

vue与ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

ajax基本用法

vue本身不支持发送AJAX请求，需要使用jquery、vue-resource、axios等插件实现

1.自封装ajax

1.1 封装ajax

    function ajax(data){
        //第一步：创建xhr对象
        var xhr = null;
        if(window.XMLHttpRequest)
            xhr = new XMLHttpRequest();
        else
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        //第二步：准备发送前的一些配置参数
        xhr.open(data.type,data.url,true);
        //第三步：执行发送的动作
        if(data.type == 'get'){
            xhr.send(null);
        }else if(data.type == 'post'){
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(data.data);
        }
        //第四步：指定回调函数
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 ){
                if(xhr.status == 200)//执行成功
                    data.success(xhr.responseText);
                else
                    data.failure();
            }
        }
    }

1.2调用ajax

        ajax({
            url:'check.php',
            data:"username="+username.value+"&password="+password.value,
            type:'post',
            dataType:'json',
            success:function(data){
                info.innerHTML = data;
            },
            failure:function(){
                console.log("error!");
            }
        });

可以参考我的另一篇博客
初窥ajax（一） ——封装ajax

2.使用jquery

2.1 get请求

$.get("check.php",{
        name:'admin',
        age:'123'
    },function(data){
    console.log(data);
});

2.2 post请求

$.post("check2.php",{
    name:'admin',
    age:'123'
},function(data){
   console.log(data);
});

3.使用vue-resource

vue2.0不再对vue-resource进行更新和维护

3.1 基本用法

 this.$http.get(url, [options])
 this.$http.head(url, [options])
 this.$http.delete(url, [options])
 this.$http.jsonp(url, [options])
 this.$http.post(url, [body], [options])
 this.$http.put(url, [body], [options])
 this.$http.patch(url, [body], [options])

3.2get请求

this.$http.get('check.php',{
    params:{
        name:'admin',
        age:'123'
    }
})
.then((res) => {
    console.log(res);
}, (error) => {
  console.log(error);
});

3.3 post请求

this.$http.post('check2.php',{
    name:'admin',
    age:'123'
},{emulateJSON: true})
.then((res) => {
    console.log(res);
}, (error) => {
  console.log(error);
});

3.4 emulateJSON: true的作用

    如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。
    启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。

4. 使用axios

axios是vue2.0官方推荐的

4.1基本用法

axios([options])

4.11 axios.get(url[,options]);

传参方式：
        1.通过url传参
        2.通过params选项传参

4.12 axios.post(url,data,[options]);

axios默认发送数据时，数据格式是Request Payload，并非我们常用的Form Data格式，
所以参数必须要以键值对形式传递，不能以json形式传参

传参方式：
        1.自己拼接为键值对
        2.使用transformRequest，在请求发送前将请求数据进行转换
        3.如果使用模块化开发，可以使用qs模块进行转换

axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库

4.2 get请求

axios.get('check.php',{
    params:{
        name:'admin',
        age:'123'
    }
})
.then(res=>{
    console.log(res);
}).catch(error=>{
    console.log(error);
});

4.3 post请求

//方式一
axios.post('check2.php','name=admin&age=13')
.then(res=>{
    console.log(res);
}).catch(error=>{
    console.log(error);
});
//方式二
axios.post('check2.php',{
    name:'admin',
    age:'123'
},{
    transformRequest:[
        function(data){
            let params='';
            for(let index in data){
                params+=index+'='+data[index]+'&';
            }
            return params;
        }
    ]
})
.then(res=>{
    console.log(res);
}).catch(error=>{
    console.log(error);
});

这里不再讨论jsonp，关于jsonp的内容可以参考我的另一篇博客

初窥ajax（二） ——封装jsonp