六、jQuery 中的 AJAX && 跨域问题

其他 2021-04-06 10:31:23 阅读次数: 0

第 2 章：jQuery 中的 AJAX

官方中文文档：https://jquery.cuishifeng.cn/jQuery.Ajax.html

2.1 get 请求

$.get(url, [data], [callback], [type])

  • url:请求的 URL 地址。
  • data:请求携带的参数。
  • callback:载入成功时回调函数。
  • type:设置返回内容格式，xml, html, script, json, text, _default。

2.2 post 请求

$.post(url, [data], [callback], [type])

  • url:请求的 URL 地址。
  • data:请求携带的参数。
  • callback:载入成功时回调函数。
  • type:设置返回内容格式，xml, html, script, json, text, _default。

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery发送AJAX请求</title>
		<link rel="stylesheet" href="../bootstrap-4.6.0-dist/css/bootstrap.min.css">
	</head>
	<body>
		
		<div class="container">
			<h2 class="page-header">jQuery发送AJAX请求</h2>
			<button type="button" class="btn btn-primary">GET</button>
			<button type="button" class="btn btn-danger">POST</button>
			<button type="button" class="btn btn-info">通用型方法</button>
			
		</div>
		<script src="../bootstrap-4.6.0-dist/js/jquery.min.js"></script>
		<script src="../bootstrap-4.6.0-dist/js/bootstrap.bundle.min.js"></script>
		<script type="text/javascript">
			$('button').eq(0).click(function() {
     
     
				$.get('http://127.0.0.1:8000/jquery-server', {
     
     a: 100,name: 'zep'}, function(data) {
     
     
					console.log(data)
				}, 'json')
			})
			
			$('button').eq(1).click(function() {
     
     
				$.post('http://127.0.0.1:8000/jquery-server', {
     
     a: 100,name: 'zep'}, function(data) {
     
     
					console.log(data)
				}, 'json')
			})
			
			$('button').eq(2).click(function() {
     
     
				$.ajax({
     
     
					// url
					url: 'http://127.0.0.1:8000/jquery-server',
					// 参数
					data: {
     
     a:100, name: 'zep'},
					// 请求类型
					type: 'GET',
					// 响应体结果
					dataType: 'json',
					// 成功的回调
					success: function(data) {
     
     
						console.log(data)
					},
					// 超时时间
					timeout: 2000,
					// 失败的回调
					error: function() {
     
     
						console.log('出错啦！！！')
					},
					// 头信息
					headers: {
     
     
						c: 300,
						d: 400
					}
					
				})
			})
		</script>
	</body>
</html>

server.js:

// 1. 引入express
const express = require('express')


// 2. 创建应用对象
const app = express()

// 3. 创建路由规则
app.get('/server', (request, response) => {
    
    
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*')


	// 设置响应体
	response.send('hello ajax！！！')
})

// all 可以接收任意类型的请求
app.all('/server', (request, response) => {
    
    
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*')

	// 允许前端post请求 自定义请求头名称
	response.header('Access-Control-Allow-Headers', '*');

	// 设置响应体
	response.send('hello ajax post')
})

app.all('/json-server', (request, response) => {
    
    
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*')

	// 允许前端post请求 自定义请求头名称
	response.header('Access-Control-Allow-Headers', '*');

	// 响应一个数据
	const data = {
    
    
		name: 'zep'
	};

	// 对 对象进行字符串转换
	let str = JSON.stringify(data)

	// 设置响应体,send方法只接收字符串类型的参数
	response.send(str)
})

// 专门针对IE缓存
app.get('/ie', (request, response) => {
    
    
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*')


	// 设置响应体
	response.send('hello ie3!!!')
})




// 延时响应
app.get('/delay', (request, response) => {
    
    
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*')
	// 设置定时器，当客户端发起请求时，服务端延迟3s再将响应数据发给客户端
	setTimeout(() => {
    
    
		// 设置响应体
		response.send('hello 延迟响应3秒!!!')
	}, 3000)


})



// jQuery服务
app.all('/jquery-server', (request, response) => {
    
    
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*')
	// 允许前端post请求 自定义请求头名称
	response.header('Access-Control-Allow-Headers', '*');

	// 设置响应体
	const data = {
    
    
		name: 'zep'
	}
	// response.send('hello jquery ajax!')
	response.send(JSON.stringify(data))
})


// 4. 监听端口 启动服务
app.listen(8000, () => {
    
    
	console.log('服务已经启动，8000端口监听中...')
})

在这里插入图片描述

第3章： axios

官方中文文档：http://www.axios-js.com/zh-cn/docs/

使用方法：

第一种：

cdn引入： https://www.bootcdn.cn/axios/
在这里插入图片描述

第二种：

npm install axios

代码演示：

在这里插入图片描述

axios.html :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios 发送ajax请求</title>
	</head>
	<body>
		<button>GET</button>
		<button>POST</button>
		<button>AJAX</button>

		<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
		<script>
			const btns = document.querySelectorAll('button');

			// 配置baseURL
			axios.defaults.baseURL = 'http://127.0.0.1:8000'
			btns[0].onclick = function() {
     
     

				// GET 请求
				axios.get('/axios-server', {
     
     
					// url参数
					params: {
     
     
						id: 100,
						vip: 7
					},

					// 请求头信息
					headers: {
     
     
						name: 'zep',
						age: 22
					}
				}).then(value => {
     
     
					console.log(value)
				})
			}

			btns[1].onclick = function() {
     
     
				// POST请求
				axios.post('/axios-server',
					// 请求体
					{
     
     
						username: 'admin',
						password: 'admin'
					}, {
     
     
						params: {
     
     
							id: 200,
							vip: 10
						},
						// 请求头信息
						headers: {
     
     
							name: 'zep111',
							age: 22
						}

					})
			}
			btns[2].onclick = function() {
     
     
				axios({
     
     
					// 请求方法
					method: 'POST',
					// url
					url: '/axios-server',
					// url参数
					params: {
     
     
						vip: 20,
						level: 30
					},
					//头信息
					headers: {
     
     
						a: 100,
						b: 200
					},
					//请求体参数
					data: {
     
     
						username: 'admin',
						password: 'admin'
					}
				}).then(response => {
     
     
					console.log(response)
					// 响应状态码
					console.log(response.status)
					// 响应状态字符串
					console.log(response.statusText)
					// 响应头信息
					console.log(response.headers)
					// 响应体
					console.log(response.data)
				})
			}
		</script>
	</body>
</html>

server.js:

// 1. 引入express
const express = require('express')


// 2. 创建应用对象
const app = express()

// 3. 创建路由规则
app.get('/server', (request, response) => {
    
    
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*')


	// 设置响应体
	response.send('hello ajax！！！')
})

// all 可以接收任意类型的请求
app.all('/server', (request, response) => {
    
    
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*')

	// 允许前端post请求 自定义请求头名称
	response.header('Access-Control-Allow-Headers', '*');

	// 设置响应体
	response.send('hello ajax post')
})

app.all('/json-server', (request, response) => {
    
    
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*')

	// 允许前端post请求 自定义请求头名称
	response.header('Access-Control-Allow-Headers', '*');

	// 响应一个数据
	const data = {
    
    
		name: 'zep'
	};

	// 对 对象进行字符串转换
	let str = JSON.stringify(data)

	// 设置响应体,send方法只接收字符串类型的参数
	response.send(str)
})

// 专门针对IE缓存
app.get('/ie', (request, response) => {
    
    
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*')


	// 设置响应体
	response.send('hello ie3!!!')
})




// 延时响应
app.get('/delay', (request, response) => {
    
    
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*')
	// 设置定时器，当客户端发起请求时，服务端延迟3s再将响应数据发给客户端
	setTimeout(() => {
    
    
		// 设置响应体
		response.send('hello 延迟响应3秒!!!')
	}, 3000)


})



// jQuery服务
app.all('/jquery-server', (request, response) => {
    
    
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*')
	// 允许前端post请求 自定义请求头名称
	response.header('Access-Control-Allow-Headers', '*');

	// 设置响应体
	const data = {
    
    
		name: 'zep'
	}
	// response.send('hello jquery ajax!')
	response.send(JSON.stringify(data))
})

// axios服务
app.all('/axios-server', (request, response) => {
    
    
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*')
	// 允许前端post请求 自定义请求头名称
	response.header('Access-Control-Allow-Headers', '*');

	// 设置响应体
	const data = {
    
    
		name: 'zep-axios'
	}
	// response.send('hello jquery ajax!')
	response.send(JSON.stringify(data))
})


// 4. 监听端口 启动服务
app.listen(8000, () => {
    
    
	console.log('服务已经启动，8000端口监听中...')
})

第4章： fetch()发送Ajax请求：

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch

在这里插入图片描述
在这里插入图片描述

第 45章：跨域

3.1 同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。

  • 同源： 协议、域名、端口号 必须完全相同。
  • 违背同源策略就是跨域。
代码演示：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
	</head>
	<body>
		<h1>我爱ajax</h1>
		<button>点击获取用户数据</button>
		
		
		<script>
			const btn = document.querySelector('button')
			btn.onclick = function () {
     
     
				const xhr = new XMLHttpRequest();
				// 这里因为时满足同源策略的，所以url可以简写
				xhr.open('GET', '/data');
				// 发送
				xhr.send();
				xhr.onreadystatechange = function () {
     
     
					if(xhr.readyState === 4) {
     
     
						if(xhr.status >= 200 && xhr.status < 300) {
     
     
							console.log(xhr.response);
						}
					}
				}
				
				
			}
			
		</script>
	</body>
</html>

server.js :

const express = require('express')

const app = express();

app.get('/home', (request, response) => {
    
    
	// 响应一个页面
	response.sendFile(__dirname + '/index.html');
	
});


app.get('/data', (request, response) => {
    
    
	response.send('用户数据。。。')
})


app.listen(9000, () => {
    
    
	console.log('服务已经启动。。。，监听9000端口！！！')
})

在这里插入图片描述
在这里插入图片描述

3.2 如何解决跨域

3.2.1 JSONP
  1. JSONP 是什么 JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明 才智开发出来，只支持 get 请求。
  2. JSONP 怎么工作的？ 在网页有一些标签天生具有跨域能力，比如：img link iframe script。
    JSONP 就是利用 script 标签的跨域能力来发送请求的。
  3. JSONP 的使用
    1.动态的创建一个 script 标签
var script = document.createElement("script");
  1. 设置 script 的 src，设置回调函数
script.src = "http://localhost:3000/testAJAX?callback=abc"; 
function abc(data) {
    
     
	alert(data.name); 
};
  1. 将 script 添加到 body 中
document.body.appendChild(script);

4.服务器中路由的处理

router.get("/testAJAX" , function (req , res) {
    
     
	console.log("收到请求"); 
	var callback = req.query.callback; 
	var obj = {
    
    
		name:"孙悟空", 
		age:18 
	}
	res.send(callback+"("+JSON.stringify(obj)+")"); 
});
  1. jQuery 中的 JSONP
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body> <button id="btn">按钮</button>
		<ul id="list"></ul>
		<script type="text/javascript" src="./jquery-1.12.3.js"></script>
		<script type="text/javascript">
			window.onload = function() {
     
     
				var btn = document.getElementById('btn') btn.onclick = function() {
     
     
					$.getJSON("http://api.douban.com/v2/movie/in_theaters?callback=?", function(data) {
     
     
						console.log(data); //获取所有的电影的条目 var subjects = data.subjects; //遍历电影条目
						for (var i = 0; i < subjects.length; i++) {
     
     
							$("#list").append("<li>" + subjects[i].title + "<br />" + "<img src=\"" + subjects[i]
								.images.large + "\" >" + "</li>");
						}
					});
				}
			}
		</script>
	</body>
</html>

代码演示

在这里插入图片描述

2. 原生jsonp实践：

在这里插入图片描述

在这里插入图片描述

3. jQuery 发送 jsonp实践：

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3.2.2 CORS

在这里插入图片描述

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

  1. CORS 是什么？
    CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方 案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些 源站通过浏览器有权限访问哪些资源
  2. CORS 怎么工作的？
    CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应 以后就会对响应放行。
  3. CORS 的使用 主要是服务器端的设置：
router.get("/testAJAX" , function (req , res) {
    
    //通过 res 来设置响应头，来允许跨域请求 
//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000"); 
res.set("Access-Control-Allow-Origin","*"); 
res.send("testAJAX 返回的响应"); })

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44827418/article/details/115177296
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022