• AJAX学习笔记

    首先我们先明白什么是行 头 空行 体

    （1）AJAX-express框架介绍

    （1）安装环境 

    在项目的终端中打开，然后分别输入安装express环境

    npm init --yes

    npm i express

    （2）express的使用 

    （1）在js文件中

    -------------->

    1. //1.引入express
    2. const express = require("express");
    3. //2.创建应用对象
    4. const app = express();
    5. //3.创建路由规则
    6. // request是对请求报文的封装
    7. // response是对响应报文的封装
    8. app.get("/", (request, response) => {
    9.   //设置相应
    10.   response.send("HELLO EXPRESS");
    11. });
    12. //4.监听端口启动服务
    13. app.listen(8000, () => {
    14.   console.log("服务已经启动,8000端口监听中...");
    15. });

    （2）启动：在终端中写入----->node 文件名.js             

     我的是node express.js

    （3）在浏览器中http://127.0.0.1:8000/ 

    （2）AJAX案例准备

    （1）前端准备

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>AJAX GET 请求title>
    8.     <style>
    9.       .result {
    10.         height: 100px;
    11.         width: 200px;
    12.         border: 1px solid #90b;
    13.       }
    14.     style>
    15.   head>
    16.   <body>
    17.     <button>点击发送请求button>
    18.     <div class="result">div>
    19.   body>
    20. html>

    效果

     （2）js准备(改进之前写的)

    1. //1.引入express
    2. const express = require("express");
    3. //2.创建应用对象
    4. const app = express();
    5. //3.创建路由规则
    6. // request是对请求报文的封装
    7. // response是对响应报文的封装
    8. app.get("/server", (request, response) => {
    9.   //设置响应头 设置允许跨域
    10.   response.setHeader("Access-Control-Allow-Origin" + "*");
    11.   //设置相应
    12.   response.send("HELLO EXPRESS");
    13. });
    14. //4.监听端口启动服务
    15. app.listen(8000, () => {
    16.   console.log("服务已经启动,8000端口监听中...");
    17. });

     主要变化

    （3）AJAX请求的基本操作

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>AJAX GET 请求title>
    8.     <style>
    9.       .result {
    10.         height: 100px;
    11.         width: 200px;
    12.         border: 1px solid #90b;
    13.       }
    14.     style>
    15.   head>
    16.   <body>
    17.     <button>点击发送请求button>
    18.     <div id="result">div>
    19.     <script>
    20.       //获取button元素
    21.       const btn = document.getElementsByTagName("button")[0];
    22.  
    23.       const result = document.getElementById("result");
    24.  
    25.       //绑定事件
    26.       btn.onclick = function () {
    27.         //1.创建对象
    28.         const xhr = new XMLHttpRequest();
    29.         //2.初始化 设置请求方法和url
    30.         xhr.open("GET", "http://127.0.0.1:8000/server");
    31.         //3.发送
    32.         xhr.send();
    33.         //4.事件绑定处理服务端返回的结果
    34.         //  on 相当于when 当....时候
    35.         //  readystate是 xhr 对象中的属性，表示状态0 1 2 3 4
    36.         //  change改变
    37.         xhr.onreadystatechange = function () {
    38.           //判断（服务端返回了所有的结果,等于4正好结束)
    39.           if (xhr.readyState === 4) {
    40.             //判断响应状态码 200 404 403 401 500
    41.             //2xx成功(以2打头的就算成功)
    42.             if (xhr.status >= 200 && xhr.status < 300) {
    43.               //处理结果 行 头 空行 体
    44.               // console.log(xhr.status); //状态码
    45.               // console.log(xhr.statusText); //状态字符串
    46.               // console.log(xhr.getAllResponseHeaders()); //所有响应头
    47.               // console.log(xhr.response); //响应体
    48.               result.innerHTML = xhr.response;
    49.             }
    50.           }
    51.         };
    52.       };
    53.     script>
    54.   body>
    55. html>

    效果 

    （1）AJAX设置请求参数

    （4）AJAX发送POST请求

    （1）改变html文件

    和上面写的一样，就是把GET改成POST

     xhr.open("POST", "http://127.0.0.1:8000/server");

    会发现报错，因为没有和POST匹配

     （2）修改js文件

    只需要加一段就解决

    1. app.post("/server", (request, response) => {
    2.   //设置响应头 设置允许跨域
    3.   response.setHeader("Access-Control-Allow-Origin", "*");
    4.   //设置响应
    5.   response.send("HELLO AJAX POST");
    6. });

    效果 

       (5)AJAX-POST设置请求体

     （6）AJAX设置请求头信息

    添加

    我们需要添加一段

            //设置请求头

            xhr.setRequestHeader(

              "Content-Type",

              "application/x-www-form-urlencoded"

            );

    --------------------------------------->

     自定义请求头

            //自定义

            xhr.setRequestHeader("name", "liujiayi");

    现在单纯主要写的话，会报错

    但是还是可以看见 

     改进

     完整代码

    1. //1.引入express
    2. const express = require("express");
    3. //2.创建应用对象
    4. const app = express();
    5. //3.创建路由规则
    6. // request是对请求报文的封装
    7. // response是对响应报文的封装
    8. app.get("/server", (request, response) => {
    9.   //设置响应头 设置允许跨域
    10.   response.setHeader("Access-Control-Allow-Origin", "*");
    11.   //设置响应
    12.   response.send("HELLO AJAX");
    13. });
    14. app.all("/server", (request, response) => {
    15.   //设置响应头 设置允许跨域
    16.   response.setHeader("Access-Control-Allow-Origin", "*");
    17.   //响应头
    18.   response.setHeader("Access-Control-Allow-Headers", "*");
    19.   //设置响应
    20.   response.send("HELLO AJAX POST");
    21. });
    22. //4.监听端口启动服务
    23. app.listen(8000, () => {
    24.   console.log("服务已经启动,8000端口监听中...");
    25. });

    （7）AJAX-服务端响应JSON数据

    首先给出完整的js文件

    因为改的地方有点多

    1. //1.引入express
    2. const express = require("express");
    3. //2.创建应用对象
    4. const app = express();
    5. //3.创建路由规则
    6. // request是对请求报文的封装
    7. // response是对响应报文的封装
    8. app.all("/json-server", (request, response) => {
    9.   //设置响应头 设置允许跨域
    10.   response.setHeader("Access-Control-Allow-Origin", "*");
    11.   //响应头
    12.   response.setHeader("Access-Control-Allow-Headers", "*");
    13.   //响应一个数据
    14.   const data = {
    15.     name: "liujiayi",
    16.   };
    17.   //对对象进行字符串转化
    18.   let str = JSON.stringify(data);
    19.   //设置响应
    20.   response.send(str);
    21. });
    22. //4.监听端口启动服务
    23. app.listen(8000, () => {
    24.   console.log("服务已经启动,8000端口监听中...");
    25. });

    然后再给出html部分

    （1）第一种自动转化

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>AJAX POST 请求title>
    8.     <style>
    9.       #result {
    10.         width: 200px;
    11.         height: 100px;
    12.         border: 1px solid black;
    13.       }
    14.     style>
    15.   head>
    16.   <body>
    17.     <div id="result">div>
    18.     <script>
    19.       const result = document.getElementById("result");
    20.       result.addEventListener("mouseover", function () {
    21.         //1.获取元素对象
    22.         const xhr = new XMLHttpRequest();
    23.         //设置响应体数据的类型
    24.         xhr.responseType = "json";
    25.         //2.初始化 设置请求方法和url
    26.         xhr.open("POST", "http://127.0.0.1:8000/json-server");
    27.  
    28.         //设置请求头
    29.         xhr.setRequestHeader(
    30.           "Content-Type",
    31.           "application/x-www-form-urlencoded"
    32.         );
    33.         //自定义
    34.         xhr.setRequestHeader("name", "liujiayi");
    35.  
    36.         //3.发送
    37.         xhr.send();
    38.         //4.事件绑定处理服务端返回的结果
    39.         //  on 相当于when 当....时候
    40.         //  readystate是 xhr 对象中的属性，表示状态0 1 2 3 4
    41.         //  change改变
    42.         xhr.onreadystatechange = function () {
    43.           //判断（服务端返回了所有的结果,等于4正好结束)
    44.           if (xhr.readyState === 4) {
    45.             //判断响应状态码 200 404 403 401 500
    46.             //2xx成功(以2打头的就算成功)
    47.             if (xhr.status >= 200 && xhr.status < 300) {
    48.               console.log(xhr.response);
    49.               result.innerHTML = xhr.response.name;
    50.             }
    51.           }
    52.         };
    53.       });
    54.     script>
    55.   body>
    56. html>

    （2）手动转化

    （8）介绍一个好用的自动重启工具

    学到这，相信大家对每次对js文件进行微小的调整后，都要重新保存，再运行，十分麻烦。

    现在介绍一个工具nodemon

    安装

    npm install -g nodemon

    运行 

    npx nodemon express.js

  • 相关阅读:
    Java--JDBC操作数据库
    测试/开发程序员面试建议，把握机会轻松拿offer......
    deepstream6.2部署yolov5详细教程与代码解读
    javaSE -类（class）和对象
    数据库复习题带答案
    C++核心编程：P18-＞STL----常用算法(上)
    【Pygame】 游戏开发 基础知识
    网络安全（黑客）自学
    【教程】解决ngrok reconnecting外部网络无法访问
    flex布局与float布局
  • 原文地址：https://blog.csdn.net/m0_62387059/article/details/126230544