文章目录

• • AJAX
  • • 1. AJAX简介
    • • AJAX特点
      • 2. XML简介
      • 3. AJAX发送get请求
      • 4. post请求设置体参数
      • 5. 设置请求头信息
      • 6. AJAX请求服务端响应json数据
      • 7. ie缓存问题
      • 8. 请求超时问题和网络异常
      • 9. 取消请求
      • 10. 请求重复取消
      • 11. jQuery中的AJAX请求
      • 12. axios函数发送AJAX
      • 使用fetch函数发送AJAX请求
      • 跨域
      • • 1. 同源策略
        • 2. 如何解决跨域：
        • 2.1 JSONP
        • • JSONP 怎么工作的？
          • JSONP的使用
          • 2.2 jquery完成jsonp请求案例
          • 2.3 CORS
          • • CORS怎么工作的？
            • CORS 的使用

              AJAX

              1. AJAX简介

              Ajax全称为Asynchronous Javascript And XML，即异步JS和XML

              AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

              通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据，先展示页面，需要时获取数据

              AJAX特点

              优点：

              可以无刷新页面与服务端进行通信

              允许你根据用户事件来更新部分页面内容

              缺点：

              没有浏览历史，不能回退

              存在跨域问题（同源）

              SEO不友好（爬虫获取不到信息）

              2. XML简介

              XML：可扩展标记语言，被设计用来传输和存储数据

              XML和HTML类似，不同点：HTML中都是预定义标签，XML中没有预定义标签，全是自定义标签，用来表示一些数据

              现在已被JSON取代

              3. AJAX发送get请求

                
              
              
                  发送请求
                  
              
                  
              
              
              

              4. post请求设置体参数

              在send中设置

              xhr.open('POST','http://127.0.0.1:3000/server');
              // 3.发送
              xhr.send('a=100&b=200&c=300');
              xhr.send('a:100&b:200&c:300');
              

              5. 设置请求头信息

              在open后面设置

              一般把身份校验的信息放在这里传递给服务器，由服务器对参数提取，校验用户身份

              xhr.open('POST','http://127.0.0.1:3000/server');
              // 设置请求头
              xhr.setRequestHeader('','');
              

              6. AJAX请求服务端响应json数据

                          // 设置响应体数据类型
                          xhr.responseType='json';
                 result.innerHTML= xhr.response.name;
              

              7. ie缓存问题

              IE浏览器会对ajax结果缓存，下一次发送请求时会直接走本地缓存返回的不是浏览器的最新数据

              解决：获取当前的时间戳

              xhr.open('GET','http://127.0.0.1:3000/ie?t='+Date.now());
              

              8. 请求超时问题和网络异常

                      const xhr=new XMLHttpRequest();
                      // 请求超过两秒就取消
                      xhr.timeout=2000;
                      // 超时回调
                      xhr.ontimeout=function(){
                          alert('网络异常，请稍后再试');
                      };
                      // 网络异常回调
                      xhr.onerror=function(){
                         alert('您的网络似乎出了些问题，请稍后再试')
                      };
                      xhr.open('GET','http://127.0.0.1:3000/delay');
                      xhr.send();
              

              9. 取消请求

              调用abort方法

              点击发送请求
                  点击取消
                  
              

              10. 请求重复取消

              	const btn=document.querySelector('button');
                      let x=null;
                      // 标识变量，判断是否正在发送请求
                      let isSending=false;
                      btn.onclick=function(){
                          // 判断
                          if(isSending) x.abort();//如果正在发送请求，取消上一次
                          x=new XMLHttpRequest();
                          isSending=true;
                          x.open('GET','http://127.0.0.1:3000/delay');
                          x.send();
                          x.onreadystatechange=function(){
                              if(x.readyState===4){
                                  isSending=false;
                              }
                          }
                      }
              

              11. jQuery中的AJAX请求

              $.get(url, [data], [callback], [type])
              url: 请求的URL地址
              data: 请求携带的参数
              callbac: 载入成功时回调函数
              type：设置返回内容格式，xml、html、script、json、text、_default
              

              GET
                  POST
                  通用型方法ajax
                  
              

              12. axios函数发送AJAX

              axios是ajax的工具库

              GET
              POST
              ajax
              
              
              
                  点击发送请求
                  
              
                  
              app.all('/jquery-jsonp',(req,res)=>{
                  res.setHeader('Access-Control-Allow-Origin','*')
                  const data={
                      name:'尚硅谷',
                      city:['北京','上海','深圳'],
                  };
                  let str=JSON.stringify(data);
                  let cb=req.query.callback;// jquery内置一个处理json数据的函数，在服务端调用该函数就不用再特地写出函数名
                  res.end(`${cb}(${str})`);
              })
              

              2.3 CORS

              推荐阅读：

              http://www.ruanyifeng.com/blog/2016/04/cors.html

              https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

              CORS (Cross-Origin Resource Sharing), 跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 等请求。跨域资源共享标准新增了一组 HTTP 首部字段（响应头），允许服务器声明哪些源站通过浏览器有权限访问哪些资源

              CORS怎么工作的？

              CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

              CORS 的使用

              主要是服务端的设置：

              rounter.get(“/testAJAX”,function(req, res){

              })