AJAX相关知识点

什么是ajax？

简单的来说就是不重新加载整个页面的情况下，更新部分网页内容。全称是Asynchronous JavaScript And XML.
ajax的优缺点：
优点：1.无需刷新页面和服务器进行通信。
2.允许你根据用户事件来更新部分页面内容。
缺点：
1.没有浏览历史，不能回退。
2.存在跨域问题（同源）。
3.seo不友好。（搜索引擎优化受到影响，爬虫爬不到）
ajax写法

//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和url
xhr.open("GET",'http://127.0.0.1:8000/server');
//3.发送
xhr.send();
//4.事件绑定处理服务端返回结果
xhr.onreadystatechange = function(){
//判断
if(xhr.readyState === 4){
//判断响应状态码 200 404 403
//2xx成功
if(xhr.status >= 200 && xhr.status<300){
 //处理结果 行 头 空行 体
 //1.响应行
 console.log(xhr.status);
 console.log(xhr,statusText);//状态字符串
 console.log(xhr.getAllResponseHeaders());//所有响应头
 console.log(xhr.response);//响应体
 }else{
  }
 }
}

axios函数方法发送ajax请求

axios({
  method:'POST',
  url:'/axios-server',
  params:{
  
  },
  headers:{
  
  },
  data:{
  
  }
}).then(response=>{
//响应的状态码
console.log(response.status);
//响应状态字符串
console.log(response.statusText);
//响应头信息
console.log(response.headers);
//响应体
console.log(response.data);
})

fetch请求

fetch('http://127.0.0.1.8000',{
        metods:'post',
        headers:{
        name:''
        },
        body:'username=admin&password=admin'
}).then(response=>{
  return response.json();
}).then(response=>{
  console.log(response);
});

同源策略
同源：协议 域名 端口号 必须完全相同。

如何解决跨域？

1. jsonp ，前后端协作 ，axios不支持jsonp。
2. CORS 是通过设置一个响应头来告诉浏览器，请求允许跨域，浏览器收到改下供应以后就会对响应放行。设置响应头使用通配符（“Access-Control-Allow-Origin”,"*"）如下两张图。