️️一篇快速上手 AJAX 异步前后端交互

AJAX

  • 1. AJAX
    • 1.1 AJAX 简介
    • 1.2 AJAX 优缺点
    • 1.3 AJAX 前后端准备
    • 1.4 AJAX 请求基本操作
    • 1.5 AJAX 发送 POST 请求
    • 1.6 设置请求头
    • 1.7 响应 JSON 数据
    • 1.8 AJAX 请求超时与网络异常处理
    • 1.9 取消请求
    • 1.10 Fetch 发送 Ajax 请求
  • 2. jQuery-Ajax
    • 2.1 jQuery 发送 Ajax 请求（GET和POST）
    • 2.2 jQuery 通用方法发送 Ajax 请求
  • 3. Axios-Ajax
    • 3.1 Axios 发送 Ajax 请求（GET和POST）
    • 3.2 Axios 函数发送 Ajax 请求
  • 4. 跨域
    • 4.1 同源策略
    • 4.2 如何解决跨域
      • 4.2.1 JSONP
      • 4.2.2 CORS

1. AJAX

1.1 AJAX 简介

AJAX 全名 Asynchronous Javascript and XML（异步 JavaScript 和 XML）

  • AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

  • 通过 AJAX 可以在浏览器中向服务器发送异步请求，可以实现 无刷新获取数据。

应用场景：

在这里插入图片描述

1.2 AJAX 优缺点

✅ 可以无需刷新页面而与服务器端进行通信。

✅ 允许你根据用户事件（鼠标事件、键盘事件、表单事件…）来更新部分页面内容。

❎ 没有浏览历史，不能回退。

❎ 存在跨域问题

❎ SEO 不友好，AJAX的内容是动态创建到页面当中去，不好爬取代码。

1.3 AJAX 前后端准备

使用 nodejs 作为服务端，与 html 页面交互

在这里插入图片描述

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>#result{width: 200px;height: 100px;border: solid 1px red;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div>
</body>
</html>

server.js

const express = require("express");const app = express();// 路由规则
app.get("/server", (request, response) => {// 设置响应头，允许跨域response.setHeader("Access-Controll-Allow-Origin", "*");// 设置响应体response.send("Hello AJAX");
});// 监听端口，启动服务
app.listen(8000, () => {console.log("服务已启动...");
});

1.4 AJAX 请求基本操作

点击按钮向服务端发送 AJAX 请求，响应结果到 div 中

发送 AJAX 请求操作：

<script>const btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {// 1.创建对象const xhr = new XMLHttpRequest();// 2.初始化, 设置请求方法和urlxhr.open("GET", "http://127.0.0.1:8000/server");// 3.发送xhr.send();// 4.事件绑定 处理服务端返回的结果// readyState: 0-未初始化 1-open方法调用完毕 2-send方法调用完毕 3-服务端返回了部分结果 4-服务端返回了所有结果xhr.onreadystatechange = function () {// 判断服务端是否返回了所有结果if (xhr.readyState === 4) {// 判断是否响应成功 2xxif (xhr.status >= 200 && xhr.status < 300) {console.log(xhr.status); // 状态码console.log(xhr.statusText); // 状态字符串console.log(xhr.getAllResponseHeaders()); // 所有响应头console.log(xhr.response); // 响应体} else {}}};
};
</script>

AJAX 请求成功

返回响应结果到页面中

<script>const btn = document.getElementsByTagName("button")[0];
const result = document.getElementById("result");
btn.onclick = function () {// 1.创建对象const xhr = new XMLHttpRequest();// 2.初始化, 设置请求方法和urlxhr.open("GET", "http://127.0.0.1:8000/server");// 3.发送xhr.send();// 4.事件绑定 处理服务端返回的结果// readyState: 0-未初始化 1-open方法调用完毕 2-send方法调用完毕 3-服务端返回了部分结果 4-服务端返回了所有结果xhr.onreadystatechange = function () {// 判断服务端是否返回了所有结果if (xhr.readyState === 4) {// 判断是否响应成功 2xxif (xhr.status >= 200 && xhr.status < 300) {result.innerHTML = xhr.response;} else {}}};
};
</script>

在这里插入图片描述

1.5 AJAX 发送 POST 请求

鼠标移入 div 时向服务端发请求，然后把响应体结果放入 div 中呈现

AJAX 发送 POST 请求

const result = document.getElementById("result");
result.addEventListener("mouseover", function () {const xhr = new XMLHttpRequest();xhr.open("POST", "http://127.0.0.1:8000/server");xhr.send();xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {result.innerHTML = xhr.response;}}};
});

nodejs 添加对应的路由规则

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

在这里插入图片描述

附带请求参数

xhr.send("a=199&b=1");

1.6 设置请求头

在这里插入图片描述

由于使用了自定义头，浏览器安全机制会阻止发送请求

在这里插入图片描述

在 nodejs 中设置放行所有头信息

放行之后仍然不行，因为还会发送一个 OPTIONS 的请求做一个头信息校验，这时没有匹配的路由规则所以无法成功。

在这里插入图片描述

路由规则设置为 all 可以接受任意类型的请求即可

20241111114815583

1.7 响应 JSON 数据

nodejs:

app.all("/json-server", (request, response) => {// 设置响应头，允许跨域response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Headers", "*");const data = {name: "Fetters"};let str = JSON.stringify(data)// 设置响应体response.send(str);});

1️⃣ 手动数据转换

const result = document.getElementById("result");
result.addEventListener("mouseover", function () {const xhr = new XMLHttpRequest();xhr.open("POST", "http://127.0.0.1:8000/json-server");xhr.send();xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {// 手动对数据转换let data = JSON.parse(xhr.response);result.innerHTML = data;}}};
});

2️⃣ 设置响应体类型自动转换

const result = document.getElementById("result");
result.addEventListener("mouseover", function () {const xhr = new XMLHttpRequest();// 设置响应体数据的类型xhr.responseType = "json";xhr.open("POST", "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.name;}}};
});

在这里插入图片描述

1.8 AJAX 请求超时与网络异常处理

nodejs:

app.get("/delay", (request, response) => {response.setHeader("Access-Control-Allow-Origin", "*");setTimeout(() => {response.send("延时响应");}, 3000);
});

html:

<body><button>点击发送请求</button><div id="result"></div><script>const btn = document.getElementsByTagName("button")[0];const result = document.getElementById("result");btn.addEventListener("click", function () {const xhr = new XMLHttpRequest();// 超时设置, 2sxhr.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>

请求超时：

网络异常：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在这里插入图片描述

1.9 取消请求

html:

<body><button>点击发送请求</button><button>点击取消请求</button><script>const btns = document.querySelectorAll("button");let xhr = null;btns[0].onclick = function () {xhr = new XMLHttpRequest();xhr.open("GET", "http://127.0.0.1:8000/delay");xhr.send();};// abortbtns[1].onclick = function () {xhr.abort();};</script>
</body>

20241111152758070

1.10 Fetch 发送 Ajax 请求

btn.onclick = function () {fetch("http://127.0.0.1:8000/fetch-server?vip=10", {// 请求方法method: "POST",// 请求头headers: {name: "Fetters",},// 请求体body: "username=admin&password=admin",}).then(response => {return response.text();}).then(data => {console.log(data);});
};

2. jQuery-Ajax

2.1 jQuery 发送 Ajax 请求（GET和POST）

// GET
$('button').eq(0).click(function() {$.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data) {console.log(data);}, 'json');
});// POST
$('button').eq(0).click(function() {$.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data) {console.log(data);});
});

2.2 jQuery 通用方法发送 Ajax 请求

$('button').eq(2).click(function() {$.ajax({// urlurl: 'http://127.0.0.1:8000/jquery-server',// 参数data: {a: 100, b:200},// 请求类型type: 'GET',// 响应体结果dataType: 'json',// 成功的回调success: function(data) {console.log(data);},// 超时时间timeout: 2000,// 失败的回调error: function() {console.log('error!');},// 头信息headers: {c: 300,d: 400}});
});

3. Axios-Ajax

在这里插入图片描述

3.1 Axios 发送 Ajax 请求（GET和POST）

const btns = document.querySelectorAll("button");// 配置 baseURL
axios.defaults.baseURL = "http://127.0.0.1:8000";btns[0].onclick = function () {// GETaxios.get("/axios-server", {// url 参数params: {id: 100,vip: 7,},// 请求头参数headers: {name: "Fetters",age: 23,},}).then(value => console.log(value));
};btns[1].onclick = function () {// POSTaxios.post("/axios-server",// 请求体{username: "admin",password: "admin",},{// url 参数params: {id: 100,vip: 7,},// 请求头参数headers: {name: "Fetters",age: 23,},}).then(value => console.log(value));
};

3.2 Axios 函数发送 Ajax 请求

btns[2].onclick = function () {axios({// 请求方法method: "POST",// urlurl: "/axios-server",// url 参数params: {vip: 10,level: 20,},// 头信息headers: {a: 100,b: 200,},// 请求体参数data: {username: "admin",password: "admin",},}).then(response => {console.log(response);});
};

4. 跨域

4.1 同源策略

同源策略（Same-Origin Policy）最早由 Netscape 公司提出，是浏览器的一种安全策略。

同源：协议、域名、端口号 必须完全相同

违背同源策略就是跨域

4.2 如何解决跨域

4.2.1 JSONP

  1. JSONP是什么

    JSONP (JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求

  2. JSONP 怎么工作的？

    在网页有一些标签天生具有跨域能力，比如：img, link, iframe, script。

    JSONP就是利用 script 标签的跨域能力来发送请求的。

  3. JSONP的使用

    • 获取客户端发送过来的回调函数的名字

    • 得到要通过JSONP形式发送给客户端的数据

    • 根据前两步得到的数据，拼接出一一个函数调用的字符串

    • 把上一步拼接得到的字符串，响应给客户端的``标签进行解析执行

    🎗️ node服务器端代码

    const express = require('express')
const app = express()
const port = 3000//路由配置
app.get("/user",(req,res)=>{//1.获取客户端发送过来的回调函数的名字let fnName = req.query.callback;//2.得到要通过JSONP形式发送给客户端的数据const data = {name:'tom'}//3.根据前两步得到的数据，拼接出个函数调用的字符串let result = `${fnName}({name:"tom"})`//4.把上步拼接得到的字符串，响应给客户端的<script> 标签进行解析执行res.send(result);
})app.listen(port, () => {console.log(`Example app listening on port ${port}`)
})

    🎗️ 前端代码

    <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JSONP简单实现</title>
</head>
<body><button id="btn">点击发送请求</button><script>function getJsonpData(data) {console.log("获取数据成功")console.log(data) //{name:'tom'}}var btn = document.getElementById("btn");btn.onclick = function () {//创建script标签var script = document.createElement("script");script.src = 'http://localhost:3000/user?callback=getJsonpData';document.body.appendChild(script);script.onload = function () {document.body.removeChild(script)}}</script>
</body>
</html>

4.2.2 CORS

推荐文章

  • http://www.ruanyifeng.com/blog/2016/04/cors.html
  • https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

  1. CORS (Cross-Origin Resource Sharing), 跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 等请求。跨域资源共享标准新增了一组 HTTP 首部字段（响应头），允许服务器声明哪些源站通过浏览器有权限访问哪些资源

  2. CORS怎么工作的？

    CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行

  3. CORS 的使用

    // 设置响应头，允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

❤React-React 组件通讯

❤React-React 组件通讯

❤ React 组件通讯 组件通讯将教我们的内容&#xff1a; 能够使用道具接收数据W能够实现父子组件之间的通讯能够实现兄弟组件之间的通讯能够给组件添加道具校验能够说出生命周期常用的钩子函数能够知道高阶组件的作用 1、 组件通讯介绍 组件是独立且封闭的单元&#xff0c;…
阅读更多...
【初阶数据结构与算法】链表刷题之移除链表元素、反转链表、找中间节点、合并有序链表、链表的回文结构

【初阶数据结构与算法】链表刷题之移除链表元素、反转链表、找中间节点、合并有序链表、链表的回文结构

文章目录 一、移除链表元素思路一思路二 二、合并两个有序链表思路&#xff1a;优化&#xff1a; 三、反转链表思路一思路二 四、链表的中间节点思路一思路二 五、综合应用之链表的回文结构思路一&#xff1a;思路二&#xff1a; 一、移除链表元素 题目链接&#xff1a;https:…
阅读更多...
POI实现根据PPTX模板渲染PPT

POI实现根据PPTX模板渲染PPT

目录 1、前言 2、了解pptx文件结构 3、POI组件 3.1、引入依赖 3.2、常见的类 3.3、实现原理 3.4、关键代码片段 3.4.1、获取ppt实例 3.4.2、获取每页幻灯片 3.4.3、循环遍历幻灯片处理 3.4.3.1、文本 3.4.3.2、饼图 3.4.3.3、柱状图 3.4.3.4、表格 3.4.3.5、本地…
阅读更多...
计算机毕业设计Python+Neo4j知识图谱医疗问答系统 大模型 机器学习 深度学习 人工智能 大数据毕业设计 Python爬虫 Python毕业设计

计算机毕业设计Python+Neo4j知识图谱医疗问答系统 大模型 机器学习 深度学习 人工智能 大数据毕业设计 Python爬虫 Python毕业设计

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…
阅读更多...
【机器学习】机器学习中用到的高等数学知识-2.概率论与统计 (Probability and Statistics)

【机器学习】机器学习中用到的高等数学知识-2.概率论与统计 (Probability and Statistics)

概率分布&#xff1a;理解数据的分布特征&#xff08;如正态分布、伯努利分布、均匀分布等&#xff09;。期望和方差&#xff1a;描述随机变量的中心位置和离散程度。贝叶斯定理&#xff1a;用于推断和分类中的后验概率计算。假设检验&#xff1a;评估模型的性能和数据显著性。…
阅读更多...
Scala入门基础（17.1）Set集习题

Scala入门基础（17.1）Set集习题

一.选择题 二.实训 图书馆书籍管理系统相关的练习。内容要求&#xff1a; 1.创建一个可变 Set&#xff0c;用于存储图书馆中的书籍信息 &#xff08;假设书籍信息用字符串表示&#xff0c;如“Java编程思想”“Scala实战”等&#xff09; 2.添加两本新的书籍到图书馆集合中&a…
阅读更多...
移动端【01】面试系统的MVVM重构实践

移动端【01】面试系统的MVVM重构实践

基于MVVM的移动端面试系统重构实践&#xff1a;模块化设计与实现 一、项目背景 面试记录表系统在经过一年多的迭代后&#xff0c;代码质量问题日益突出。View和ViewModel代码均超过3000行&#xff0c;组件引用超过1000个&#xff0c;亟需进行架构重构。本文将详细介绍基于MVV…
阅读更多...
Springboot 启动端口占用如何解决

Springboot 启动端口占用如何解决

Springboot 启动端口占用如何解决 1、报错信息如下 *************************** APPLICATION FAILED TO START ***************************Description:Web server failed to start. Port 9010 was already in use.Action:Identify and stop the process thats listening o…
阅读更多...
基于Python+Django+Vue3+MySQL实现的前后端分类的商场车辆管理系统

基于Python+Django+Vue3+MySQL实现的前后端分类的商场车辆管理系统

项目名称&#xff1a;基于PythonDjangoVue3MySQL实现的前后端分离商场车辆管理系统 技术栈 开发工具&#xff1a;PyCharm、Visual Studio Code (VSCode)运行环境&#xff1a;Python 3.10、MySQL 8.0、Node.js 18技术框架&#xff1a;Django 5、Vue 3.4、Ant-Design-Vue 4.12 …
阅读更多...
ML 系列： 第 23 节 — 离散概率分布 （多项式分布）

ML 系列： 第 23 节 — 离散概率分布 （多项式分布）

目录 一、说明 二、多项式分布公式 2.1 多项式分布的解释 2.2 示例 2.3 特殊情况&#xff1a;二项分布 2.4 期望值 &#xff08;Mean&#xff09; 2.5 方差 三、总结 3.1 python示例 一、说明 伯努利分布对这样一种情况进行建模&#xff1a;随机变量可以采用两个可能的值&#…
阅读更多...
Openstack7--安装消息队列服务RabbitMQ

Openstack7--安装消息队列服务RabbitMQ

只需要在控制节点安装 安装RabbitMQ yum -y install rabbitmq-server 启动RabbitMQ并设置开机自启 systemctl start rabbitmq-server;systemctl enable rabbitmq-server 创建 rabbitmq 用户 并设置密码为 000000 rabbitmqctl add_user rabbitmq 000000 如果你不慎创错了…
阅读更多...
图像处理实验二(Image Understanding and Basic Processing)

图像处理实验二(Image Understanding and Basic Processing)

图像理解&#xff08;Image Understanding&#xff09;和基本图像处理&#xff08;Basic Image Processing&#xff09;是计算机视觉领域的重要组成部分。它们涉及从图像中提取有用信息、分析图像内容、并对其进行处理以达到特定目的。图像理解通常包括识别、分类和解释图像中的…
阅读更多...
第74期 | GPTSecurity周报

第74期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以找…
阅读更多...
Kafka - 启用安全通信和认证机制_SSL + SASL

Kafka - 启用安全通信和认证机制_SSL + SASL

文章目录 官方资料概述制作kakfa证书1.1 openssl 生成CA1.2 生成server端秘钥对以及证书仓库1.3 CA 签名证书1.4 服务端秘钥库导入签名证书以及CA根证书1.5 生成服务端信任库并导入CA根数据1.6 生成客户端信任库并导入CA根证书 2 配置zookeeper SASL认证2.1 编写zk_server_jass…
阅读更多...
除了 Postman，还有什么好用的 API 调试工具吗

除了 Postman，还有什么好用的 API 调试工具吗

尽管 Postman 拥有团队协作等实用特性&#xff0c;其免费版提供的功能相对有限&#xff0c;而付费版的定价可能对小团队或个人开发者而言显得偏高。此外&#xff0c;Postman 的访问速度有时较慢&#xff0c;这可能严重影响使用体验。 鉴于这些限制&#xff0c;Apifox 成为了一…
阅读更多...
matlab建模入门指导

matlab建模入门指导

本文以水池中鸡蛋温度随时间的变化为切入点&#xff0c;对其进行数学建模并进行MATLAB求解&#xff0c;以更为通俗地进行数学建模问题入门指导。 一、问题简述 一个煮熟的鸡蛋有98摄氏度&#xff0c;将它放在18摄氏度的水池中&#xff0c;五分钟后鸡蛋的温度为38摄氏度&#x…
阅读更多...
【C#设计模式(8)——过滤器模式(Adapter Pattern)】

【C#设计模式(8)——过滤器模式(Adapter Pattern)】

前言 滤液器模式可以很方便地实现对一个列表中的元素进行过滤的功能&#xff0c;能方便地修改滤器的现实&#xff0c;符合开闭原则。 代码 //过滤接口public interface IFilter{List<RefuseSorting> Filter(List<RefuseSorting> refuseList);}//垃圾分类public cla…
阅读更多...
事件循环 -- 资源总结(浏览器进程模型、事件循环机制、练习题)

事件循环 -- 资源总结(浏览器进程模型、事件循环机制、练习题)

!!! 理解学习&#xff0c;有问题/补充欢迎指出&#xff0c;随时改正 !!! 事件循环 一、进程与线程二、浏览器进程模型三、为什么会存在事件循环机制四、事件循环机制五、代码场景模拟事件循环机制六、练习题(明天补充...) 一、进程与线程 进程&#xff08;Process&#xff09;…
阅读更多...
九州未来再度入选2024边缘计算TOP100

九州未来再度入选2024边缘计算TOP100

随着数智化转型的浪潮不断高涨&#xff0c;边缘计算作为推动各行业智能化升级的重要基石&#xff0c;正在成为支持万物智能化的关键点。近日&#xff0c;德本咨询(DBC)联合《互联网周刊》(CIW)与中国社会科学院信息化研究中心(CIS)&#xff0c;共同发布《2024边缘计算TOP100》榜…
阅读更多...
使用 start-local 脚本在本地运行 Elasticsearch

使用 start-local 脚本在本地运行 Elasticsearch

警告&#xff1a;请勿将这些说明用于生产部署 本页上的说明仅适用于本地开发。请勿将此配置用于生产部署&#xff0c;因为它不安全。请参阅部署选项以获取生产部署选项列表。 使用 start-local 脚本在 Docker 中快速设置 Elasticsearch 和 Kibana 以进行本地开发或测试。 此设…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023