Ajax使用

2019-03-28

一.原生js中使用

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

二.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);
});