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

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

news 2025/11/7 9:56:03

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

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义（Task Definition&…...

编程新知 2025/11/6 16:27:24

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。目录【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

Spark 之入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室（Algorithms, Machines, and People Lab）开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目，8个月后成为Apache顶级项目，速度之快足见过人之处&…...

编程新知 2025/10/29 21:50:28

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容在 visual studio 2017 平台上，开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的综合运用 c#.net 知识，在 vs 2017 平台上，进行 ASP.NET 应用程序和简易网站的开发；初步熟悉开发一…...

编程新知 2025/11/1 2:29:10

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/10/31 16:39:39