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

逆旅行天涯2024-08-14 9:10

目录

一、原生Ajax

[1.1 Ajax简介](#1.1 Ajax简介)

[1.2 XML简介](#1.2 XML简介)

[1.3 AJAX 的特点](#1.3 AJAX 的特点)

[1.3.1 AJAX的优点](#1.3.1 AJAX的优点)

[1.3.2 AJAX 的缺点](#1.3.2 AJAX 的缺点)

[1.4 AJAX 的使用](#1.4 AJAX 的使用)

1.4.1AJAX的基本操作

1.4.2AJAX的传参

[1.4.3 AJAX的post请求及设置请求体](#1.4.3 AJAX的post请求及设置请求体)

[1.4.4 AJAX响应json数据](#1.4.4 AJAX响应json数据)

[1.4.5 AJAX请求超时与网络异常处理](#1.4.5 AJAX请求超时与网络异常处理)

[1.4.5 AJAX取消请求](#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发送get请求)

[3.2 axios发送请求通用方法](#3.2 axios发送请求通用方法)

四、跨域

[4.1 同源策略](#4.1 同源策略)

[4.2 如何解决跨域](#4.2 如何解决跨域)

[4.2.1 JSONP](#4.2.1 JSONP)

[4.2.2 CORS](#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）

javascript 复制代码 
//安装express     npm i express

//导入express
const express = require('express')
//创建应用对象
const app=express()

//创建路由规则
app.get('/server',(req,res)=>{
	res.send('你好')
})

//监听端口启动服务
app.listen(8000,()=>{
	console.log('服务器启动');
})

前端界面准备：

javascript 复制代码 
<!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>

页面如下：

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

javascript 复制代码 
<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的传参

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

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

javascript 复制代码 
xhr.open('POST','http://127.0.0.1:8000/server')
javascript 复制代码 
//设置请求体
xhr.send('a=1&b=2')
javascript 复制代码 
//设置请求头
xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded')
javascript 复制代码 
//设置自定义请求头
xhr.setRequestHeader('name','xiaozhang')


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

1.4.4 AJAX响应json数据

服务器端

javascript 复制代码 
//创建路由规则
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)
})

前端

javascript 复制代码 
result.innerHTML=JSON.parse(xhr.response).name

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

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

1.4.5 AJAX取消请求

javascript 复制代码 
//取消请求
xhr.abort()

1.4.5 AJAX重复发送请求解决

javascript 复制代码 
	<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创建前端界面

javascript 复制代码 
<!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发送请求

javascript 复制代码 
<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链接

javascript 复制代码 
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.3/axios.js"></script>

3.2 axios发送get请求

javascript 复制代码 
<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发送请求通用方法

javascript 复制代码 
//通用方法请求
				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){

})
相关推荐
前端Hardy9 分钟前
HTML&CSS： 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie39 分钟前
JS类型检测大全：从零基础到高级应用
开发语言·前端·javascript
Au_ust1 小时前
css:基础
前端·css
帅帅哥的兜兜1 小时前
css基础：底部固定，导航栏浮动在顶部
前端·css·css3
工业甲酰苯胺1 小时前
C# 单例模式的多种实现
javascript·单例模式·c#
yi碗汤园1 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称1 小时前
购物车-多元素组合动画css
前端·css
编程一生1 小时前
回调数据丢了？
运维·服务器·前端
丶21362 小时前
【鉴权】深入了解 Cookie：Web 开发中的客户端存储小数据
前端·安全·web
Missmiaomiao3 小时前
npm install慢
前端·npm·node.js
热门推荐
01如何才能让手机厂商主动拥抱华为，接入鸿蒙系统？02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【TC3xx芯片】TC3xx芯片电源管理系统PMS详解05基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测06【经验分享】Ubuntu22.04安装微信(linux官方版)07文件或文件夹名称中有空格如何批量去除08RAG 实践- Ollama+RagFlow 部署本地知识库09Windows10安装PCL1.14.0及点云配准10Macbook pro M1 安装Ubuntu教程