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

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

news 文章来源：https://blog.csdn.net/aaaa_aaab/article/details/141122520 2025/5/2 16:10:31

一、原生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

比特币8.12学习问题

疑问：什么是过滤，什么是offset 没有投钱的情况下，怎么用api 公式：单币分配金额总资金 / 2/ offset/选币数量，其中2 表示多空买入滑点（Slippage）是指在执行交易订单时，实际成交…...

编程日记 2024/8/13 15:58:15

解析 Vue 中的app.version、 app.provide 与 app.runWithContext ：原理、应用与实例剖析

目录 app.provide app.runWithContext app.version 非 VIP 用户能够通过积分下载博文资源 app.provide 在 Vue 3.0 中，app.provide充当着在应用层级提供全局共享数据或者服务的关键角色。 app.provide(key, value) 这一方法接收两个关键参数，其中 …...

编程日记 2024/8/13 15:57:14

Ubuntu server 命令行跑selenium

背景自动化测试都是在本机win上使用selenium 跑自动化脚本，但是服务器都是命令行的没有web界面依赖包部署 apt-get install zlib1g-dev zlib1g## 安装谷歌浏览器 ## 跳到底部,选择其他平台 https://www.google.com/chrome/## ubuntu #　dpkg -i google-chrome-stable_…...

编程日记 2024/8/13 15:56:13

刚刚，模糊测试平台SFuzz受到行业认可

近日，中国网络安全产业联盟（CCIA）正式发布了“2024年网络安全优秀创新成果大赛-安全严选专题赛”评选结果，开源网安模糊测试平台SFuzz凭借重大创新能力，得到组委会认可，获本次大赛创新产品优胜奖。 2024年网…...

编程日记 2024/8/13 15:54:07

数据结构与算法——DFS(深度优先搜索)

算法介绍： 深度优先搜索（Depth-First Search，简称DFS）是一种用于遍历或搜索树或图的算法。这种算法会尽可能深地搜索图的分支，直到找到目标节点或达到叶节点（没有子节点的节点），然后…...

编程日记 2024/8/13 15:51:03

基于lambda简化设计模式

写在文章开头本文将演示基于函数式编程的理念，优化设计模式中繁琐的模板化编码开发，以保证用尽可能少的代码做尽可能多的事，希望对你有帮助。 Hi，我是 sharkChili ，是个不断在硬核技术上作死的 java coder &#xff…...

编程日记 2024/8/13 15:50:01

揭秘! 经纬恒润“车路云一体化”方案研发服务背后的科技驱动力

随着高级别智能驾驶技术的飞速发展，自动驾驶与路侧基础设施协同合作已成为行业内的又一热点。我国率先提出以“车路云一体化”为核心的战略布局，国家政策密集出台，地方试点积极推进，行业标准日趋完善，智能网联汽车“车…...

编程日记 2024/8/13 15:46:56

Redis操作--RedisTemplate（二）StringRedisTemplate

一、介绍 1、简介由于存储在 Redis 中的 key 和 value 通常是很常见的 String 类型，Redis模块提供了 RedisConnection 和 RedisTemplate 的扩展，分是 StringRedisConnection 和 StringRedisTemplate，作为字符串操作的解决方案。通过源码…...

编程日记 2024/8/13 15:45:56

【自动驾驶】ROS中自定义格式的服务通信，含命令行动态传参（c++）

目录通信流程创建服务器端及客户端新建服务通讯文件修改service的xml及cmakelistCMakeLists.txt编辑 msg 相关配置编译消息相关头文件在cmakelist中包含头文件的路径在service包下编写service.cpp在client包下编写client.cpp测试运行查询服务的相关指令列出目前的所有服务&…...

编程日记 2024/8/13 15:44:54

优思学院｜PDCA和DMAIC之间如何选择？

在现代组织中，提升方法、质量和效率是企业追求卓越、保持竞争力的核心目标。在这条道路上，DMAIC（定义、测量、分析、改进、控制）和PDCA（计划、执行、检查、行动）被广泛应用于持续改进和问题解决。这两者虽然…...

编程日记 2024/8/13 15:42:52

一、原生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

相关文章：