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

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

news 2025/9/16 7:47:32

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

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞！！！ 抽象现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...

编程新知 2025/9/14 13:50:41

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。核心优势对比基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2025/9/9 10:12:45

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。二、核心实现方案 1. 环境配置 （1）使用React Native…...

编程新知 2025/8/19 2:57:37

Python ROS2【机器人中间件框架】简介

销量过万TEEIS德国护膝夏天用薄款优惠券冠生园百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）

引言工欲善其事，必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后，我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集，就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

编程新知 2025/9/9 16:52:54