1. Distinguish between ajax and general http request
First of all, we need to take a look at xhr . When you enter the first sentence of the page, you can use the XMLHttpRequest (XHR) object to interact with the server. You can get data from the URL without having to refresh the entire page. This allows the web page to update the partial content of the page without affecting the user's operation .
After using axios, we all know that we see the page after the request is not like the situation that we click to refresh ourselves. He will automatically update the data that needs to be updated and echo it to the page. The bottom layer is xhr.
(1) Ajax request is a special http request
(2) For the server, there is no difference, the difference is on the browser side
(3) The browser receives the response
1) General request: The browser generally displays the response body data, also It is what we often call refreshing and jumping pages
2) Ajax request: The browser will not perform any operation on the interface, just call the listener callback function and pass in response data.
2.XHR package simple ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="Get()">发送get请求</button>
<button onclick="Post()">发送post请求</button>
<button onclick="Delete()">发送delete请求</button>
<button onclick="Put()">发送put请求</button>
</body>
<script>
//查看network
function Get(){
axios({
url:'xxx',
method: 'GET',
params:{
id:1,
hello:'xxx'
}
})
}
function Post(){
axios({
url:'xxx',
method:'POST',
data:{
name:'张明',
sex:'男'
}
})
}
//我们封装的函数需要具有以下几个特点（为什么要具有以下特点：我们需要实现一个axios的简单封装）
// 1.函数的返回值为一个promise，成功的时候返回response，失败的时候返回error
// 2.能够处理多种请求方式
// 3.函数的参数为一个配置对象
// {
// url:'',//请求地址
// method:'',//请求方式
// params:{},//get和delete携带的query参数
// data:{}//post和delete传参
// }
//4.响应json文件自动解析成js的对象或者数组
function axios({
url,//请求地址
method='GET',//请求方式默认为get 当我们使用axios的时候如果我们不写method他会默认传递GET
params={
},//get和delete携带的query参数 默认空对象
data={
}//post和delete传参 默认空对象
}){
//返回一个promise对象
return new Promise((resolve, reject)=>{
//将method转大写
method = method.toUpperCase();
//处理query参数拼接到url
let queryString = '';
Object.keys(params).forEach(key => {
queryString += `${
key}=${
params[key]}&`
});
//判断queryString最后的&
if(queryString){
queryString = queryString.substring(0,queryString.length-1)
//拼接到url
//说明本url指的是没有其他参数的url 如果已经拼接过不能用这种方法
url += '?'+queryString
}
//执行异步请求
//(1)创建XHR对象
const request = new XMLHttpRequest();
//(2)创建连接(初始化请求)
request.open(method,url)
//(3)发送请求
if(method == 'GET' || method == 'DELETE'){
request.send()
}else if(method == 'POST' || method == 'PUT'){
//告诉服务器请求体的格式是json
request.setRequestHeader('Content-Type','application/json;charset=utf-8');
request.send(JSON.stringify(data));
}
//绑定状态改变的监听
//说明为什么监听函数可以绑定在send后面(因为send()请求是异步的，不是同步的，所以不影响监听)
request.onreadystatechange = function(){
//如果请求没有完成，直接结束
if(request.readyState !== 4){
return;
}
//响应状态码[200,299]代表成功
const {
status, statusText} = request;
//如果请求成功调用resolve()
if(status>=200 && status<=299){
const response={
data:JSON.parse(request.response),
status,
statusText
}
resolve(response);
}else{
reject(new Error('request error status is'+status))
}
//如果请求失败调用reject()
}
})
}
</script>
</html>