当前位置：首页 > news >正文

【Ajax使用说明】Ajax、Axios以及跨域

news 2025/7/7 0:24:49

一、原生Ajax

1.1 Ajax简介

1.2 XML简介

1.3 AJAX 的特点

1.3.1 AJAX的优点

1.3.2 AJAX 的缺点

1.4 AJAX 的使用

1.4.1AJAX的基本操作

1.4.2AJAX的传参

1.4.3 AJAX的post请求及设置请求体

1.4.4 AJAX响应json数据

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

1.4.5 AJAX取消请求

1.4.5 AJAX重复发送请求解决

二、Ajax-jquery

2.1引入jQuery

2.2创建前端界面

2.3发送请求

三、Ajax-Axios

3.1引入axios的cdn链接

3.2 axios发送get请求

3.2 axios发送请求通用方法

四、跨域

4.1 同源策略

4.2 如何解决跨域

4.2.1 JSONP

4.2.2 CORS

一、原生Ajax

1.1 Ajax简介

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

1.2 XML简介

XML：可扩展标记语言
XML：被设计用来传输和存储数据
XML和HTML类似，不同点：HTML中都是预定义标签，XML中没有预定义标签，全是自定义标签，用来表示一些数据
现在已被JSON取代

1.3 AJAX 的特点

1.3.1 AJAX的优点

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

1.3.2 AJAX 的缺点

没有浏览历史，不能回退
存在跨域问题（同源）
SEO不友好（爬虫获取不到信息）

1.4 AJAX 的使用

1.4.1AJAX的基本操作

在开始使用前先创建两个文件test.html和test.js分别作为前端和后端。

首先通过nodejs+express搭建后端服务：（为方便测试可安装nodemon）

//安装express     npm i express//导入express
const express = require('express')
//创建应用对象
const app=express()//创建路由规则
app.get('/server',(req,res)=>{res.send('你好')
})//监听端口启动服务
app.listen(8000,()=>{console.log('服务器启动');
})

前端界面准备：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#result{width: 200px;height: 100px;border: solid 1px #90b;}</style></head><body><button>点击发送请求</button><div id="result"></div></body>
</html>

页面如下：

现要实现点击按钮后获取服务器请求数据，代码如下：

<script>//获取元素const btn=document.getElementsByTagName('button')[0]const result=document.getElementById('result')//绑定事件btn.onclick=function(){//创建对象const xhr=new XMLHttpRequest();//初始化  设置请求方法和urlxhr.open('GET','http://127.0.0.1:8000/server')//发送xhr.send()//事件绑定，处理服务端返回的结果//readystate 是xhr对象属性，状态为0,1,2,3,4（4为服务器返回所有结果）xhr.onreadystatechange=function(){//判断服务器返回了所有结果if(xhr.readyState===4){//判断状态码if(xhr.status>=200&&xhr.status<300){//xhr.status为响应状态码    xhr.statusText  状态字符串    xhr.response  响应体result.innerHTML=xhr.response}}}}</script>

1.4.2AJAX的传参

xhr.open('GET','http://127.0.0.1:8000/server?a=1&b=2')

1.4.3 AJAX的post请求及设置请求体

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

//设置请求体
xhr.send('a=1&b=2')

//设置请求头
xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded')

//设置自定义请求头
xhr.setRequestHeader('name','xiaozhang')//在服务器端加上
//接受自定义请求头
res.setHeader('Access-Control-Allow-Headers','*')

1.4.4 AJAX响应json数据

服务器端

//创建路由规则
app.get('/server',(req,res)=>{//设置响应头  允许跨域res.setHeader('Access-Control-Allow-Origin','*')//接受自定义请求头// res.setHeader('Access-Control-Allow-Headers','*')const data={name:'张',age:18}//将数据转化为字符串let str=JSON.stringify(data)res.send(str)
})

前端

result.innerHTML=JSON.parse(xhr.response).name

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

//超时设置  超过两秒取消请求xhr.timeout= 2000   //单位毫秒//超时回调xhr.ontimeout=function(){console.log('网络超时');}//网络异常回调xhr.onerror=function(){console.log('网络异常');}

1.4.5 AJAX取消请求

//取消请求
xhr.abort()

1.4.5 AJAX重复发送请求解决

	<script>//获取元素const btn=document.getElementsByTagName('button')[0]const result=document.getElementById('result')//是否正在发送AJAX请求let isSending=false//绑定事件btn.onclick=function(){//判断标识变量if(isSending){xhr.abort()}//创建对象const xhr=new XMLHttpRequest();isSending=true		//初始化  设置请求方法和urlxhr.open('GET','http://127.0.0.1:8000/server')//设置请求头xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded')// xhr.setRequestHeader('name','xiaozhang')//发送xhr.send('a=1&b=2')//事件绑定，处理服务端返回的结果//readystate 是xhr对象属性，状态为0,1,2,3,4（4为服务器返回所有结果）xhr.onreadystatechange=function(){//判断服务器返回了所有结果if(xhr.readyState===4){isSending=false//判断状态码if(xhr.status>=200&&xhr.status<300){//xhr.status为响应状态码    xhr.statusText  状态字符串    xhr.response  响应体//获取字符串中name值result.innerHTML=JSON.parse(xhr.response).name}}}}</script>

二、Ajax-jquery

2.1引入jQuery

百度输入bootcdn搜索，输入jQuery复制cdn链接进行引入

2.2创建前端界面

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#result{width: 200px;height: 100px;border: solid 1px #90b;}</style><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script></head><body><h2>jQuery发送请求</h2><button>GET</button><button>post</button><button>通用型方法</button><div id="result"></div></body><script></script>
</html>

2.3发送请求

<script>//绑定事件//发送get请求$('button').eq(0).click(function(){//发送请求$.get('http://127.0.0.1:8000/server',{a:100,b:20},function(data){console.log(data);},'json')  //若加上'json'代表返回数据为json格式})//发送post请求$('button').eq(1).click(function(){//发送请求$.post('http://127.0.0.1:8000/server',{a:100,b:20},function(data){console.log(data);},'json')  //若加上'json'代表返回数据为json格式})//通用方法发送请求$('button').eq(2).click(function(){//发送请求$.ajax({url:'http://127.0.0.1:8000/server',//参数data:{a:100,b=200},//方法type:'GET',//响应体结果dataType：'json'.//超时时间timeout：2000//成功回调success:function(data){console.log(data);}//失败回调error：function(data){console.log(data);}})})</script>

三、Ajax-Axios

3.1引入axios的cdn链接

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

3.2 axios发送get请求

<script>//获取元素const btn=document.getElementsByTagName('button')const result=document.getElementById('result')//配置 baseURLaxios.default.baseURL='http://127.0.0.1:8000'//绑定事件btn[0].onclick=function(){//get请求axios.get('/server',{//参数params:{id:100},}).then((data)=>{console.log(data);})}</script>

3.2 axios发送请求通用方法

//通用方法请求btn[2].onclick=function(){axios({method:'GET'url:'/server',params:{id:10},//请求体参数data:{username:admin,password:admin}}).then((data)=>{console.log(data);})}

四、跨域

4.1 同源策略

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

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

违背同源策略就是跨域

4.2 如何解决跨域

4.2.1 JSONP

JSONP是什么

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

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

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

JSONP的使用

动态的创建一个script标签

var script = document.createElement("script");

设置script的src，设置回调函数

script.src = "http://locallhost:3000/textAJAX?callback=abc"

4.2.2 CORS

【Ajax使用说明】Ajax、Axios以及跨域

目录一、原生Ajax 1.1 Ajax简介 1.2 XML简介 1.3 AJAX 的特点 1.3.1 AJAX的优点 1.3.2 AJAX 的缺点 1.4 AJAX 的使用 1.4.1AJAX的基本操作 1.4.2AJAX的传参 1.4.3 AJAX的post请求及设置请求体 1.4.4 AJAX响应json数据 1.4.5 AJAX请求超时与网络异常处理 1.4.5 AJ…...

编程日记 2024/8/13 16:30:02

IIS网站搬家工具WebDeploy（把网站迁移去另一台服务器）

如果不能克隆镜像，又想快速迁移，请保证新服务器和原服务器的文件目录结构一致，各种程序的安装路径一致，包括python的安装路径、mysql的秘密防火墙设置等网站迁移去另一台服务器，如果重新设置IIS，还是有…...

编程日记 2024/8/13 16:29:01

SQL Server 2022的游标

《SQL Server 2022从入门到精通（视频教学超值版）》图书介绍-CSDN博客《SQL Server 2022从入门到精通（视频教学超值版）（数据库技术丛书）》(王英英)【摘要书评试读】- 京东图书 (jd.com) 游标是SQL Serv…...

编程日记 2024/8/13 16:27:59

「11月·香港」第三届人工智能、人机交互和机器人国际学术会议（AIHCIR 2024）

第三届人工智能、人机交互和机器人国际学术会议（AIHCIR 2024）组委会热忱地邀请您参与本届大会。本届大会旨在聚集领先的科学家、研究人员和学者，共同交流和分享在人工智能、人机交互和机器人各个方面的经验和研究成果，为研究人员、…...

编程日记 2024/8/13 16:26:59

【redis】springboot 用redis stream实现MQ消息队列考虑异常ack重试场景

redis stream是redis5引入的特性，一定程度上借鉴了kafka等MQ的设计，部署的redis版本必须 > 5 本文主要讲的是思路，结合简单的源码分析（放心，无需深入大量源码）；讲述在redis stream文档缺乏&a…...

编程日记 2024/8/13 16:25:57

初识IDEA

一、IDEA简介 IDEA 全称 IntelliJ IDEA，是 JAVA编程语言开发的集成环境。IntelliJ 在业界被公认为最好的 java开发⼯具之⼀，尤其在智能代码助⼿、代码⾃动提示、重构、J2EE⽀持、Ant、JUnit、CVS整合、代码审查⽅⾯。 JetBrains官⽹ : JetBrains: Esse…...

编程日记 2024/8/13 16:24:56

zigbee笔记：十、ZStack（2.3.0-1.4.0）的OSAL使用分析

zigbee笔记：九中，我们已经学会了利用模板，定制自己的个性开发工程，本文为协议栈（ZStack-CC2530-2.3.0-1.4.0）代码使用分析笔记，来进一步掌握协议栈的使用。一、协议栈使用知识点 1、协调器、路…...

编程日记 2024/8/13 16:23:55

SpringBoot响应式编程(1)Reactor核心

一、概述 1.1介绍 Reactor 是一个用于JVM的完全非阻塞的响应式编程框架，Webflux 底层使用的也是该框架，其通过流的方式实现了异步相应，具备高效的需求管理（即对 “背压（backpressure）”的控制&#xff09…...

编程日记 2024/8/13 16:22:54

Java后端处理前端字符串与 JSON 数据：安全拼接与转义技巧

在现代 Web 开发中，前后端数据交互是家常便饭。我们经常需要处理前端传递的字符串和 JSON 数据，并在后端进行加工处理后发送到其他服务。本文将以 Spring Boot 为例，探讨如何安全地拼接字符串和 JSON 数据，并介绍如何避免 JSON 特…...

编程日记 2024/8/13 16:19:50

一文搞懂bfs，dfs和高级图算法

你以为BFS（广度优先搜索）和DFS（深度优先搜索）这两种基础算法，简单到小学数学就能搞定？但真的是这样吗？很多人都这么认为，但真的对吗？今天，我们不只是走马观花…...

编程日记 2024/8/13 16:18:45

【Rust光年纪】Rust异步编程利器：异步DNS、高性能Web服务器一网打尽

构建高效网络应用必备：解读Rust异步编程神器前言 Rust 是一种快速流行的系统编程语言，它以其内存安全和并发性能而闻名。在 Rust 生态系统中，有许多优秀的库和框架可以帮助开发者构建高性能、可靠的应用程序。本文将介绍几个在 Rust 中备受…...

编程日记 2024/8/13 16:17:42

文章目录预处理菜单结构体主函数函数声明栈操作功能实现预处理 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include<windows.h> #include<conio.h>#define OVERFLOW -2 #define FALSE 0 #define TRUE 1 #define OK 1 …...

编程日记 2024/8/13 16:15:39

我们如何在centos上部署批量管理工具ansible

1）我们先准备环境、设备 #我们准备一台服务机 （192.168.61.140） #然后准备几天客户机（192.168.61.141 192.168.61.142）这里我们准备两台2)然后我们在客服务机里面添加域名 vi /etc/hosts #添加如下内容 192.…...

编程日记 2024/8/13 16:13:35

如何评估前端代码审查培训计划的有效性？

评估前端代码审查培训计划的有效性可以通过以下方法： 培训前后测试： 在培训前后对学员进行测试，比较结果以评估知识增长。学员反馈： 通过问卷调查、访谈或开放式反馈收集学员对培训内容、方式和效果的看法。参与度&#xff1a…...

编程日记 2024/8/13 16:10:31

使用nvm切换Node.js版本

一、安装nvm nvm（Node Version Manager）是一个用于管理Node.js版本的工具，它允许你在同一台机器上安装和切换多个Node.js版本。 1.安装nvm https://github.com/coreybutler/nvm-windows 访问以上链接到github去下载点击releases 下载下图…...

编程日记 2024/8/13 16:05:26

x264 编码器 PSNR算法源码分析

PSNR PSNR（Peak Signal-to-Noise Ratio，峰值信噪比）是一种常用的图像质量评价指标，用于衡量图像或视频的清晰度和质量。PSNR是基于信号的最大可能功率与影响信号的噪声功率之间的比率。在图像处理领域，PSNR通常用来评估图像压缩或图像增强算法的效果。 PSNR的计算公式是…...

编程日记 2024/8/13 16:04:25

开源web版3D展示工具Online3DViewer

Online3DViewer是一个免费且开源的Web解决方案，它允许用户在浏览器中直接预览和探索3D模型。以下是关于Online3DViewer的详细介绍： 一、基本概述定义：Online3DViewer是一个在线3D模型查看器，支持多种3D文件格式，用…...

编程日记 2024/8/13 16:03:23

白骑士的Matlab教学实战项目篇 4.2 信号与图像处理项目

系列目录上一篇：白骑士的Matlab教学实战项目篇 4.1 数据分析与可视化信号处理和图像处理是 MATLAB 的重要应用领域，广泛应用于医学、工程、科学研究等领域。以下内容将介绍信号滤波与频域分析、图像增强与分割的基本概念和方法，并通过一个…...

编程日记 2024/8/13 16:02:22

复现、并改进open-mmlab的mmpose详细细节

复现open-mmlab的mmpose详细细节 1.配置环境2.数据处理3.训练4.改进mmpose4.1 快速调试技巧4.2 快速定位4.3 改进backbone4.3.1 使用说明4.3.2 改进案例4.3.2.1 复现mmpose原配置文件4.3.2.2 复现开源项目4.3.2.3 修改配置文件4.3.2.4 修改新模型 4.4 添加auxiliary_head4.4.1 …...

编程日记 2024/8/13 16:01:21

编写兼容Python2.x与3.x代码

编写兼容Python2.x与3.x代码当我们正处于Python2.x到Python3.x的过渡期时，你可能想过是否可以在不修改任何代码的前提下能同时运行在Python2和3中。这看起来还真是一个合理的诉求，但如何开始呢？哪些Python2代码在3.x解释器执行时容易出状况…...

编程日记 2024/8/13 16:00:19

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/6/17 5:30:27

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 （一）实时滤波与参数调整基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。平滑处理&…...

编程新知 2025/7/5 12:24:34

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎跨模态语义对齐通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...

编程新知 2025/7/4 19:13:43

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了估计有） 刷机程序和镜像就不提供了。要刷的时…...

编程新知 2025/7/5 16:10:18

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/6/25 23:57:55

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源论文&a…...

编程新知 2025/7/4 18:44:06

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时，性能会显著下降。以下是优化思路和简易实现方法： 一、核心优化思路减少 JOIN 数量数据冗余：添加必要的冗余字段（如订单表直接存储用户名）合并表：将频繁关联的小表合并成…...

编程新知 2025/7/6 1:12:52

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题，说是客户的导入文件模版想支持部分导入内容的下拉选，于是我就找了easyexcel官网寻找解决方案，并没有找到合适的方案，没办法只能自己动手并分享出来，针对Java生成Excel下拉菜单时因选项过多导…...

编程新知 2025/7/5 16:37:51

在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南

在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点（小球运动模拟）6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...

编程新知 2025/6/15 14:34:31

flow_controllers

关键点： 流控制器类型： 同步（Sync）：发布操作会阻塞，直到数据被确认发送。异步（Async）：发布操作非阻塞，数据发送由后台线程处理。纯同步（PureSync…...

编程新知 2025/7/6 21:45:21

一、原生Ajax

1.1 Ajax简介

1.2 XML简介

1.3 AJAX 的特点

1.3.1 AJAX的优点

1.3.2 AJAX 的缺点

1.4 AJAX 的使用

1.4.1AJAX的基本操作

1.4.2AJAX的传参

1.4.3 AJAX的post请求及设置请求体

1.4.4 AJAX响应json数据

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

1.4.5 AJAX取消请求

1.4.5 AJAX重复发送请求解决

二、Ajax-jquery

2.1引入jQuery

2.2创建前端界面

2.3发送请求

三、Ajax-Axios

3.1引入axios的cdn链接

3.2 axios发送get请求

3.2 axios发送请求通用方法

四、跨域

4.1 同源策略

4.2 如何解决跨域

4.2.1 JSONP

4.2.2 CORS

相关文章：