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

最新推荐文章于 2024-04-28 20:18:06 发布
最新推荐文章于 2024-04-28 20:18:06 发布
阅读量510 收藏 3
点赞数 1
分类专栏： 前端 文章标签： ajax 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44887198/article/details/134308086
版权

文章目录

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

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

<!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}
        <br>
        爱好：${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 端口监听中....")
})
ぃ咔哇依°ヽ
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3655
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
ajax尚硅谷笔记——跨域请求、axios发送ajax请求、jquery发送ajax请求
weixin_53317758的博客
11-21 2037
script标签作为函数被服务调用，其中加上该函数的参数作为用户需要看到的数据内容
尚硅谷ajax学习记录（一）
最新发布
m0_56685529的博客
04-28 536
尚硅谷ajax学习
尚硅谷Ajax笔记
weixin_57780589的博客
02-01 1180
//引入express//创建应用对象//创建路由规则//request对请求报文的封装//response是对响应报文的封装//设置响应});//监听端口启动服务console.log("服务已经启动，8000端口监听中……");});
AJAX尚硅谷学习笔记
qq_45005416的博客
05-11 691
尚硅谷AJAX学习笔记
AJAX学习笔记-B站尚硅谷视频
m0_54281014的博客
01-08 138
ajax基础学习笔记
npm使用介绍
xidianzxm
12-06 281
1、npm介绍 NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种： 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。 由于新版的nodejs已经集成了npm，所以之前npm也一并安装好...
Web前端3小时Ajax入门到精通
10-20
Web前端3小时Ajax入门到精通
java从入门到精通全过程笔记.doc
11-30
本资源为 Java 从入门到精通全过程笔记，涵盖了 Unix、Java 基础、数据库、Web 开发、JSP、Struts、Ajax、Spring、Ejb 等多个方面的知识点。 Unix 基础知识点 1. inode：存储编号（地址） 2. ls 命令：查看磁盘...
Ajax从入门到精通.pdf
05-09
Ajax从入门到精通.pdf
Ajax学习笔记---3种Ajax的实现方法【推荐】
10-22
下面小编就为大家带来一篇Ajax学习笔记---3种Ajax的实现方法【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考
尚硅谷Ajax笔记（word）
01-10
尚硅谷ajax视频课程同步笔记绝对是可以使用的哦，这个是自己总结的笔记
尚硅谷_教学课件_Ajax
05-11
尚硅谷_教学课件_Ajax
尚硅谷_Ajax
11-12
Ajax的技术的产生 Ajax被认为是(Asynchronous JavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. “Ajax”这个名字是在2005年2月，Adaptive Path的Jesse James Garrett在他的文章Ajax:A New Approach to Web Application中创造。 而Ajax这项技术，是Google在Google Labs发布Google Maps和Google Suggest后真正为人所认识。
ajax从入门到精通.rar
07-18
#资源达人分享计划# 结合本博主的博客Ajax从入门到精通（全）的代码
尚硅谷Ajax学习笔记--操作部分
weixin_51574027的博客
07-07 1276
ajax的基本操作，使用node+express实现，编辑器为vscode
【ajax】0.b站-尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版） 笔记
weixin_43210113的博客
12-04 569
〇、前情提要 参考： b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版） https://www.bilibili.com/video/BV1WC4y1b78y?p=2 笔记视频链接 链接：https://pan.baidu.com/s/1Wnwb42-AaqAlg6cQ0PRHwg 提取码：3waj 【ajax】HTTP协议+Chrome网络控制台查看POST、GET通信报文 https://blog.csdn.net/weixin_43210113/a
jQuery第二天
毕富国的博客
08-05 187
CSS模块 style样式 css(styleName): 根据样式名得到对应的值 css(styleName, value): 设置一个样式 css({多个样式对}): 设置多个样式 位置坐标 offset(): 读/写当前元素坐标(原点是页面左上角) position(): 读当前元素坐标(原点是父元素左上角) scrollTop()/scrollLeft(): 读/...
ajax从入门到精通
07-29
以下是AJAX从入门到精通的一些关键知识点： 1. 基本概念：AJAX的核心概念是异步通信，它通过XMLHttpRequest对象向服务器发送请求，并处理服务器返回的数据。与传统的同步请求不同，AJAX请求能够在后台进行，不影响...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值