一.原生AJAX

1 AJAX简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无需刷新获取数据。
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

1.2 XML简介

  • XML可扩展标记语言
  • XML被用来传输和储存数据
  • XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML中没有预定义标签 ```xml 比如说我有一个学生数据： name = “孙悟空” ; age = 18 ; gender = “男” ;

用 XML 表示：

孙悟空 18 男

用 JSON 表示： {“name”:”孙悟空”,”age”:18,”gender”:”男”}

  1. <a name="K7Xed"></a>
  2. ## 1.3 AJAX的特点
  3. <a name="OdDpo"></a>
  4. ### 1.3.1 AJAX的优点
  6. 1. 可以无需刷新页面而与服务器端进行通信。
  7. 1. 允许你根据用户事件来更新部分页面内容。
  8. <a name="JstLh"></a>
  9. ### 1.3.2 AJAX的缺点
  11. 1. 没有浏览历史，不能回退
  12. 1. 存在跨域问题(同源)
  13. 1.  SEO（搜索引擎优化）不友好
  15. ---
  17. <a name="5RY1w"></a>
  18. ## 1.4 AJAX的使用
  19. <a name="V5Ixn"></a>
  20. ### 1.4.1 核心对象
  21. XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。
  22. <a name="dvnXe"></a>
  23. ### 1.4.2 使用步骤
  24. ```javascript
  25.  //1. 创建对象
  26. const xhr = new XMLHttpRequest();
  27. //2.设置请求信息   请求方法和 url    
  28. xhr.open('GET', 'http://localhost:8000/server?a=100&b=200&c=300');
  29. //可以设置请求头，一般不设置
  30. xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  31. //3. 发送请求    get 请求不传 body 参数，只有 post 请求使用
  32. xhr.send();
  33. //4. 事件绑定 处理服务端返回的结果
  34. // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4   一般使用状态4作为判断
  35. /*0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
  36. 1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP 请求的头信息。
  37. 2: 表示 send()方法已经执行，并且头信息和状态码已经收到。
  38. 3: 表示正在接收服务器传来的 body 部分的数据。
  39. 4: 表示服务器数据已经完全接收，或者本次接收已经失败了*/
  41. xhr.onreadystatechange = function(){
  42.   //判断 (服务端返回了所有的结果)
  43.   if(xhr.readyState === 4){
  44.     //判断响应状态码 200  404  403 401 500
  45.     // 2xx 成功
  46.     if(xhr.status >= 200 && xhr.status < 300){
  47.       //处理结果  行 头 空行 体
  48.       //响应 
  49.       // console.log(xhr.status);//状态码
  50.       // console.log(xhr.statusText);//状态字符串
  51.       // console.log(xhr.getAllResponseHeaders());//所有响应头
  52.       // console.log(xhr.response);//响应体
  53.       //设置 result 的文本
  54.       result.innerHTML = xhr.response;
  55.     }
  56.   }
  57. }

JSON响应方式

  1.  const result = document.getElementById('result');
  2.         //绑定键盘按下事件
  3.         window.onkeydown = function(){
  4.             //发送请求
  5.             const xhr = new XMLHttpRequest();
  6.             //设置响应体数据的类型
  7.             xhr.responseType = 'json';  
  8.               //超时设置 2s 设置
  9.             xhr.timeout = 2000;
  10.             //初始化
  11.             xhr.open('GET','http://127.0.0.1:8000/json-server');
  12.             //发送
  13.             xhr.send();
  14.             //事件绑定
  15.             xhr.onreadystatechange = function(){
  16.                 if(xhr.readyState === 4){
  17.                     if(xhr.status >= 200 && xhr.status < 300){
  18.                         // console.log(xhr.response);
  19.                         // result.innerHTML = xhr.response;
  20.                         // 1. 手动对数据转化
  21.                         // let data = JSON.parse(xhr.response);
  22.                         // console.log(data);
  23.                         // result.innerHTML = data.name;
  24.                         // 2. 自动转换
  25.                         console.log(xhr.response);
  26.                         result.innerHTML = xhr.response.name;
  27.                     }
  28.                 }
  29.             }
  30.         }

超时与网络异常

  2. btn.addEventListener('click', function(){
  3.       const xhr = new XMLHttpRequest();
  4.       //超时设置 2s 设置
  5.       xhr.timeout = 2000;
  6.       //超时回调
  7.       xhr.ontimeout = function(){
  8.         alert("网络异常, 请稍后重试!!");
  9.       }
  10.       //网络异常回调
  11.       xhr.onerror = function(){
  12.         alert("你的网络似乎出了一些问题!");
  13.       }
  15.       xhr.open("GET",'http://127.0.0.1:8000/delay');
  16.       xhr.send();
  17.       xhr.onreadystatechange = function(){
  18.         if(xhr.readyState === 4){
  19.           if(xhr.status >= 200 && xhr.status< 300){
  20.             result.innerHTML = xhr.response;
  21.           }
  22.         }
  23.       }
  24.  })
  26. //后端代码 node
  27. //延时响应
  28. app.all('/delay', (request, response) => {
  29.     //设置响应头  设置允许跨域
  30.     response.setHeader('Access-Control-Allow-Origin', '*');
  31.     response.setHeader('Access-Control-Allow-Headers', '*');
  32.     setTimeout(() => {
  33.         //设置响应体
  34.         response.send('延时响应');
  35.     }, 1000)
  36. });

取消重复请求

  1.                  //获取元素对象
  2.         const btns = document.querySelectorAll('button');
  3.         let x = null;
  4.         //标识变量
  5.         let isSending = false; // 是否正在发送AJAX请求
  7.         btns[0].onclick = function(){
  8.             //判断标识变量
  9.             if(isSending) x.abort();   // 如果正在发送, 则取消该请求, 创建一个新的请求
  10.             x = new XMLHttpRequest();
  11.             //修改 标识变量的值
  12.             isSending = true;
  13.             x.open("GET",'http://127.0.0.1:8000/delay');
  14.             x.send();
  15.             x.onreadystatechange = function(){
  16.                 if(x.readyState === 4){
  17.                     //修改标识变量
  18.                     isSending = false;
  19.                 }
  20.             }
  21.         }
  23.         // abort
  24.         btns[1].onclick = function(){
  25.               //取消请求
  26.             x.abort();
  27.         }

1.4.3 解决 IE 缓存问题

  • 问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
  • 解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址即可避免缓存问题
    1. //设置请求信息
    2. xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());

二.jQuery-AJAX

  1.  $('button').eq(0).click(function(){
  2.             $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
  3.                 console.log(data);
  4.             },'json');
  5.         });
  7.         $('button').eq(1).click(function(){
  8.             $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
  9.                 console.log(data);
  10.             });
  11.         });
  13.         $('button').eq(2).click(function(){
  14.             $.ajax({
  15.                 //url
  16.                 url: 'http://127.0.0.1:8000/jquery-server',
  17.                 //参数
  18.                 data: {a:100, b:200},
  19.                 //请求类型
  20.                 type: 'GET',
  21.                 //响应体结果
  22.                 dataType: 'json',
  23.                 //成功的回调
  24.                 success: function(data){
  25.                     console.log(data);
  26.                 },
  27.                 //超时时间
  28.                 timeout: 2000,
  29.                 //失败的回调
  30.                 error: function(){
  31.                     console.log('出错啦!!');
  32.                 },
  33.                 //头信息
  34.                 headers: {
  35.                     c:300,
  36.                     d:400
  37.                 }
  38.             });
  39.         });

三.axios-AJAX

文档地址 https://github.com/axios/axios

  1.        const btns = document.querySelectorAll('button');
  2.         //配置 baseURL
  3.         axios.defaults.baseURL = 'http://localhost:8083';
  4.         btns[0].onclick = function () {
  5.             //GET 请求
  6.             axios.get('/axios-server', {
  7.                 //url 参数
  8.                 params: {
  9.                     id: 100,
  10.                     vip: 7
  11.                 },
  12.                 //请求头信息
  13.                 headers: {
  14.                     name: 'atguigu',
  15.                     age: 20
  16.                 }
  17.             }).then(value => {
  18.                 console.log(value);//返回promise对象 
  19.             });
  20.         }
  22.                 //post发送方式 第二个参数请求体
  23.         btns[1].onclick = function () {
  24.             axios.post('/axios-server', {
  25.                 username: 'admin',
  26.                 password: 'admin'
  27.             }, {
  28.                 //url 
  29.                 params: {
  30.                     id: 200,
  31.                     vip: 9
  32.                 },
  33.                 //请求头参数
  34.                 headers: {
  35.                     height: 180,
  36.                     weight: 180,
  37.                 }
  38.             });
  39.         }
  41.         btns[2].onclick = function(){
  42.             axios({
  43.                 //请求方法
  44.                 method : 'POST',
  45.                 //url
  46.                 url: '/axios-server',
  47.                 //url参数
  48.                 params: {
  49.                     vip:10,
  50.                     level:30
  51.                 },
  52.                 //头信息
  53.                 headers: {
  54.                     a:100,
  55.                     b:200
  56.                 },
  57.                 //请求体参数
  58.                 data: {
  59.                     username: 'admin',
  60.                     password: 'admin'
  61.                 }
  62.             }).then(response=>{
  63.                 //响应状态码
  64.                 console.log(response.status);
  65.                 //响应状态字符串
  66.                 console.log(response.statusText);
  67.                 //响应头信息
  68.                 console.log(response.headers);
  69.                 //响应体
  70.                 console.log(response.data);
  71.             })
  72.         }

四. fetch-AJAX

文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch

  1.        const btn = document.querySelector('button');
  3.         btn.onclick = function(){
  4.             fetch('http://localhost:8000/fetch-server?id=1', {
  5.                 //请求方法
  6.                 method: 'POST',
  7.                 //请求头
  8.                 headers: {
  9.                     name:'atguigu'
  10.                 },
  11.                 //请求体
  12.                 body: 'username=admin&password=admin'
  13.             }).then(response => {
  14.                 // return response.text();
  15.                 return response.json();
  16.             }).then(response=>{
  17.                 console.log(response);
  18.             });
  19.         }

五.跨域

5.1同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。
同源： 协议、域名、端口号 必须完全相同。
违背同源策略就是跨域。
前端页面代码：

  1.   const btn = document.querySelector('button');
  3.         btn.onclick = function(){
  4.             const x = new XMLHttpRequest();
  5.             //这里因为是满足同源策略的, 所以 url 可以简写
  6.             x.open("GET",'/data');
  7.             //发送
  8.             x.send();
  9.             //
  10.             x.onreadystatechange = function(){
  11.                 if(x.readyState === 4){
  12.                     if(x.status >= 200 && x.status < 300){
  13.                          console.log(x.response);
  14.                     }
  15.                 }
  16.             }
  17.         }

服务代码：

  1. const express = require('express');
  2. const app = express();
  4. app.get('/home', (request, response)=>{
  5.     //响应一个页面
  6.     response.sendFile(__dirname + '/index.html');
  7. });
  8. app.get('/data', (request, response)=>{
  9.     response.send('用户数据');
  10. });
  11. app.listen(9000, ()=>{
  12.     console.log("服务已经启动...");
  13. });

5.2 JSONP

5.2.1 JSONP 是什么

JSONP 是什么 JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明 才智开发出来，只支持 get 请求。

5.2.2 JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。
JSONP 就是利用 script 标签的跨域能力来发送请求的。

5.2.3 JSONP 的使用

其实就是服务端返回一个函数 ，前端浏览器解析这个函数并且提前定义了

  1.  //1. 创建 script 标签
  2.     const script = document.createElement('script');
  3. //2. 设置标签的 src 属性
  4.     script.src = 'http://127.0.0.1:8000/check-username';
  5. //3. 将 script 插入到文档中
  6.     document.body.appendChild(script);
  7. 4.服务器中路由的处理
  8. app.all('/check-username',(request, response) => {
  9.     // response.send('console.log("hello jsonp")');
  10.     const data = {
  11.         exist: 1,
  12.         msg: '用户名已经存在'
  13.     };
  14.     //将数据转化为字符串
  15.     let str = JSON.stringify(data);
  16.     //返回结果
  17.     response.end(`handle(${str})`);
  18. });

5.3 CORS

5.3.1 CORS 介绍

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

5.3.2 CORS 怎么工作的？

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

5.3.3 CORS 的使用主要是服务器端的设置：

  1. //设置响应头
  2. response.setHeader("Access-Control-Allow-Origin", "*");
  3. response.setHeader("Access-Control-Allow-Headers", '*');
  4. response.setHeader("Access-Control-Allow-Method", '*');
  5. // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");  指定请求源