Ajax-Day03

最新推荐文章于 2024-07-05 22:58:38 发布

Naiewiew

最新推荐文章于 2024-07-05 22:58:38 发布

阅读量113

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weiweianx/article/details/115178884

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JSONP在非同源服务器间请求数据，包括优化的jsonp代码实例，并探讨了CORS跨域资源共享原理。同时，针对服务器端解决方案，涉及cookie和withCredentials属性，以及$.ajax()方法的使用和参数设置。

摘要由CSDN通过智能技术生成

Ajax-Day03

一、访问非同源数据 JSONP

案例
s1的03html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03-使用jsonp像非同源服务器端请求数据2</title>
	</head>
	<body>
		<!-- better?callback=fn2 -->
		<h1>欢迎，这是s1-04</h1>
		<button id="btn">点我发送请求</button>
		<script>
			function fn(data){
				console.log('客户端s2响应');
				console.log(data);
			}
		</script>
		<script type="text/javascript">
			var btn = document.getElementById('btn');
			btn.onclick = function(){
				// 创建script标签
				var script = document.createElement('script');
				// 设置scr属性
				script.src = 'http://localhost:3002/test';
				// 追加到页面
				document.body.appendChild(script);
				script.onload = function(){
					// 将body中的script删掉
					document.body.removeChild(script);
				}
			}
		</script>
	</body>
</html>

s2的app.js文件

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 创建web服务器
const app = express();
//解析x-www-form-urlencoded的参数
// app.use(bodyParser.urlencoded());
// app.use(bodyParser.json());

// 静态资源访问服务功能
app.use(express.static(path.join(__dirname,'public')));

// 对应s1-03html
app.get('/test',(req,res) =>{
	const result = 'fn({name:"zhansan"})'
	res.send(result);
})

//监听端口
app.listen(3002);
//控制台提示输出
console.log('服务器2启动成功');

JSONP代码优化

客户端需要将函数名称传递到服务器端
将script请求的发送变成动态请求；
封装jsonp函数，方便请求发送；

优化后的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05-使用jsonp像非同源服务器端请求数据4</title>
	</head>
	<body>
		<!-- better?callback=fn2 -->
		<h1>欢迎，这是s1-05</h1>
		<button id="btn">点我发送请求</button>
		
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			btn.onclick = function(){
				jsonp({
					url:'http://localhost:3002/better',
					data:{
						name:'huawei'
					},
					success:function(data){
						console.log('客户端s2响应');
						console.log(data);
					}
				})
			}
			
			function jsonp(options){
				// 动态创建script标签
				var script = document.createElement('script');
				// 拼接字符串的对象
				var params ='';
				for(var attr in options.data){
					params+='&'+attr+'='+options.data[attr];
				}
				
				var fnName ='myJsonp' + Math.random().toString().replace('.','')
				window[fnName] = options.success;
				// 设置scr属性
				script.src = options.url+'?callback='+fnName+params;
				// 追加到页面
				document.body.appendChild(script);
				script.onload = function(){
					// 将body中的script删掉
					document.body.removeChild(script);
				}
			}
		</script>
	</body>
</html>

app.js

app.get('/better',(req,res) =>{
	// // 接收客户端传过来的函数名称
	// const fnName = req.query.callback;
	// // 将函数名称对应的函数调用代码返回给客户端
	// const data = JSON.stringify({name:"sanxing"});
	// const result = fnName + '('+ data +')';
	// res.send(result);
	
	res.jsonp({name:'lisi',age:20})
})

二、访问非同源数据 cors 跨域资源共享

CORS:全称Cross-origin resource sharing,即跨域资源共享，它允许浏览器向跨域服务器发送ajax请求，克服了ajax只能同源使用的限制。

三、访问非同源数据服务端解决方案

同源政策是浏览给予Ajax技术的限制，服务器端是不存在同源政策限制。
08-访问非同源数据的服务器端解决方案

cookie

1、当客户端向服务器端发送请求时，cookie信息会随着请求被发送到服务器端，用以证明自己的身份，在正常的（不涉及到跨域请求）的情况下，这是没有问题的。
2、一旦涉及到跨域，cookie信息就不会随着请求发送到服务器端了。如在使用ajax技术发送跨域请求时，默认情况下不会再请求中携带cookie信息。

widthCredentials属性

withCredentials:指定在涉及到跨域请求时，是否携带cookie信息，默认值为false；
"Access-Control-Allow-Credentials：true"允许客户端发送请求时携带cookie；

$.ajax()方法

作用：发送ajax请求。

$ajax方法
使用ajax发送请求参数
beforeSend方法
serialize方法
作用：将表单中的数据自动拼接成字符串型的参数。formdata是html5的，老版本的浏览器不兼容。

var params = $('#form').serialize();
//name=zhangsan$age=30

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04-serialize方法</title>
	</head>
	<body>
		<form id="form">
			<input type="text" name="username" id="username" value="zhangsan" />
			<input type="password" name="password" id="password" value="1111"/>
			<input type="submit" value="提交"/>
		</form>
		<script src="js/jquery.min.js"></script>
		
		<script type="text/javascript">
			$('#form').on('submit',function(){
				// var params = $('#form').serialize();
				// console.log(params);
				serializeObject($(this));
				return false;
			})
			// 将表单中用户输入的内容转换为对象类型
			function serializeObject(obj){
				//处理结果对象
				var result = {};
				let params = obj.serializeArray();
				// 循环数组，将数组转换为对象类型
				$.each(params,function(index,value){
					result[value.name]=value.value;
				})
				// 将处理结果返回到函数外部
				return result;
			}
		</script>
	</body>
</html>