Ajax笔记

1、原生Ajax发送请求

1. Get方法

   btn.onclick = function(){
       // 创建xhr对象
       const xhr = new XMLHttpRequest();
       // 发送请求
       xhr.open("GET", "http://localhost:5000/server");
       xhr.send();
       // 监听状态
       xhr.onreadystatechange = function(){
           // 判断状态, 4表示请求完成,3表示请求处理中,2表示请求已接收,1表示请求已发送
           if(xhr.readyState === 4){
               // 判断状态码
               if (xhr.status >= 200 && xhr.status < 300) {
                   console.log(xhr.responseText);
                  const result = document.getElementById("result");
                   result.innerHTML = xhr.responseText; 
               }
           }
       }
   }

2. Post方法

   btnpost.onclick = function(){
       // 创建xhr对象
       const xhr = new XMLHttpRequest();
       // 发送请求
       xhr.open("POST", "http://localhost:5000/server");
       // 设置请求头
       xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       xhr.send();
       // 监听状态
       xhr.onreadystatechange = function(){
           // 判断状态, 4表示请求完成,3表示请求处理中,2表示请求已接收,1表示请求已发送
           if(xhr.readyState === 4){
               // 判断状态码
               if (xhr.status >= 200 && xhr.status < 300) {
                   console.log(xhr.responseText);
                  const result = document.getElementById("result");
                   result.innerHTML = xhr.responseText; 
               }
           }
       }
   }

• xhr.status 获取状态码 (200表示请求成功, 404表示请求失败, 500表示服务器错误, 304表示请求资源未修改)
• 对于post需要添加请求头
• 可以在send()中配置传参

2、json类型的响应体数据

1. 服务端

   app.post('/server', (req, res) => {
       res.setHeader('Access-Control-Allow-Origin', '*')
       const data = {
           name: 'zhangshang',
           age: 18
       }
       // json转字符串发送
       let str = JSON.stringify(data)
       res.send(str);
   })

2. 前端

   • 手动转换

   let data = JSON.parse(xhr.response)

   • 自动转换

   // 设置响应体数据类型
   xhr.responseType = 'json'    

3、请求问题

1. 请求超时设置

   // 设置超时时间
   xhr.timeout = 2000;
   // 监听超时,超时后会自动终止请求,并触发ontimeout事件
   xhr.ontimeout = function(){
       alert("请求超时");
   }

2. 取消请求

   const btns document.querySelectorAll('button');
   let xhr =  null;
   btns[0].onclick function(){
       xhr = new XMLHttpRequest();
       xhr.open("GET",'http:/127.0.6.1:8888/de1ay');
       xhr.send();
   }
   // 取消请求
   btns[1].onclick function(){
       xhr.abort();
   }

​

4、axios发送请求

1. GET请求

   // 默认基础url
   axios.defaults.baseURL = 'http://localhost:5000';
   // 设置其他配置项
   const myconfig = {
           // url参数
           params:{
               name:'zhangsan',
               age:18
           },
           // 请求头
           headers:{
               'Content-Type':'application/json'
           },
       }
   btn[0].onclick = function () {
       axios.get('/server',myconfig)
       .then(res=>{
           console.log(res);
       }).catch(err=>{
           console.log(err);
       })
   }

   • then 后 编写请求成功执行的代码，catch 后编写请求失败执行的代码
   • 对于配置项,可传可不传

2. POST请求

   • post请求和get基本一致,但在传参时有差别

     // 默认基础url
     axios.defaults.baseURL = 'http://localhost:5000';
     // 设置其它配置项
     const mydata = {
             // url参数
             params:{
                 name:'zhangsan',
                 age:18
             },
             // 请求头
             headers:{
                 'Content-Type':'application/json'
             },
         }
     const data = {
         username:username,
         password:password
     }
     btn[0].onclick = function () {
         axios.get('/server',data,myconfig)
         .then(res=>{
             console.log(res);
         }).catch(err=>{
             console.log(err);
         })
     }

3. AXIOS请求

   axios(
       {
           method:'post',
           url:'/server',
           // url参数
           params:{
               name:'zhangsan',
               age:18
           },
           // 请求头
           headers:{
               'Content-Type':'application/json'
           },
           // 请求体
           data:{
               name:'zhangsan',
               age:18000
           }
       }
   ).then(res=>{
       console.log(res);
   }).catch(err=>{
       console.log(err);
   })

   • 在method中设置请求方式,默认请求方式是get

5、解决跨域

• 同源：协议、域名、端口号 必须完全相同。违背同源策略就是跨域

1. 第一种方法：jsonp

   使用script标签自带跨域能力进行数据传输(服务端将数据包装成js代码发送到用户端)

   使用

   • 动态的创建一个script标签

   var elm = document.createElement("script");

   • 设置script的src，设置回调函数

   elm.src = "http://127.0.0.1:5000/mystyle.js"

   • 添加到文档页面

   document.body.appendChild(elm);

2. 第二种方法：设置CORS解决跨域

   • 在服务端设置响应头

     app.post('/server', (req, res) => {
     res.setHeader('Access-Control-Allow-Origin', '*')
     })