Jsonp解决跨域问题原理

最新推荐文章于 2022-10-25 16:58:55 发布

VIP文章「已注销」

最新推荐文章于 2022-10-25 16:58:55 发布

阅读量430

点赞数

文章标签： jsonp

本文链接：https://blog.csdn.net/qq_38482933/article/details/107792832

版权

1.什么是Jsonp？
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。
同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
JSONP由两部分组成：回调函数和数据，回调函数一般是在浏览器控制，作为参数发往服务器端（当然，你也可以固定回调函数的名字，但客户端和服务器端的名称一定要一致）。当服务器响应时，服务器端就会把该函数和数据拼成字符串返回
2.什么是跨域？
跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。如果协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的。
3.Jsonp原理
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
（1）可以动态/静态添加了一个script标签，src指向跨域的一个php脚本，js函数名作为callback参数传入

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
	<p>jsonp</p>
	<button type="button" >点击</button>
	<table border="1" cellspacing="0" cellpadding="">
		<tr>
			<th>书名</th>
			<th>作者</th>
			<th>描述</th>
		</tr>
	</table>
	<script type="text/javascript">
		var btn =document.querySelector('button')
		btn.onclick = function() {
			for(var key in data){

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jsonp解决跨域问题原理

1.什么是Jsonp？Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。JSONP由两部分组成：回调函数和数据，回调函数一般是在浏览器控制，作为参数发往服务器端（当然，你也可以固定回调函数的名字，
复制链接

扫一扫