20231109-【尚硅谷】3小时Ajax入门到精通学习笔记

ぃ咔哇依°ヽ2023-11-17 20:08

文章目录

1、安装NodeJS

【官网链接】安装一直点下一步就行了

验证是否安装成功：

① win + r，输入cmd

② 输入：node -v

③ 如果出现版本号，说明安装成功

2、Express框架

① 在项目目录中打开了命令行终端，输入：npm init --yes（用于快速创建一个 Node.js 项目的 package.json 文件，并将所有选项设置为默认值。）

② 安装Express框架：npm i express

③ 编写代码：

javascript 复制代码 
// 1、引入Express
const express = require("express");

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

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

  // 服务器允许浏览器发送任意的请求头信息
  response.setHeader("Access-Control-Allow-Headers", "*");
 
  // 服务器允许所有请求方法
  response.setHeader("Access-Control-Allow-Method", "*");
   
  // 设置响应体
  response.send("HELLO EXPRESS!");
});

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

④ 运行服务，在终端输入：node 脚本名

⑤ 关闭服务：Ctrl + C

AJAX发送GET请求

客户端代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX发送GET请求</title>
  <style>
    .box {
      width: 640px;
      height: 480px;
      margin: 200px auto;
      border: 1px solid black;
      position: relative;
      text-align: center;
    }

    .btn {
      width: 120px;
      height: 40px;
      background-color: blueviolet;
      color: white;
      font-size: 14px;
      border-radius: 10px;
      margin-top: 50px;
    }

    #result {
      width: 320px;
      height: 240px;
      border: 3px solid slateblue;
      position: absolute;
      left: 50%;
      top: 60%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <div class="box">
    <button class="btn">发送GET请求</button>
    <div id="result"></div>
  </div>

  <script>
    const btn = document.getElementsByClassName("btn")[0];
    const result = document.getElementById("result");
    btn.onclick = function () {
      console.log("Click!");

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

      // 2、初始化 设置请求方法和URL
      // 如需设置参数，直接在url后面加?a=100&b=200&c=300
      xhr.open("GET", "http://127.0.0.1:8000/server");

      // 3、发送
      xhr.send();

      // 4、事件绑定 处理服务端返回的结果
      // readystate 是 xhr 对象中的属性
      // 表示状态 0（未初始化） 1（执行完open方法） 2（执行完send方法） 3（服务端返回部分结果） 4（服务端返回全部结果）
      xhr.onreadystatechange = function () {
        // 判断（服务端返回了所有的结果）
        if (xhr.readyState === 4) {
          // 判断响应状态码
          // 200 OK：请求成功。服务器成功处理了请求并返回所请求的资源。
          // 201 Created：已创建。请求成功，并且服务器已经创建了新的资源。
          // 204 No Content：无内容。服务器成功处理了请求，但没有返回任何内容。
          // 400 Bad Request：请求错误。服务器无法理解或处理请求的语法。
          // 401 Unauthorized：未授权。请求要求身份验证，但用户未提供有效的身份凭据。
          // 403 Forbidden：禁止访问。服务器拒绝请求访问资源，没有权限。
          // 404 Not Found：未找到。服务器找不到请求的资源。
          // 500 Internal Server Error：服务器内部错误。服务器在处理请求过程中发生了错误。
          // 502 Bad Gateway：错误的网关。作为网关或代理服务器的服务器，从上游服务器接收到无效的响应。
          // 503 Service Unavailable：服务不可用。服务器暂时过载或维护，无法处理请求。
          if (xhr.status === 200) {
            // 处理结果 行 头 空行 体
            console.log(xhr.status); // 状态码
            console.log(xhr.statusText); // 状态字符串
            console.log(xhr.getAllResponseHeaders); // 所有响应头
            console.log(xhr.response); // 响应体

            result.innerHTML = xhr.response;
          } else {
            console.log("请求失败...");
          }
        }
      }
    }
  </script>
</body>

</html>

服务端代码

javascript 复制代码 
// 1、引入Express
const express = require("express");

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

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

  // 服务器允许浏览器发送任意的请求头信息
  response.setHeader("Access-Control-Allow-Headers", "*");
 
  response.setHeader("Access-Control-Allow-Method", "*");

  // 设置响应体
  response.send("HELLO AJAX!");
});

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

AJAX发送POST请求

客户端代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX发送POST请求</title>
  <style>
    .box {
      width: 640px;
      height: 480px;
      margin: 200px auto;
      border: 1px solid black;
      position: relative;
      text-align: center;
    }

    .btn {
      width: 120px;
      height: 40px;
      background-color: blueviolet;
      color: white;
      font-size: 14px;
      border-radius: 10px;
      margin-top: 50px;
    }

    #result {
      width: 320px;
      height: 240px;
      border: 3px solid slateblue;
      position: absolute;
      left: 50%;
      top: 60%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <div class="box">
    <button class="btn">发送POST请求</button>
    <div id="result"></div>
  </div>

  <script>
    const btn = document.getElementsByClassName("btn")[0];
    const result = document.getElementById("result");
    btn.addEventListener("click", function () {
      console.log("Click!");

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

      // 2、初始化 设置请求方法和URL
      // 如需设置参数，直接在url后面加?a=100&b=200&c=300
      xhr.open("POST", "http://127.0.0.1:8000/server");

      // 3、发送
      // xhr.send();
      xhr.send("a=100&b=200&c=300"); // 传递参数

      // 4、事件绑定 处理服务端返回的结果
      xhr.onreadystatechange = function () {
        // 判断（服务端返回了所有的结果）
        if (xhr.readyState === 4) {
          // 判断响应状态码
          if (xhr.status >= 200 && xhr.status < 300) {
            // 处理结果 行 头 空行 体
            result.innerHTML = xhr.response;
          } else {
            console.log("请求失败...");
          }
        }
      }
    });
  </script>
</body>

</html>

服务端代码

javascript 复制代码 
// 1、引入Express
const express = require("express");

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

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

  // 服务器允许浏览器发送任意的请求头信息
  response.setHeader("Access-Control-Allow-Headers", "*");
 
  response.setHeader("Access-Control-Allow-Method", "*");

  // 设置响应体
  response.send("HELLO AJAX POST!");
});

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

设置请求头信息

javascript 复制代码 
// 1、创建对象
const xhr = new XMLHttpRequest();

// 2、初始化 设置请求方法和URL
// 如需设置参数，直接在url后面加?a=100&b=200&c=300
xhr.open("POST", "http://127.0.0.1:8000/server");

// 3、设置请求头
xhr.setRequestHeader('name', 'ajax'); // 自定义请求头

// 4、发送
// xhr.send();
xhr.send("a=100&b=200&c=300"); // 传递参数

// 5、事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function () {
  // 判断（服务端返回了所有的结果）
  if (xhr.readyState === 4) {
    // 判断响应状态码
    if (xhr.status >= 200 && xhr.status < 300) {
      // 处理结果 行 头 空行 体
      result.innerHTML = xhr.response;
    } else {
      console.log("请求失败...");
    }
  }
}

服务端响应JSON数据

客户端代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>服务端响应JSON数据</title>
  <style>
    .box {
      width: 640px;
      height: 480px;
      margin: 200px auto;
      border: 1px solid black;
      position: relative;
      text-align: center;
    }

    .btn {
      width: 120px;
      height: 40px;
      background-color: blueviolet;
      color: white;
      font-size: 14px;
      border-radius: 10px;
      margin-top: 50px;
    }

    #result {
      width: 320px;
      height: 240px;
      border: 3px solid slateblue;
      position: absolute;
      left: 50%;
      top: 60%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <div class="box">
    <button class="btn">发送请求</button>
    <div id="result"></div>
  </div>

  <script>
    const btn = document.getElementsByClassName("btn")[0];
    const result = document.getElementById("result");
    btn.addEventListener("click", function () {
      console.log("Click!");

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

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

      // 2、初始化 设置请求方法和URL
      // 如需设置参数，直接在url后面加?a=100&b=200&c=300
      xhr.open("GET", "http://127.0.0.1:8000/server");

      // 3、设置请求头
      // xhr.setRequestHeader('name', 'ajax'); // 自定义请求头

      // 4、发送
      xhr.send();

      // 5、事件绑定 处理服务端返回的结果
      xhr.onreadystatechange = function () {
        // 判断（服务端返回了所有的结果）
        if (xhr.readyState === 4) {
          // 判断响应状态码
          if (xhr.status >= 200 && xhr.status < 300) {
            // 手动转换数据
            let data = JSON.parse(xhr.response);
            console.log(data);
            result.innerHTML = "姓名：" + data.name + " 性别：" + data.sex + " 年龄：" + data.age;

            // 自动转换 就设置响应体数据的类型
            // result.innerHTML = "姓名：" + xhr.response.name + " 性别：" + xhr.response.sex + " 年龄：" + xhr.response.age;
          } else {
            console.log("请求失败...");
          }
        }
      }
    });
  </script>
</body>

</html>

服务端代码

javascript 复制代码 
// 1、引入Express
const express = require("express");

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

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

  // 服务器允许浏览器发送任意的请求头信息
  response.setHeader("Access-Control-Allow-Headers", "*");
 
  response.setHeader("Access-Control-Allow-Method", "*");

  const data = {
    name: "张三",
    sex: "男",
    age: "18"
  }

  // 对对象进行字符串转换
  let str = JSON.stringify(data);

  // 设置响应体
  response.send(str);
});

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

安装自动重启服务端工具

npm install -g nodemon
启动服务：nodemon 脚本名
如果出现 "因为在此系统上禁止运行脚本"，请按以下步骤解决此问题：
① 搜索Windows PowerShell，右键选择以管理员身份运行
② 输入：set-ExecutionPolicy RemoteSigned
③ 选择Y 或者 A ，就好了

解决IE缓存问题

在链接后面加上：'http://127.0.0.1:8000?t=' + Date.now(); 即可

请求超时与网络异常（xhr.timeout = 2000;）

客户端

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>请求超时与网络异常</title>
  <style>
    .box {
      width: 640px;
      height: 480px;
      margin: 200px auto;
      border: 1px solid black;
      position: relative;
      text-align: center;
    }

    .btn {
      width: 120px;
      height: 40px;
      background-color: blueviolet;
      color: white;
      font-size: 14px;
      border-radius: 10px;
      margin-top: 50px;
    }

    #result {
      width: 320px;
      height: 240px;
      border: 3px solid slateblue;
      position: absolute;
      left: 50%;
      top: 60%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <div class="box">
    <button class="btn">发送GET请求</button>
    <div id="result"></div>
  </div>

  <script>
    const btn = document.getElementsByClassName("btn")[0];
    const result = document.getElementById("result");
    btn.addEventListener('click', function () {
      console.log("Click!");

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

      // 超时设置 2s
      xhr.timeout = 2000;

      // 超时回调
      xhr.ontimeout = function () {
        alert("网络异常，请稍后重试！！！");
      }
      
      // 网络异常回调
      xhr.onerror = function () {
        alert("你的网络似乎出了一些问题！！！");
      }

      // 初始化 设置请求方法和URL
      // 如需设置参数，直接在url后面加?a=100&b=200&c=300
      xhr.open("GET", "http://127.0.0.1:8000/server");

      // 发送
      xhr.send();

      // 事件绑定 处理服务端返回的结果
      xhr.onreadystatechange = function () {
        // 判断（服务端返回了所有的结果）
        if (xhr.readyState === 4) {
          // 判断响应状态码
          if (xhr.status === 200) {
            // 处理结果

            result.innerHTML = xhr.response;
          } else {
            console.log("请求失败...");
          }
        }
      }
    });
  </script>
</body>

</html>

服务端

javascript 复制代码 
// 1、引入Express
const express = require("express");

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

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

  // 服务器允许浏览器发送任意的请求头信息
  response.setHeader("Access-Control-Allow-Headers", "*");
  
  response.setHeader("Access-Control-Allow-Method", "*");

  setTimeout(() => {
    // 设置响应体
    response.send("延迟响应...");
  }, 3000);

});

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

取消请求（xhr.about();）

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>取消请求</title>
  <style>
    .box {
      width: 640px;
      height: 480px;
      margin: 200px auto;
      border: 1px solid black;
      position: relative;
      text-align: center;
    }

    .btn {
      width: 120px;
      height: 40px;
      background-color: blueviolet;
      color: white;
      font-size: 14px;
      border-radius: 10px;
      margin-top: 50px;
    }

    #result {
      width: 320px;
      height: 240px;
      border: 3px solid slateblue;
      position: absolute;
      left: 50%;
      top: 60%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <div class="box">
    <button class="btn" id="sendBtn">发送请求</button>
    <button class="btn" id="cancelBtn">取消请求</button>
    <div id="result"></div>
  </div>

  <script>
    const sendBtn = document.getElementById("sendBtn");
    const cancelBtn = document.getElementById("cancelBtn");
    const result = document.getElementById("result");
    let xhr = null;
    sendBtn.addEventListener('click', function () {

      console.log("SendButtonOnClick!");

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

      // 超时设置 6s
      xhr.timeout = 6000;

      // 超时回调
      xhr.ontimeout = function () {
        alert("网络异常，请稍后重试！！！");
      }

      // 网络异常回调
      xhr.onerror = function () {
        alert("你的网络似乎出了一些问题！！！");
      }

      // 初始化 设置请求方法和URL
      // 如需设置参数，直接在url后面加?a=100&b=200&c=300
      xhr.open("GET", "http://127.0.0.1:8000/server");

      // 发送
      xhr.send();

      // 事件绑定 处理服务端返回的结果
      xhr.onreadystatechange = function () {
        // 判断（服务端返回了所有的结果）
        if (xhr.readyState === 4) {
          // 判断响应状态码
          if (xhr.status === 200) {
            // 处理结果

            result.innerHTML = xhr.response;
          } else {
            console.log("请求失败...");
          }
        }
      }
    });

    cancelBtn.addEventListener('click', function () {
      xhr.abort();
      alert("取消请求");
    });
  </script>
</body>

</html>

解决请求重复发送问题

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>请求重复发送问题</title>
  <style>
    .box {
      width: 640px;
      height: 480px;
      margin: 200px auto;
      border: 1px solid black;
      position: relative;
      text-align: center;
    }

    .btn {
      width: 120px;
      height: 40px;
      background-color: blueviolet;
      color: white;
      font-size: 14px;
      border-radius: 10px;
      margin-top: 50px;
    }

    #result {
      width: 320px;
      height: 240px;
      border: 3px solid slateblue;
      position: absolute;
      left: 50%;
      top: 60%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <div class="box">
    <button class="btn" id="sendBtn">发送请求</button>
    <button class="btn" id="cancelBtn">取消请求</button>
    <div id="result"></div>
  </div>

  <script>
    const sendBtn = document.getElementById("sendBtn");
    const cancelBtn = document.getElementById("cancelBtn");
    const result = document.getElementById("result");
    let xhr = null;
    let isSending = false; // 标识变量 是否正在发送AJAX请求

    sendBtn.addEventListener('click', function () {

      console.log("SendButtonOnClick!");

      // 判断标识变量 如果请求正在发送 则取消该请求 创建一个新的请求
      if (isSending)
        xhr.abort();

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

      isSending = true;

      // 超时设置 6s
      xhr.timeout = 6000;

      // 超时回调
      xhr.ontimeout = function () {
        alert("网络异常，请稍后重试！！！");
      }

      // 网络异常回调
      xhr.onerror = function () {
        alert("你的网络似乎出了一些问题！！！");
      }

      // 初始化 设置请求方法和URL
      // 如需设置参数，直接在url后面加?a=100&b=200&c=300
      xhr.open("GET", "http://127.0.0.1:8000/server");

      // 发送
      xhr.send();

      // 事件绑定 处理服务端返回的结果
      xhr.onreadystatechange = function () {
        // 判断（服务端返回了所有的结果）
        if (xhr.readyState === 4) {

          isSending = false;

          // 判断响应状态码
          if (xhr.status === 200) {
            // 处理结果

            result.innerHTML = xhr.response;
          } else {
            console.log("请求失败...");
          }
        }
      }
    });

    cancelBtn.addEventListener('click', function () {
      xhr.abort();
      alert("取消请求");
    });
  </script>
</body>

</html>

jQuery发送AJAX请求

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 发送 AJAX 请求</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>

<body>
  <button>GET</button>
  <button>POST</button>
  <button>通用型方法</button>

  <script>
    $('button').eq(0).click(function () {
      //请求链接 请求参数 响应回调
      $.get('http://127.0.0.1:8000/server', { a: 100, b: 100 }, function (data) {
        console.log('GET：' + data);
      });
    });

    $('button').eq(1).click(function () {
      //请求链接 请求参数 响应回调 响应类型
      // "xml"： 预计服务器返回XML格式的数据。
      // "html"： 预计服务器返回HTML格式的数据。
      // "text"： 预计服务器返回纯文本数据。
      // "json"： 预计服务器返回JSON格式的数据。
      // "jsonp"： 预计服务器返回JSONP格式的数据。
      // "script"： 预计服务器返回JavaScript代码。
      $.post('http://127.0.0.1:8000/server', { a: 100, b: 100 }, function (data) {
        console.log('POST：' + data);
      }, 'text');
    });

    $('button').eq(2).click(function () {
      $.ajax({
        // 请求链接
        url: 'http://127.0.0.1:8000/server',
        // 请求参数
        data: { a: 100, b: 200 },
        // 请求类型
        type: 'GET',
        // 响应体结果类型
        dataType: 'text',
        // 请求成功回调
        success: function (data) {
          console.log('jQurey AJAX：' + data);
        },
        // 超时时间
        timeout: 1000,
        // 失败的回调
        error: function () {
          console.log("出错啦！！！");
        },
        // 头信息
        headers: {
          c: 300,
          d: 400
        }
      })
    });
  </script>
</body>

</html>

Axios发送AJAX请求

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Axios发送AJAX请求</title>

  <!-- https://github.com/axios/axios -->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
</head>

<body>
  <button>GET</button>
  <button>POST</button>
  <button>AJAX</button>

  <script>
    const btns = document.querySelectorAll('button');

    // 配置 baseURL
    axios.defaults.baseURL = "http://127.0.0.1:8000";

    btns[0].onclick = function () {
      axios.get('/server', {
        // url 参数
        params: {
          a: 100,
          b: 200
        },
        // 请求头信息
        headers: {
          name: 'KingXy',
          age: 18
        }
      }).then(value => {
        console.log(value);
      })
    }

    btns[1].onclick = function () {
      axios.post('/server',
        // 请求体
        {
          username: "zhangsan",
          password: "admin"
        },
        {
          // url 参数
          params: {
            a: 100,
            b: 200
          },
          // 请求头信息
          headers: {
            name: 'KingXy',
            age: 18
          }
        }).then(value => {
          console.log(value);
        })
    }

    btns[2].onclick = function () {
      axios({
        // 请求方法
        method: 'POST',
        url: '/server',
        // url 参数
        params: {
          a: 100,
          b: 200
        },
        // 头信息
        headers: {
          c: 300,
          d: 400
        },
        // 请求体参数
        data: {
          username: "admin",
          password: 'admin'
        }
      })
    }
  </script>
</body>

</html>

使用fetch函数发送AJAX请求

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用fetch函数发送AJAX请求</title>
</head>

<body>
  <button>AJAX请求</button>
  <script>
    const btn = document.querySelector('button');
    btn.onclick = function () {
      fetch('http://127.0.0.1:8000/server?vip=me', {
        method: 'POST',
        headers: {
          name: "ZhangSan"
        },
        body: 'username=admin&password=admin'
      }).then(response => {
        return response.text();
        // return response.json();
      }).then(response => {
        console.log(response);
      })
    }
  </script>
</body>

</html>

原生JSONP

客户端

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <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 = '1px solid #f00';
      p.innerHTML = data.msg;
    }

    // 绑定输入框失去焦点事件
    input.onblur = function () {
      // 获取用户的输入值
      let username = this.value;
      // 创建script标签
      const script = document.createElement('script');
      // 设置标签的src属性
      script.src = 'http://127.0.0.1:8000/server';
      // 将script插入到文档中
      document.body.append(script);
    }
  </script>
</body>

</html>

服务端

javascript 复制代码 
// 1、引入Express
const express = require("express");

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

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

  // 服务器允许浏览器发送任意的请求头信息
  response.setHeader("Access-Control-Allow-Headers", "*");

  response.setHeader("Access-Control-Allow-Method", "*");
 
  const data = {
    exist: 1,
    msg: '用户名已经存在'
  }

  let str = JSON.stringify(data);

  // 设置响应体
  response.send(`handle(${str})`);
});

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

jQuery发送JSONP请求

客户端

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 发送 jsonp请求</title>
  <style>
    #result {
      width: 160px;
      height: 120px;
      border: 1px solid black;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>

<body>
  <button>发送</button>
  <div id="result">

  </div>

  <script>
    $('button').eq(0).click(function () {
      $.getJSON('http://127.0.0.1:8000/server?callback=?', function (data) {
        console.log(data);
        $('#result').html(`
        姓名：${data.name}
        <br>
        爱好：${data.hobby}
        `);
      });
    });
  </script>
</body>

</html>

服务端

javascript 复制代码 
// 1、引入Express
const express = require("express");

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

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

  // 服务器允许浏览器发送任意的请求头信息
  response.setHeader("Access-Control-Allow-Headers", "*");

  response.setHeader("Access-Control-Allow-Method", "*");

  const data = {
    name: '张三',
    hobby: '打篮球'
  }

  let str = JSON.stringify(data);

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

  // 设置响应体
  response.send(`${cb}(${str})`);
});

// 4、监听端口启动服务
app.listen(8000, () => {
  console.log("服务已启动，8000 端口监听中....")
})
相关推荐
ladymorgana2 分钟前
【运维笔记】windows 11 中提示：无法成功完成操作,因为文件包含病毒或潜在的垃圾软件。
运维·windows·笔记
炭烤玛卡巴卡3 分钟前
初学elasticsearch
大数据·学习·elasticsearch·搜索引擎
oneouto21 分钟前
selenium学习笔记（一）
笔记·学习·selenium
张铁铁是个小胖子30 分钟前
MyBatis学习
java·学习·mybatis
我曾经是个程序员39 分钟前
鸿蒙学习记录之http网络请求
服务器·学习·http
m0_748232391 小时前
WebRTC学习二：WebRTC音视频数据采集
学习·音视频·webrtc
虾球xz2 小时前
游戏引擎学习第55天
学习·游戏引擎
oneouto2 小时前
selenium学习笔记（二）
笔记·学习·selenium
sealaugh323 小时前
aws(学习笔记第十九课) 使用ECS和Fargate进行容器开发
笔记·学习·aws
炭烤玛卡巴卡3 小时前
学习postman工具使用
学习·测试工具·postman
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀0419个Web前端交互式3D JavaScript框架和库05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Cube-Studio：开源大模型全链路一站式中台08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）