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

文章目录

  • 1、安装NodeJS
  • 2、Express框架
  • AJAX发送GET请求
  • AJAX发送POST请求
  • 设置请求头信息
  • 服务端响应JSON数据
  • 安装自动重启服务端工具
  • 解决IE缓存问题
  • 请求超时与网络异常(xhr.timeout = 2000;)
  • 取消请求(xhr.about();)
  • 解决请求重复发送问题
  • jQuery发送AJAX请求
  • Axios发送AJAX请求
  • 使用fetch函数发送AJAX请求
  • 原生JSONP
  • jQuery发送JSONP请求

1、安装NodeJS

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

验证是否安装成功:
① win + r,输入cmd
② 输入:node -v
③ 如果出现版本号,说明安装成功

2、Express框架

① 在项目目录中打开了命令行终端,输入:npm init --yes(用于快速创建一个 Node.js 项目的 package.json 文件,并将所有选项设置为默认值。)
② 安装Express框架:npm i express
③ 编写代码:

// 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请求

客户端代码

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>

服务端代码

// 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请求

客户端代码

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>

服务端代码

// 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 端口监听中....")
})

设置请求头信息

// 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数据

客户端代码

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>

服务端代码

// 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;)

客户端

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>

服务端

// 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();)

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>

解决请求重复发送问题

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请求

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>GETbutton>
  <button>POSTbutton>
  <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请求

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>

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

<body>
  <button>GETbutton>
  <button>POSTbutton>
  <button>AJAXbutton>

  <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请求

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

客户端

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>

服务端

// 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请求

客户端

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}
        
爱好:
${data.hobby} `
); }); });
script> body> html>

服务端

// 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 端口监听中....")
})

你可能感兴趣的:(前端,ajax,学习,笔记)