Ajax-概念、Http协议、Ajax请求及其常见问题

Ajax

    • Ajax概念
    • Ajax优缺点
    • HTTP协议
      • 请求报文
      • 响应报文
    • Ajax案例准备工作
      • express基本使用
      • 创建一个服务器
    • 发送AJAX请求
      • GET请求
      • POST请求
      • JSON响应
    • Ajax请求出现的问题
      • IE缓存问题
      • Ajax请求超时与网络异常处理
      • Ajax手动取消请求
      • Ajax重复发送请求问题

Ajax概念

AJAX 全称为Asynchronous Javascript And XML，就是异步的JS和XML。通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

XML：可扩展标记语言。XML被设计用来传输和存储数据。XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全部都是自定义标签，用来表示一些数据。（目前已经被JSON取代）

Ajax优缺点

优点：

  • 可以无需刷新页面而与服务器端进行通信。
  • 允许你根据用户事件来更新部分页面内容。

缺点：

  • 没有浏览历史，不能回退。
  • 存在跨域问题（同源）。
  • SEO不友好（查看源代码中无法查找到）。

HTTP协议

HTTP全称为hypertext transport protocol 协议（超文本传输协议），协议详细规定了浏览器和万维网服务器之间互相通信的规则。

请求报文

请求行：POST /URL HTTP协议版本
请求头：

Host:值

Cookie: 值

Content-type:值

User-Agent:值等等
空行：
请求体：如果是GET请求体为空，如果是POST可以不为空
请添加图片描述

响应报文

响应行：HTTP协议版本 响应状态码 响应状态字符串
响应头：

Content-type:值

Content-length:值

Content-encoding:值等等
空行：
响应体：HTML语法内容
请添加图片描述

Ajax案例准备工作

express基本使用

先下载node并配置node环境，然后在vscode终端中输入npm i express即可，若出现错误，可以尝试用管理员运行vscode再试一次，还是不行的话就找到node文件夹位置找到node_cache node_global node_modules分别把这三个文件–>属性–>安全–>把权限改为完全控制。

此处可以安装到全局，也就是node.js根目录里npm i express -g

创建一个服务器

在当前目录新建个js文件（不一定非要在express安装的根目录里），然后在终端 --> 当前目录下 --> 输入node 文件名就可以启动服务

请添加图片描述

  • 可以使用nodemon实现保存自动重启

    安装nodemon：npm install -g nodemon

    使用：在当前目录终端输入nodemon 文件名

    这样就不用每次修改都要重启服务了

    注意：如果报错则输入npx nodemon 文件名再试一次

发送AJAX请求

GET请求

点击按钮div中呈现响应体：点击按钮发送AJAX请求给服务器，然后把响应体拿过来放到div中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 1px pink;
      }
    </style>
  </head>
  <body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <script>
      //获取button元素
      const btn = document.querySelector("button");
      const result = document.querySelector("#result");
      btn.addEventListener("click", function () {
        //1.创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化，设置请求的方法和url
        xhr.open("GET", "http://127.0.0.1:8000/server?a=1&b=2&c=3");
        //3.发送
        xhr.send();

        //4.事件绑定，处理服务端返回的结果
        //on 当……的时候
        //readyState是xhr对象中的属性,表示状态0 1 2 3 4
        //其中0-未初始化 1-open调用完毕 2-send调用完毕 3-服务端返回了部分结果 4-服务端返回了所有结果
        //change 改变
        xhr.onreadystatechange = function () {
          //判断服务端是否返回了所有结果
          if (xhr.readyState === 4) {
            //判断响应状态码 200 404 403 401 500
            // 2xx ,2开头都表示成功
            if (xhr.status >= 200 && xhr.status < 300) {
              //如果响应成功处理结果 行 头 空行 体
              console.log("状态码:", xhr.status); //状态码
              console.log("状态字符串:", xhr.statusText); //状态字符串
              console.log("响应头:", xhr.getAllResponseHeaders()); //所有的响应头
              console.log("响应体:", xhr.response); //响应体

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

设置url参数：用？隔开，=赋值，&分隔
例如：http://127.0.0.1:8000/server?a=1&b=2&c=3

服务端server.js文件：

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

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

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

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

POST请求

鼠标经过div发送AJAX请求，然后拿回来响应体放在div中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 1px pink;
      }
    </style>
  </head>
  <body>
    <div id="result"></div>
    <script>
      const result = document.querySelector("#result");
      result.addEventListener("mouseover", function () {
        //1.创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化 设置类型与url
        xhr.open("POST", "http://127.0.0.1:8000/server");
        //设置请求头:固定写法,第一个参数设置请求体内容类型,第二个参数是参数查询字符串的类型
        xhr.setRequestHeader(
          "Content-Type",
          "application/x-www-form-urlencoded"
        );
        //3.发送请求，在这里传参，任意类型都可以
        xhr.send("a=1&b=2&c=3");
        // xhr.send('a:1&b:2&c:3');
        // xhr.send('1232142412421312');
        //4.绑定事件
        xhr.onreadystatechange = function () {
          //判断服务端是否返回所有结果
          if (xhr.readyState === 4) {
            //判断响应是否成功
            if (xhr.status >= 200 && xhr.status < 300) {
              //处理服务端返回的结果
              result.innerHTML = xhr.response;
            }
          }
        };
      });
    </script>
  </body>
</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-Controll-Allow-Origin", "*");
  //设置响应
  response.send("HELLO AJAX");
});

//POST请求
app.post("/server", (request, response) => {
  //设置响应头 设置允许跨域
  response.setHeader("Access-Controll-Allow-Origin", "*");
  //设置响应
  response.send("HELLO AJAX POST");
});

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

JSON响应

服务端响应体也可以设置为一个数据发送过去，但是不能直接写，要通过JSON.stringify(数据)把数据转换为JSON字符串

//可以接收任意类型的请求
app.all("/json-server", (request, response) => {
  //设置响应头 设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Headers", "*");
  //响应一个数据
  const data = {
    name: "haha",
  };
  //对对象进行字符串转换
  let str = JSON.stringify(data);
  //设置响应体
  response.send(str);
});

页面在拿到JSON字符串响应体的时候，是无法识别的，所以需要把JSON字符串转换为js对象，有两种方式：

  • 手动转换JSON.parse(xhr.response)
  • 自动转换xhr.responseType = 'json';
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 1px pink;
      }
    </style>
  </head>
  <body>
    <div id="result"></div>
    <script>
      const result = document.querySelector("#result");
      window.onkeydown = () => {
        const xhr = new XMLHttpRequest();
        //设置响应体数据类型
        xhr.responseType = "json";
        xhr.open("GET", "http://127.0.0.1:8000/json-server");
        xhr.send();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              //result.innerHTML = xhr.response;

              //手动对数据进行转换
              //let data = JSON.parse(xhr.response);
              //console.log(data);
              // result.innerHTML = data.name;

              //自动转换
              console.log(xhr.response);
              result.innerHTML = xhr.response.name;
            }
          }
        };
      };
    </script>
  </body>
</html>

Ajax请求出现的问题

IE缓存问题

//针对IE缓存
app.get("/ie", (request, response) => {
  //设置响应头 设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  //设置响应
  response.send("HELLO IEhhh");
});

IE当你响应体改变时，它不会更新，而是缓存，要解决这个问题，就要让每次请求的url都不一样，那么我们在后面传个参数，值为时间戳（因为时间戳是不可能重复的，这样的话浏览器会认为url不一样就会重新发请求从而解决了问题），就可以解决改变响应体时IE走缓存不更新的问题。

xhr.open("GET", "http://127.0.0.1:8000/ie?t=" + Date.now());

Ajax请求超时与网络异常处理

我们不能保证服务端可以及时快速的响应，此时我们可以给Ajax做一个超时的设置然后给用户返回一个提醒，网络异常时也可返回一个提醒，提高用户体验感。

服务端写个定时器，2秒后发送响应体过去

//延时响应
app.get("/delay", (request, response) => {
  //设置响应头 设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  //设置响应
  //服务端写个定时器，2秒后发送响应体过去
  setTimeout(() => {
    response.send("HELLO 延时响应");
  }, 2000);
});

然后点击按钮发送请求时，可以设置超时xhr.timeout和超时回调xhr.ontimeout，还有网络异常回调xhr.onerror

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IE缓存问题</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 1px pink;
      }
    </style>
  </head>
  <body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
      const btn = document.querySelector("button");
      const result = document.querySelector("#result");
      btn.addEventListener("click", () => {
        const xhr = new XMLHttpRequest();
        //超时设置 2s
        xhr.timeout = 2000;
        //超时回调
        xhr.ontimeout = function () {
          alert("网络异常，请稍后重试！");
        };
        //网络异常回调
        xhr.onerror = function () {
          alert("你的网络似乎出了一些问题！请检查后重试！");
        };
        xhr.open("GET", "http://127.0.0.1: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>

Ajax手动取消请求

在发送请求后还没得到响应时，可以手动取消请求，被取消时可返回一个提醒。

设置一个定时器发送响应体：

app.get('/cancel', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    setTimeout(() => {！
        response.send('HELLO 请求已经被取消');
    }, 2000);
})

取消请求，用xhr.abort()方法，abort=中止。
这里有个作用域的问题，解决方法是把xhr定义在外面给个null，然后赋值xhr实例，再调用方法。（重复赋值不能const）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手动取消请求</title>
  </head>
  <body>
    <button>点击发送请求</button>
    <button>点击取消请求</button>
    <div id="result"></div>
    <script>
      const send = document.querySelectorAll("button")[0];
      const cancel = document.querySelectorAll("button")[1];

      let xhr = null;
      //发送请求
      send.onclick = function () {
        xhr = new XMLHttpRequest();
        xhr.open("GET", "http://127.0.0.1:8000/cancel");
        xhr.send();
      };
      //取消请求，abort方法
      cancel.addEventListener("click", function () {
        xhr.abort(); //先点send再点cancel不会报错，先点cancel报错
      });
    </script>
  </body>
</html>

Ajax重复发送请求问题

当用户狂点一个按钮时，浏览器会重复发送相同的请求，导致服务器压力过大。解决方法：当用户发请求时，先检查之前有没有相同的请求，如果已有，就把之前的请求取消掉，只响应最后一个请求（这里有防抖的思想，复习防抖节流点击此处）

<script>
      const btn = document.querySelector("button");
      let xhr = null;
      //标识变量 是否正在发送请求
      let isSending = false;
      //发送请求
      btn.onclick = function () {
        //判断标识变量
        if (isSending) x.abort();
        xhr = new XMLHttpRequest();
        //修改标识变量的值
        isSending = true;
        xhr.open("GET", "http://127.0.0.1:8000/delay");
        xhr.send();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            isSending = false;
          }
        };
      };
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/71131.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Python3 安装、环境变量配置、PyCharm新建Python项目

Python3 安装、环境变量配置、PyCharm新建Python项目

一、安装包下载 Pyhton官网下载>>最新稳定版的安装包&#xff1a; 找到合适的版本进行下载&#xff1a; 如果下载较慢&#xff0c;此处提供一个3.10.11的稳定版本的安装包&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/16GnWjkGFuSfWfaI9UVX8qA?pwd4u5o 提取…
阅读更多...
物联网的定义、原理、示例、未来

物联网的定义、原理、示例、未来

什么是物联网? 物联网 (IoT) 是指由嵌入传感器、软件和网络连接的物理设备、车辆、电器和其他物理对象组成的网络&#xff0c;允许它们收集和共享数据。这些设备(也称为“智能对象”)的范围可以从简单的“智能家居”设备(如智能恒温器)到可穿戴设备(如智能手表和支持RFID的服…
阅读更多...
【C++入门到精通】C++入门 —— vector (STL)

【C++入门到精通】C++入门 —— vector (STL)

阅读导航 前言一、vector简介1. 概念2. 特点 二、vector的使用1.vector 构造函数2. vector 空间增长问题⭕resize 和 reserve 函数 3. vector 增删查改⭕operator[] 函数 三、迭代器失效温馨提示 前言 前面我们讲了C语言的基础知识&#xff0c;也了解了一些数据结构&#xff0…
阅读更多...
CTF之逆向之阿里巴巴

CTF之逆向之阿里巴巴

题目地址&#xff1a;http://www.shiyanbar.com/ctf/13 题目预览&#xff1a; 解题过程&#xff1a; 1、下载附件发现是exe文件 2、使用PEid和Detect It Easy查壳 和 开发语言&#xff0c;发现没有加壳&#xff0c;都是用C#开发的 3、C#和Java Python属于解释型语言&#xff…
阅读更多...
Ajax 笔记（四）—— Ajax 进阶

Ajax 笔记（四）—— Ajax 进阶

笔记目录 4. Ajax 进阶4.1 同步代码和异步代码4.2 回调函数地狱4.2.1 解决方法一&#xff1a;Promise 链式调用4.2.2 解决方法二&#xff1a;async 函数和 await 4.3 Promise.all 静态方法4.4 事件循环4.4.1 事件循环4.4.2 宏任务与微任务 4.5 案例4.5.1 案例一-商品分类4.5.2 …
阅读更多...
Vue响应式数据的原理

Vue响应式数据的原理

在 vue2 的响应式中&#xff0c;存在着添加属性、删除属性、以及通过下标修改数组&#xff0c;但页面不会自动更新的问题。而这些问题在 vue3 中都得以解决。 vue3 采用了 proxy 代理&#xff0c;用于拦截对象中任意属性的变化&#xff0c;包括&#xff1a;属性的读写、属性的…
阅读更多...
【Java】常用Stream API

【Java】常用Stream API

常见 Stream 流表达式 总体结构图 一、两大类型 中间操作(Intermediate Operations) 中间操作是指在Stream上执行的操作, 它们返回一个新的Stream, 允许你链式地进行多个中间操作. 终端操作(Terminal Operations) 对Stream进行最终处理的操作, 当调用终端操作时, Stream会开始执…
阅读更多...
[保研/考研机试] KY3 约数的个数 清华大学复试上机题 C++实现

[保研/考研机试] KY3 约数的个数 清华大学复试上机题 C++实现

题目链接&#xff1a; KY3 约数的个数 https://www.nowcoder.com/share/jump/437195121691716950188 描述 输入n个整数,依次输出每个数的约数的个数 输入描述&#xff1a; 输入的第一行为N&#xff0c;即数组的个数(N<1000) 接下来的1行包括N个整数&#xff0c;其中每个…
阅读更多...
Python AI 绘画

Python AI 绘画

Python AI 绘画 本文我们将为大家介绍如何基于一些开源的库来搭建一套自己的 AI 作图工具。 需要使用的开源库为 Stable Diffusion web UI&#xff0c;它是基于 Gradio 库的 Stable Diffusion 浏览器界面 Stable Diffusion web UI GitHub 地址&#xff1a;GitHub - AUTOMATI…
阅读更多...
[HDLBIts] Exams/m2014 q4j

[HDLBIts] Exams/m2014 q4j

Implement the following circuit: ("FA" is a full adder) module top_module (input [3:0] x,input [3:0] y, output [4:0] sum);assign sumxy; endmodule
阅读更多...
【Java多线程学习7】Java线程池技术

【Java多线程学习7】Java线程池技术

线程池技术 一、什么是线程池 线程池顾名思义是管理一组线程的池子。当有任务要处理时&#xff0c;直接从线程池中获取线程来处理&#xff0c;处理完之后线程不会立即销毁&#xff0c;而是等待下一个任务。 二、为什么要使用线程池? 线程池的作用&#xff1f; 1、降低资源…
阅读更多...
性能测试—Jmeter工具

性能测试—Jmeter工具

文章目录 性能测试1. 术语介绍2. 方法3. 应用场景4. 工具&#xff08;Jmeter&#xff09;4.1 介绍4.2 元件和组件4.2.2 元件4.2.1 组件 4.3 作用域4.4 参数化4.5 执行脚本 性能测试 1. 术语介绍 响应时间(Response time)&#xff1a;对请求作出响应所需要的时间。 在互联网上对…
阅读更多...
Protues如何安装下载使用：STM32利用Protues进行仿真

Protues如何安装下载使用：STM32利用Protues进行仿真

文章目录&#xff1a; 一&#xff1a;Proteus仿真的使用步骤 第一步&#xff1a;Proteus新建项目 第二步&#xff1a;Proteus设计电路图&#xff08;选取元器件、摆放元器件、编辑元器件属性、原理图布线&#xff09; 第三步&#xff1a;程序代码编写 第四步&#xff1a;…
阅读更多...
Docker源码阅读 - goland环境准备

Docker源码阅读 - goland环境准备

docker 源码分为两部分 cli 和 moby&#xff08;docker&#xff09; tips: docker是从moby拷贝过去的&#xff1b;docker整体是一个C-S架构&#xff0c;cli客户端&#xff0c;docker服务端 docker-ce&#xff1a;https://github.com/docker/docker-ce cli&#xff1a;https://…
阅读更多...
【Fegin技术专题】「原生态」打开Fegin之RPC技术的开端，你会使用原生态的Fegin吗？(上)

【Fegin技术专题】「原生态」打开Fegin之RPC技术的开端，你会使用原生态的Fegin吗？(上)

前提介绍 Feign是SpringCloud中服务消费端的调用框架&#xff0c;通常与ribbon&#xff0c;hystrix等组合使用。由于遗留原因&#xff0c;某些项目中&#xff0c;整个系统并不是SpringCloud项目&#xff0c;甚至不是Spring项目&#xff0c;而使用者关注的重点仅仅是简化http调…
阅读更多...
Redis_分片集群

Redis_分片集群

10. 分片集群 10.1简介 业务场景&#xff0c;需要存储50G的数据。对于内存和硬盘配置不足&#xff0c;选用两种方式 一种&#xff1a;纵向扩展&#xff1a;加内存&#xff0c;加硬盘&#xff0c;提高CPU。简单、直接。RDB存储效率要考虑。成本要考虑。二种&#xff1a;横向扩…
阅读更多...
redis学习笔记（八）

redis学习笔记（八）

文章目录 redis的配置redis的核心配置选项Redis的使用 redis的配置 cat /etc/redis/redis.confredis 安装成功以后,window下的配置文件保存在软件 安装目录下,如果是mac或者linux,则默认安装/etc/redis/redis.conf redis的核心配置选项 绑定ip&#xff1a;访问白名单&#x…
阅读更多...
查看CentOS版本及系统位数与设置CentOS 7.9 2009 防火墙配置放开端口的命令与过程

查看CentOS版本及系统位数与设置CentOS 7.9 2009 防火墙配置放开端口的命令与过程

一、查看CentOS版本及系统位数 1.1 命令汇总 //1、安装redhat-lsb yum install -y redhat-lsb//2、查看系统版本信息 lsb_release -a //3、查看系统位数 getconf LONG_BIT1.2 截图 二、设置CentOS7.9 2009 防火墙配置放开端口 2.1 命令汇总 //禁止防火墙开机启动。这种方法方…
阅读更多...
Flink-串讲面试题

Flink-串讲面试题

1. 概念 有状态的流式计算框架 可以处理源源不断的实时数据&#xff0c;数据以event为单位&#xff0c;就是一条数据。 2. 开发流程 先获取执行环境env&#xff0c;然后添加source数据源&#xff0c;转换成datastream&#xff0c;然后使用各种算子进行计算&#xff0c;使用s…
阅读更多...
数据结构笔记--二叉树经典高频题

数据结构笔记--二叉树经典高频题

1--二叉树的最近公共祖先 主要思路&#xff1a; 最近祖先只有两种情况&#xff1a;① 自底向上&#xff0c;当两个目的结点分别在当前结点的左右子树时&#xff0c;当前结点为两个目的结点的最近祖先&#xff1b;② 最近祖先与其中一个目的结点相同&#xff0c;则另一个目的结点…
阅读更多...
最新文章

Copyright @ 2022~2023