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

已于 2024-08-12 12:10:39 修改
阅读量402 收藏 2
点赞数 11
分类专栏： 前端学习 文章标签： ajax 前端 javascript
于 2024-08-12 12:09:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaaa_aaab/article/details/141122520
版权

目录

一、原生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. 可以无刷新页面与服务端进行通信
  2. 允许你根据用户事件来更新部分页面内容

1.3.2 AJAX 的缺点

  1. 没有浏览历史，不能回退
  2. 存在跨域问题（同源）
  3. 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();
			//初始化  设置请求方法和url
			xhr.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		
			//初始化  设置请求方法和url
			xhr.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')
				//配置 baseURL
				axios.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

  1. JSONP是什么

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

  2. JSONP 怎么工作的？

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

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

  3. JSONP的使用

    • 动态的创建一个script标签
    var script = document.createElement("script");
    • 设置script的src，设置回调函数
    script.src = "http://locallhost:3000/textAJAX?callback=abc"

4.2.2 CORS

推荐阅读：

  1. CORS是什么？

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

  2. CORS怎么工作的？

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

  3. CORS 的使用

    主要是服务端的设置：

    rounter.get("/testAJAX",function(req, res){

})
逆旅行天涯
关注
  • 11
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax中axios使用方法及跨域请求
LiHang1234567777的博客
08-16 455
1.get（和在jQuery中的方法类似） 效果如下： 2.使用post（简单表单验证） 服务器代码： 二、封装一个自己的Ajax 自己封装也是要按照那4步骤写只不过就是把他们封装到一个函数里面js代码： 三、跨域请求 简介：浏览器均默认开启了同源策略，它指Ajax请求所在的页面和被请求的页面在域名、端口均相同才能被访问，否则会提示如下错误1.JSONP解决方案和CROS解决方案JSONP解决方案（JSONP 不是真正的AJAX请求，是利用script的src可可以跨域的特性，动态
为什么axios请求三方API跨域，ajax正常
qq_50408198的博客
04-01 1031
在vue项目组axios请求高德的api报跨域，用ajax请求正常 这是为什么呢？？？ 然后我新建一个html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-
AXIOS发送AJAX及跨域问题
qq_52788258的博客
10-30 494
AXIOS发送AJAX及跨域问题解决方案
Ajax----跨域请求 axios
m0_56381561的博客
08-16 376
axios。
Axios解决跨域问题（Vue2版）
热门推荐
weixin_43565079的博客
09-13 6万+
什么是跨域 首先需要了解到浏览器的同源策略，同源策略是最核心也是最基本的安全功能，缺少同源策略浏览器的正常功能可能会受到影响。同源策略会阻止一个域的javascript脚本和另外一个域的能容进行交互。同源（即指在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。 当一个请求url的协议、域名、端口三个之间任意一个与当前页面url不同即为跨域。 Vue中用Axios解决跨域问题 配置代理可解决使用Axios不能直接进行跨域...
Ajax&axios、fetch与跨域请求
xxxxxii的博客
07-13 512
Ajax 一、初始Ajax 1.Ajax是什么 Ajax是Asychronous Javascript and XML（异步JavaScript的XML）的缩写。 Ajax中的异步：可以异步的向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情，知道成功获取响应后，浏览器才开始处理响应数据。 XML（可扩展标记语言）：是前后端数据通信时传输数据的一种格式；XML现在已经不怎么用了，现在比较常用的是JSON。 Ajax其实就是浏览器与服务器之间的一种异步通信方式；使用Ajax可以在不
Ajax:原生+Jquery+Axios+CORS跨域
Lyajpunov的博客
12-17 1209
一、Ajax简介 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 二、学习前的准备 需要对js的基础语法有一定的了解 三、后端的准备工作 这里我们不使用Django这种比较大的框架来实现，我们只用Node.JS,可以下载安装一下这个框架express，再安装一个插件nodemon 在当前目录下执行下面的命令 npm init --yes npm i express 在当前的目录下创建一个app.js // 引入express const express = require('ex
何为Ajax和Axios以及二者区别？
HHR_hr的博客
06-22 1423
异步JavaScript和XML。
axios请求三方API跨域，用原生的ajax正常
u013994400的博客
11-09 1206
用axios 请求第三方接口会报跨域，但是用原生的ajax却是可以正常访问的 当时考虑是跨域问题，用到了proxyTable，是可以的，但是在生产环境却又出现了问题，找nginx配置相关 proxy_pass 这里是个大坑，我的配置是 // ‘/api’:{ // target: ‘http://127.0.0.1:8997’, // changeOrigin:true, // }, 奈何这样配置的意思是转发到该服务器的8997端口，而不是我安装的第三方应用内的接口，思来想去，还是得直接调用htt
完美解决axios跨域请求出错的问题
08-28
axios跨域请求出错的问题可以通过添加Access-Control-Allow-Origin头信息、配置Spring MVC拦截器、使用axios的withCredentials选项或使用代理服务器等方法解决。在开发中，需要根据实际情况选择合适的解决方案，以便...
Springmvc ajax跨域请求处理方法实例详解
08-29
SpringMVC AJAX 跨域请求处理方法实例详解 本文主要介绍了 SpringMVC AJAX 跨域请求处理方法实例详解，解决了 AJAX 跨域请求问题。下面是详细的知识点解释： 一、什么是 AJAX 跨域请求？ AJAX 跨域请求是指在不同...
Vue Ajax跨域请求实例详解
08-30
Vue Ajax跨域请求实例详解 在本篇文章中，我们将对 Vue Ajax 跨域请求实例进行详细的介绍，主要涵盖了 Vue Ajax 跨域请求的配置、实现和注意事项。 一、配置跨域请求 在 Vue 项目中，实现跨域请求需要在 config/...
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
本篇文章将详细解释如何在Vue项目中配置axios，使其在发送Ajax请求时自动携带cookie。 首先，axios在默认情况下不会自动将浏览器的cookie添加到请求头中。这是因为跨域请求（CORS）的安全策略限制，防止恶意网站...
使用activiti流程实名认证、ajax跨域.rar
08-09
在实现过程中，前端需要配置Ajax请求，例如使用jQuery的`$.ajax`或`axios`库，设置`xhrFields`、`headers`、`withCredentials`等属性，以适应不同的跨域策略。同时，后端需要对HTTP响应头进行相应设置，允许跨域请求...
【漏洞复现】某赛通电子文档安全管理系统 PolicyAjax SQL注入漏洞
siu~
08-08 466
某赛通电子文档安全管理系统PolicyAjax接口处存在sql注入漏洞，攻击者除了可以利用 SQL 注入漏洞获取数据库中的信息（例如，管理员后台密码、站点的用户个人信息）之外，甚至在高权限的情况可向服务器中写入木马，进一步获取服务器系统权限。
前端（三）：Ajax
qq_52200849的博客
08-06 557
Asynchronous JavaScript And XML，简称Ajax，是异步的JavaScript和XML。，通过Ajax可以给服务器发送请求，并获取服务器响应的数据。：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等。
ajax part4
最新发布
E___V___E的博客
08-08 232
这段思路很好，axios自带生成json文件和解析JSON文件，请求的时候参数是对象类型，但是提交给服务器axios会自动转换为JSON类型，响应返回的时候相反，自动解析JSON类型。使用modal其实就是一个大一点的提示框，但是对于提示信息不需要这么大。获取图像对象，准备数据，上传到服务器，将返回的URL网址渲染到页面上。服务器报错，可以检查一下fd的属性名是不是和要求的data属性名相同。data的data有用户数据。form-data表单数据。for：关联对象的ID。
JSON + AJAX + ThreadLocal + 文件上传下载
qq_65186476的博客
08-07 275
JSON + AJAX + ThreadLocal + 文件上传下载
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值