ajax、axios、fetch的代码整合

已于 2022-12-10 23:42:40 修改
阅读量70 收藏
点赞数
分类专栏： Ajax 文章标签： ajax 前端 javascript
于 2022-12-10 23:35:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53388056/article/details/128270637
版权

笔记详情跳转：https://xinze.123.com

express框架

express基本使用

//1、引入express
const express = require("express");

//2、创建应用对象
const app = express();

//3、创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get("/", (request, respone) => {
  //设置响应
  respone.send("Hello Express");
});

//4、监听端口启动服务
app.listen(3000, () => {
  console.log("服务器已经启动，3000 端口监听中....");
});

原生Ajax

GET

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>get</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 10px pink;
      }
    </style>
  </head>
  <body>
    <button>点我发送请求</button>
    <div id="result"></div>

    <script>
      //获取button元素
      const bth = document.getElementsByTagName("button")[0];
      const result = document.getElementById("result");
      //绑定事件
      bth.onclick = function () {
        /* XMLHttpRequest()是一个JavaScript函数，
        用于在浏览器和Web服务器之间发送HTTP请求。
        它可以让开发人员从浏览器脚本中向服务器发送请求，
        然后处理服务器的响应。这对于实现Ajax应用非常有用，
        因为它允许浏览器在不刷新页面的情况下与服务器通信。 */

        //1、创建对象
        const xhr = new XMLHttpRequest();

        //2.初始化 设置请求方法和 url
        //open:设置请求 两个参数 第一个请求类型 第二个 请求地址
        xhr.open("GET", "http://localhost:8000/server?a=11&b=22");

        //3.发送请求
        xhr.send();

        /*  onreadystatechange事件:
            on when 当...时候
            readystate 是xhr 对象中的属性,表示状态  0 1 2 3 4
                0: XMLHttpRequest对象创建完成。——还没有调用open()方法 初始化值
                1: XMLHttpRequest对象初始化完成。——open()方法调用完毕 已调用send()方法,正在发送请求
                2: 请求已经发送——send()方法完成,已经收到全部响应 内容
                3: 服务器返回了数据（但是还没有被解析，可能只一段http报文）——正在解析响应内容(服务端返回了结果)
                4: 数据解析完成——响应内容解析完成,可以在客户端调用了
            change  改变时触发
        */
        //4.事件绑定 处理服务端
        xhr.onreadystatechange = function () {
          //判断(服务端返回了所有的结果)
          if (xhr.readyState === 4) {
            //判断响应状态码  200 404 403 401 500
            //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); //响应体

              //设置result的文本
              result.innerHTML = xhr.response;
            }
          }
        };
      };
    </script>
  </body>
</html>

POST

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>POST</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 10px pink;
      }
    </style>
  </head>
  <body>
    <div id="result"></div>

    <script>
      //获取result元素
      const result = document.getElementById("result");
      //绑定事件
      /* 
          addEventListener("mouseover") 是一个 JavaScript 函数，
          它能让开发者为 HTML 元素添加鼠标悬停（也称为“鼠标移入”）事件监听器。
          这意味着当鼠标指针移动到该元素上方时，会触发指定的 JavaScript 代码。
          该函数接受两个参数：event：鼠标悬停事件的名称。在这个例子中，它是 "mouseover":鼠标进入该元素
        */
      result.addEventListener("mouseover", function () {
        //1、创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化 设置请求方法和 url
        xhr.open("POST", "http://localhost:8000/server");
        //设置请求头
        xhr.setRequestHeader(
          "Content-Type",
          "application/x-www-form-urlencoded"
        );
        //设置自定义请求头  会多一个OPTIONS 请求 响应那边就需要修改接受类型了
        xhr.setRequestHeader("name", "xizne");
        //3.发送请求  POST发送参数是在 send中发送的
        //xhr.send("name=xinze&age=19");
        xhr.send("name:xinze&age:19");
        //事件绑定
        xhr.onreadystatechange = function () {
          //判断(服务端返回了所有的结果)
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              //处理服务端返回的结果
              result.innerHTML = xhr.response;
            }
          }
        };
      });
    </script>
  </body>
</html>

JSON

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSON</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 10px pink;
      }
    </style>
  </head>
  <body>
    <div id="result"></div>

    <script>
      //获取result元素
      const result = document.getElementById("result");
      //绑定事件
      window.onkeydown = function () {
        //1、创建对象
        const xhr = new XMLHttpRequest();
        //设置响应体数据的类型
        xhr.responseType = "json";
        //2.初始化 设置请求方法和 url
        xhr.open("POST", "http://localhost:8000/Json-server");
        //设置请求头
        xhr.setRequestHeader(
          "Content-Type",
          "application/x-www-form-urlencoded"
        );
        //3.发送请求  POST发送参数是在 send中发送的
        xhr.send("name:xinze&age:19");
        //事件绑定
        xhr.onreadystatechange = function () {
          //判断(服务端返回了所有的结果)
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              //处理服务端返回的结果
              //手动对数据转化
              /* let data = JSON.parse(xhr.response);
              result.innerHTML = data.name + data.age + data.sex; */
              //自动转换
              result.innerHTML =
                xhr.response.name + xhr.response.age + xhr.response.sex;
            }
          }
        };
      };
    </script>
  </body>
</html>

IE缓存问题解决

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>解决IE缓存</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 10px pink;
      }
    </style>
  </head>
  <body>
    <div id="result"></div>

    <script>
      //获取result元素
      const result = document.getElementById("result");
      //绑定事件
      window.onkeydown = function () {
        //1、创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化 设置请求方法和 url   在末尾加上当前时间戳就可以解决
        xhr.open("GET", "http://localhost:8000/ie-server?t=" + Date.now());
        //3.发送请求  POST发送参数是在 send中发送的
        xhr.send("name:xinze&age:19");
        //事件绑定
        xhr.onreadystatechange = function () {
          //判断(服务端返回了所有的结果)
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              result.innerHTML = xhr.response;
            }
          }
        };
      };
    </script>
  </body>
</html>

超时与网络异常

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>超时与网络异常</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 10px pink;
      }
    </style>
  </head>
  <body>
    <button>点我发送请求</button>
    <div id="result"></div>
    <script>
      const bth = document.getElementsByTagName("button")[0];
      const result = document.getElementById("result");
      bth.onclick = function () {
        const xhr = new XMLHttpRequest();
        //超时设置 2s 设置  2s后没响应取消请求
        xhr.timeout = 2000;
        //超时回调
        xhr.ontimeout = function () {
          alert("请求超时,请稍后重试!!");
        };
        //网络异常回调
        xhr.onerror = function () {
          alert("你的网络似乎出了些问题!");
        };
        xhr.open("GET", "http://localhost:8000/delay");
        xhr.send();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              result.innerHTML = xhr.response;
            }
          }
        };
      };
    </script>
  </body>
</html>

取消请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>取消请求</title>
  </head>
  <body>
    <button>点击发送</button>
    <button>点击取消</button>
  </body>
  <script>
    const bth1 = document.getElementsByTagName("button")[0];
    const bth2 = document.getElementsByTagName("button")[1];
    const xhr = new XMLHttpRequest();
    bth1.onclick = function () {
      xhr.open("GET", "http://localhost:8000/delay");
      xhr.send();
    };
    bth2.onclick = function () {
      xhr.abort(); //取消请求
    };
  </script>
</html>

重复请求问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>重复请求问题</title>
  </head>
  <body>
    <button>点击发送</button>
    <button>点击取消</button>
  </body>
  <script>
    //获取元素对象
    const bth1 = document.getElementsByTagName("button")[0];
    const bth2 = document.getElementsByTagName("button")[1];
    const xhr = new XMLHttpRequest();
    //标识变量
    let flag = false;
    bth1.onclick = function () {
      //判断 如果正在发送,则取消该请求,创建一个新的
      if (flag) xhr.abort;
      //修改标识
      flag = true;
      xhr.open("GET", "http://localhost:8000/delay");
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          //修改标识符
          flag = false;
        }
      };
    };
    bth2.onclick = function () {
      xhr.abort(); //取消请求
    };
  </script>
</html>

server.js

//1、引入express
const express = require("express");

//2、创建应用对象
const app = express();

//3、创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//GET
app.get("/server", (request, response) => {
  //设置响应头 设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  //设置响应体
  response.send("Hello Ajax");
});

//POST
//app.post("/server", (request, response) => {
//all可以接收任意类型的请求
app.all("/server", (request, response) => {
  //设置响应头 设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  //响应头
  response.setHeader("Access-Control-Allow-Headers", "*");
  //设置响应体
  response.send("Hello Ajax POST");
});

//JSON
app.all("/Json-server", (request, response) => {
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Headers", "*");
  //设置响应数据
  const data = {
    name: "xinze",
    age: 20,
    sex: "男",
  };
  response.send(data);
});

//解决IE缓存
app.all("/ie-server", (request, response) => {
  response.setHeader("Access-Control-Allow-Origin", "*");
  //设置响应数据
  response.send("HELLO IE -5");
});

//延时响应
app.all("/delay", (request, response) => {
  response.setHeader("Access-Control-Allow-Origin", "*");
  //设置响应数据
  setTimeout(() => {
    response.send("HELLO IE -5");
  }, 3000);
});

//4、监听端口启动服务
app.listen(8000, () => {
  console.log("服务器已经启动,8000 端口监听中....");
  console.log("服务器已经启动,请求地址：http://localhost:8000/server");
});

jQuery发送Ajax请求

client.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <title>jQuery 发送 Ajax</title>
    <style>
      div {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div>jQuery发送Ajax请求</div>
    <div><button>GET</button></div>
    <div><button>POST</button></div>
    <div><button>通用方法ajax</button></div>
  </body>
  <script>
    $("button")
      .eq(0)
      .click(function () {
        $.get(
          "http://localhost:8000/jquery-server",
          { name: "xinze" },
          function (data) {
            console.log(data);
          },
          "json"
        );
      });

    $("button")
      .eq(1)
      .click(function () {
        $.post(
          "http://localhost:8000/jquery-server",
          { name: "xinze" },
          function (data) {
            console.log(data);
          }
        );
      });
    $("button")
      .eq(2)
      .click(function () {
        $.ajax({
          //url
          url: "http://localhost:8000/jquery-server",
          //参数
          data: { name: "xinze", age: 19 },
          //请求类型
          type: "GET",
          //返回类型
          dataType: "json",
          //成功的回调  声明可参数接收回调传过来的值
          success: function (data) {
            console.log(data);
          },
          //超时时间
          timeout: 3000,
          //失败的回调
          error: function () {
            console.log("出错了");
          },
          //头信息
          headers: {
            name: "xinze",
            age: 18,
          },
        });
      });
  </script>
</html>

server.js

//1、引入express
const express = require("express");

//2、创建应用对象
const app = express();

app.all("/jquery", (request, response) => {
  //设置响应头,设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Headers", "*");
  setTimeout(() => {
    const data = { name: "xinze", age: 19 };
    response.send(data);
  }, 1000);
});

//3、创建路由规则
//jQuery
app.get("/jquery-server", (request, response) => {
  response.setHeader("Access-Control-Allow-Origin", "*");
  const data = { name: "xinze", age: 19 };
  response.send(JSON.stringify(data));
  //response.send(data);
});
//post
app.post("/jquery-server", (request, response) => {
  //设置响应头,设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  const data = { name: "xinze", age: 19 };
  response.send(JSON.stringify(data));
});

//4、监听端口启动服务
app.listen(8000, () => {
  console.log("服务器已经启动,8000 端口监听中....");
  console.log("服务器已经启动,请求地址：http://localhost:8000/server");
});

axios发送Ajax请求

axios.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.js"></script>
    <title>axios 发送 Ajax</title>
    <style>
      div {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div>axios 发送 Ajax请求</div>
    <div><button>GET</button></div>
    <div><button>POST</button></div>
    <div><button>通用方法ajax</button></div>
  </body>
  <script>
    const btns = document.querySelectorAll("button");
    //配置 baseURL
    axios.defaults.baseURL = "http://localhost:8000";
    btns[0].onclick = function () {
      //get请求
      axios
        .get("/axios-get", {
          //url参数
          params: {
            id: 100,
            vip: 7,
          },
          //请求头信息
          headers: {
            name: "xinze ",
            age: 19,
          },
        })
        .then((value) => {
          console.log(value);
        });
    };

    btns[1].onclick = function () {
      //post请求 这里要注意跟get不一样 第二个参数是请求体
      axios
        .post(
          "/axios-post",
          {
            name: "xinze",
            age: 19,
          },
          {
            //请求头信息
            headers: {
              name: "xinze ",
              age: 19,
            },
          }
        )
        .then((value) => {
          console.log(value);
        });
    };
    btns[2].onclick = function () {
      axios({
        //请求方法
        method: "POST",
        //url
        url: "/axios",
        //url参数
        params: {
          vip: 10,
          level: 30,
        },
        //头信息
        headers: {
          a: 100,
          b: 200,
        },
        //请求参数
        data: {
          name: "xinze",
          sex: "男",
        },
      }).then((response) => {
        //响应状态码
        console.log(response.status);
        //响应状态字符串
        console.log(response.statusText);
        //响应头信息
        console.log(response.headers);
        //响应体
        console.log(response.data);
      });
    };
  </script>
</html>

server.js

//1、引入express
const express = require("express");

//2、创建应用对象
const app = express();
//3、创建路由规则
//axios
//如果定义了请求头就要 用all
app.all("/axios-get", (request, response) => {
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Headers", "*");
  const data = { type: "GET", name: "xinze", age: 19 };
  response.send(data);
  //respone.send(data);
});
//post
app.all("/axios-post", (request, response) => {
  //设置响应头,设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Headers", "*");
  const data = { type: "POST", name: "xinze", age: 19 };
  response.send(data);
});
app.all("/axios", (request, response) => {
  //设置响应头,设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Headers", "*");
  const data = { type: "all", name: "xinze", age: 19 };
  response.send(data);
});

//4、监听端口启动服务
app.listen(8000, () => {
  console.log("服务器已经启动,8000 端口监听中....");
  console.log("服务器已经启动,请求地址：http://localhost:8000/server");
});

fetch发送Ajax请求

fetch.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fetch 发送 Ajax</title>
    <style>
      div {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <button>fetch方法ajax</button>
  </body>
  <script>
    const btn = document.getElementsByTagName("button")[0];
    btn.onclick = function () {
      fetch("http://localhost:8000/fetch?vip=10", {
        //请求方法
        method: "POST",
        //请求头
        headers: {
          name: "xinze",
        },
        //请求体
        body: "sssssssssss",
      })
        .then((response) => {
          return response.json();
        })
        .then((response) => {
          console.log(response);
        });
    };
  </script>
</html>

server.js

//1、引入express
const express = require("express");

//2、创建应用对象
const app = express();
//3、创建路由规则
//fetch
app.all("/fetch", (request, response) => {
  //设置响应头,设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Headers", "*");
  const data = { type: "all", name: "xinze", age: 19 };
  response.send(data);
});

//4、监听端口启动服务
app.listen(8000, () => {
  console.log("服务器已经启动,8000 端口监听中....");
  console.log("服务器已经启动,请求地址：http://localhost:8000/server");
});

跨域

同源策略

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>同源策略</title>
  </head>
  <body>
    <h2>xinze</h2>
    <button>点我获取用户数据</button>
  </body>
  <script>
    const bth = document.getElementsByTagName("button")[0];
    const xhr = new XMLHttpRequest();
    bth.onclick = function () {
      //这里因为是满足同源策略的,所以 url 可以简写
      xhr.open("GET", "/data");
      //发送
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            console.log(xhr.response);
          }
        }
      };
    };
  </script>
</html>

JSONP原理

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>原理</title>
  </head>
  <body>
    <div id="result"></div>
    <script>
      //处理数据
      function handle(data) {
        //获取result元素
        const result = document.getElementById("result");
        result.innerHTML = data.name;
      }
    </script>
    <!-- js标签也能实现跨域 不过返回来的值必须是个 js表达式 -->
    <script src="http://localhost:520/jsonp-server"></script>
  </body>
</html>

JSONP实践

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsonp实践</title>
  </head>
  <body>
    <input type="text" id="username" />
    <p></p>
    <script>
      //获取元素
      const input = document.querySelector("input");
      const p = document.querySelector("p");
      //处理数据
      function handle(data) {
        input.style.border = "solid 1px #f00";
        p.innerHTML = data.msg;
      }
      //绑定事件
      input.onblur = function () {
        //获取用户的输入值
        let username = this.value;
        //向服务器端发送请求，监测用户名是否存在
        //1、创建 script 标签
        const script = document.createElement("script");
        //2、设置 标签 src 属性
        script.src = "http://localhost:520/check-username";
        //3、将 script 放入页面中
        document.body.appendChild(script);
      };
    </script>
    <!-- js标签也能实现跨域 不过返回来的值必须是个 js表达式 -->
  </body>
</html>

jQuery发送JSONP请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <title>jquery发送jsonp请求</title>
  </head>
  <body>
    <button>点击发送请求</button>
    <p></p>
    <script>
      $("button")
        .eq(0)
        .click(function () {
          $.getJSON(
            "http://localhost:520/jquery-jsonp-server?callback=?",
            function (data) {
              console.log(data);
              $("p")
                .eq(0)
                .html(
                  `名称：${data.name}，性别：${data.sex}，年龄：${data.age}`
                );
            }
          );
        });
    </script>
    <!-- js标签也能实现跨域 不过返回来的值必须是个 js表达式 -->
  </body>
</html>

设置CORS响应头实现跨域

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <title>设置CORS响应头实现跨域</title>
  </head>
  <body>
    <button>点击发送请求</button>
    <p></p>
    <script>
      const b = document.querySelector("button");
      b.onclick = function () {
        //1、创建对象
        const xhr = new XMLHttpRequest();
        //2、初始化设置
        xhr.open("GET", "http://localhost:520/cors-server");
        //3、发送
        xhr.send();
        //4、绑定事件
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              console.log(xhr.response);
            }
          }
          //5、判断放回请求
        };
      };
    </script>
  </body>
</html>

server.js

const express = require("express");

const app = express();

app.get("/home", (request, response) => {
  //响应一个页面
  response.sendFile(__dirname + "/1-同源策略/index.html");
});

app.get("/data", (request, response) => {
  response.send("用户数据");
});

//jsonp 原理
app.all("/jsonp-server", (request, response) => {
  // response.send("console.log('xinze')");

  const data = { name: "xinze" };
  //将数据转为字符串
  let str = JSON.stringify(data);
  response.send(`handle(${str})`);
});

//jsonp实践
app.all("/check-username", (request, response) => {
  const data = {
    exist: 1,
    msg: "用户名已存在",
  };
  //将数据转为字符串
  let str = JSON.stringify(data);
  response.end(`handle(${str})`);
});

//jquery-jsonp
app.all("/jquery-jsonp-server", (request, response) => {
  const data = {
    name: "xinze",
    age: 19,
    sex: "男",
  };
  //将数据转为字符串
  let str = JSON.stringify(data);

  //接收 id 参数
  let cb = request.query.callback;

  // response.end(`handle(${str})`);
  response.send(`${cb}(${str})`);
});

//cors
app.all("/cors-server", (request, response) => {
  //设置响应头 实现跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Headers", "*");
  response.setHeader("Access-Control-Allow-Method", "*");
  response.send("hello CORS");
});
app.listen(520, () => {
  console.log("服务器已经启动...");
});
XinZeBig
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
axios和ajax怎么读,axios, ajax和fetch的比较
weixin_35275671的博客
08-05 2356
Ajax前端程序员常说的Ajax是 Asynchronous JavaScript and XML的缩写，意思是异步网络请求。区别于传统web开发中采用的同步方式。Ajax带来的最大影响就是页面可以无刷新的请求数据。以往，页面表单提交数据，在用户点击完”submit“按钮后，页面会强制刷新一下，体验十分不友好。传统web请求方式：使用Ajax后请求：实现一个Ajax请求在现代浏览器上实现一个Aja...
java 三大框架整合 ajax
07-24
开发者可以使用jQuery、axios、fetch等库来简化Ajax请求。在与Java三大框架整合时，Ajax通常通过GET或POST方式发送请求，获取JSON数据，然后在客户端更新DOM，实现页面的部分刷新。 5. **GET与POST请求**：在SSH_...
express搭建服务器
ssjjrr的博客
10-05 3131
express搭建服务器
node项目的搭建(一)
aliven1的博客
05-18 277
1.创建app.js入口文件 2.npm init创建json配置文件 3.安装express: npm install --save express; 4.配置es6转换环境: 配置babel,使项目支持ES6语法 4.1:新建.babelrc文件; 4.2:babelrc的配置:{ “presets”:[ “env” ]; 4.3:npm install babel-preset-env --save-dev 5.配置es6转换工具: 5.1:安装babel-register:将e.
【前端请求】一文总结Ajax、Axios及Fetch
qq_61834461的博客
07-09 1682
一篇文章汇总ajax axios fetch的用法及简单封装
axios, ajax和fetch的比较
shenenhua的博客
06-27 243
Ajax 前端程序员常说的Ajax是Asynchronous JavaScript and XML的缩写，意思是异步网络请求。区别于传统web开发中采用的同步方式。 Ajax带来的最大影响就是页面可以无刷新的请求数据。以往，页面表单提交数据，在用户点击完”submit“按钮后，页面会强制刷新一下，体验十分不友好。 传统web请求方式： 使用Ajax后请求： 实现一个Ajax请求 在现代浏览器上实现一个Ajax请求是非常容易的， var request = new XMLHttpReques.
探秘 | 原生ajax、jquery-ajax、axios与fetch的区别与优缺点
青春木鱼的博客
07-26 731
前端的技术发展速度非常的快，异步请求也是其重要的体现之一，从最早的原生XHR，再到JqueryAjax的统治时代，再到近来，fetch、axios等技术也开始出现并大量投入使用。其实有这么多种的请求方法和解决方案，总结一下：原生XHR几乎很少开发会用，JqueryAjax属于老当益壮的那种，虽然很老，但是很好用，Fetch是属于初生牛犊，还需要慢慢成长，axios就目前来说，算是非常好的了，无脑使用即可。
Nuxt.js整合axios
weixin_45822542的博客
12-15 3412
整合 axios 默认整合 在构建项目时，如果选择axios组件，nuxt.js将自动与axios进行整合 手动整合 步骤1：package.json有axios的版本 "dependencies": { "@nuxtjs/axios": "^5.13.1", }, 步骤2：安装 npm install 步骤3：nuxt.config.js 以模块的方式添加axios modules: [ // https://go.nuxtjs.dev/axios '@nuxt
day2021-12-16(整合axios，fetch发送ajax，自定义axios)
TIM_Zhang1122的博客
12-16 111
6. ajax操作 6.1 整合 axios 6.1.1 默认整合 在构建项目时，如果选择axios组件，nuxt.js将自动与axios进行整合 6.1.2 手动整合（可选） 步骤1：package.json有axios的版本 "dependencies": { "@nuxtjs/axios": "^5.13.1", }, 步骤2：安装 npm install 步骤3：nuxt.config.js 以模块的方式添加axios modules: [
vue中的axios与ajax的区别,ajax跟vue中axios的区别是什么？
weixin_42569329的博客
08-06 3126
区别：vue中axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。axios是ajax，ajax不止axiosVue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目...
详解Vue 2.0封装axios笔记
12-08
最近团队讨论了一下，Ajax 本身跟 Vue 并没有什么需要特别整合的地方，使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果，vue-resource 提供的价值和其维护成本相比并不划算，所以决定在不久...
vue+spring boot整合笔记和代码资料
06-21
3. **前后端通信**：Vue.js使用axios或fetch等库进行Ajax请求，与Spring Boot提供的REST API进行交互。发送GET、POST、PUT、DELETE请求，获取或修改后端数据。 4. **安全认证**：在整合过程中，安全性是必须考虑的...
AJAX高级程序设计源代码
05-02
还有其他库如axios、fetch API等，提供了更现代和便捷的AJAX解决方案。 10. **Promise和async/await**：随着ES6的推广，Promise和async/await语法使得异步编程更加直观和易读。在处理AJAX请求时，可以利用这些特性...
ajax学习ppt（完整版）
06-28
现代前端框架如React、Vue、Angular等都内置了对Ajax的封装，如React的fetch、axios，Vue的axios插件，Angular的HttpClient模块，使得开发者可以更方便地进行Ajax操作，同时这些框架还提供了状态管理、组件化、路由...
【ajax实战09】内容管理页面——删除功能
大前端开发工程师、互联网方向创业者
06-28 399
利用ajax实现数据删除功能
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1043
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
WHAT - NextJS 的路由系统和 react-router-dom
最新发布
weixin_58540586的博客
07-04 815
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
在 .NET 8 Web API 中实现弹性
技术探索驿站
07-03 562
通过执行这些步骤，您已使用 Microsoft.Extensions.Http.Resilience 库将弹性集成到 .NET 8 Web API 项目中。重试策略、断路器设置和超时将有助于确保您的 API 能够抵御瞬时故障，从而提高其可靠性和用户体验。
ajax fetch axios
04-27
AJAX（Asynchronous JavaScript and XML）是一种使用JavaScript和XML（现已更改为JSON）进行异步数据通信的技术，可在不刷新整个页面的情况下部分更新网页内容。然而，AJAX只是用来发送请求和接收响应的技术，需要使用其他技术（如DOM操作）对数据进行解析和呈现。由于其语法相对繁琐且不太便于维护，后续的技术逐渐发展出现。 Fetch是Web API的一部分，用于在浏览器中进行网络请求。Fetch有着更加简洁和直观的语法，支持 Promise，在处理错误、取消请求等方面也有更好的表现。同时，Fetch支持流式处理而无需将响应存储在内存中，可以减少内存占用。 Axios是一个使用Promise基于XMLHttpRequest和fetch进行HTTP请求的JavaScript库。它具有更加直观和简洁的API，对于错误处理、取消请求等方面也有更好的表现。Axios也有一些其他的特性，如请求和响应的拦截器、默认的配置选项、CSRF保护等。由于其语法简单易用，使用较为广泛。 综上所述，Fetch和Axios都比传统的AJAX更加简单直观、易于维护，因此已经成为当今最为流行的前端数据请求解决方案之一。但是，在选择具体的技术时，需要根据具体的项目需求和开发经验来做出决策。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

XinZeBig

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值