Ajax使用

一.原生js中使用

//1.创建一个XMLHttpRequest类型的对象
var xhr = new XMLHttpRequest()
//2.确定对象发送方式、协议方法，打开连接
//open()方法第三个参数要求传入的是bool值，能设置请求是否异步执行，默认true，传false同步执行，同步方式执行要先注册事件再调用send，否则readystatechange无法触发
xhr.open('GET', './login.php')
//3.通过连接发送一次请求
xhr.send(null)
//4.响应，判断状态码，指定xhr状态变化事件处理函数
xhr.onreadystatechange = function () {
//通过xhr的readyState判断此次请求的响应是否接收完成
    if (this.readyState === 4) {
    //通过xhr的responseText获取到响应的响应体
    console.log(this)
    }
}

二.jquery中使用

$.ajax({
    url: './login.php',//请求地址
    type: 'post',//请求方法
    dataType: 'json',//服务端响应数据类型
    data: { id: 1 },//需要传递到服务端的数据
    beforeSend: function () {//请求发起之前触发
        console.log('before')
    },
    success: function (data) {//请求成功之后触发
        console.log(data)
    },
    error: function (err) {//请求失败触发
        console.log(err)
    },
    complete: function () {//请求完成触发
        console.log('completed')
    }
})

还有$.get和$.post方法不用写type，方便快捷。

三.Axios

• 在vue中可以使用vue-resource，但官方不再维护vue-resource，推荐使用axios

  • <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

  • npm install vue-resource --save

//在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
//基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
//get例子
this.$http.get("/xxx/xxx.php",{
    params:{
        userId:"101"
    },
    headers:{
        token:"abcd"
    }
}).then(res=>{
        this.msg=res.data;
   },error=>{
        this.msg=error;
   }
});
//post例子
this.$http.post("/xxx/xxx.php",{userId:"102"},{
    headers:{
        access_token:"abc"
    }
}).then(function(res){
    this.msg=res.data;
});

• axios在vue/react等都可以用，axios引入或安装

  • <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  • npm install axios --save

//http例子
axios({
  url:"/user",
  method:"get",//"post"
  data:{userId:"101"},//Post
  params:{userId:"101"},//Get
  headers:{token:"http-test"}
}).then(res=>{this.msg=res.data;})
//get例子
axios.get('/user', {
    params: {
        ID: 123//也可以直接在URL上添加参数/user?ID=123
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
//post例子
axios.post('/user', {
    firstName: 'Fred', //参数firstName
    lastName: 'Flintstone' //参数lastName
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});