js：jsonp实现原理

最新推荐文章于 2023-11-03 23:47:38 发布

wzxtarget

最新推荐文章于 2023-11-03 23:47:38 发布

阅读量294

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/m0_49888984/article/details/108004677

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

jsonp实现原理

一、同源策略

所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。而解决这种同源策略的方法称之为跨域。跨域的方法有很多种,这里介绍一下jsonp跨域。

二、jsonp原理

通过script请求实现跨域(script请求不受跨域限制)，在前端页面设置一个处理函数来处理后端传过来的数据，先把处理函数的函数名传到服务端，然后文件名包裹后端要给前端的数据返回客户端。给客户端的处理程序处理。

客户端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp</title>

    <style type="text/css">
    </style>
</head>
<body>

  <script>
  function hello(data){
     console.log(data);
  }
  </script>
  <script src="http://localhost:3001/index.php?callback=hello"></script>
</body>
</html>

注意：这里hello函数要先声明，先于引入的跨域文件，否则报错没有hello。这里的跨域文件一般通过动态创建script引入，这里不另讲。

服务端：
通过接收客户端传过来的处理函数的文件名，然后用传过来的文件名包裹（拼接）后端要返回的json数据给客户端，然后用客户端的处理函数hello来处理传回来的data。
在这里插入图片描述

三、通过jquery实现jsonp

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript">
   $.ajax({
        type:"get",
        url:"http://localhost:3001/index.php?callback=?",   
        dataType: "jsonp",
        jsonp:"callback",
        jsonpCallback:"person",
        success:function(data){
            alert(data.name+ " age is " + data.age);
        }
   });
</script>

callback=?表示如果没有指定callback函数名，则由系统生成。

四、nodejs实现跨域

用node在本地搭两个服务，一个处理调用html页面（server1端口：8081），一个用来访问服务下的静态资源（server2端口：8082）。
server1：

let express = require('express');
var app = express();
app.get('/index.html',function(req,res){
	res.sendFile(__dirname+'/'+'index.html');
})
var server = app.listen(8081);

index.html:

<!DOCTYPE >
<html>
<head>
	<meta charset="utf-8" >
	<title>jsonp 跨域原理</title>
</head>
<body>

<script>
	function hello(data){
		console.log(data);
	}
	
	var script = document.createElement('script');
	script.src = "http://localhost:8082/getdata?callback=hello";
	document.body.appendChild(script);
</script>

</body>
</html>

server2:

let express = require('express');
let fs = require('fs');
let url = require('url');
let querystring = require('querystring');
var app = express();

app.use(express.static(__dirname));

app.get('/',function(req,res){
	res.send('hello word!!!!');
})
app.get('/getdata',function(req,res){
	//同步读取json文件,server2下放一个data.json文件
	var data = fs.readFileSync('server2/data.json').toString();
	var qs = url.parse(req.url).query;
	var cb = querystring.parse(qs).callback;
	var jsonp = cb+"("+data+")";
	res.send(jsonp);
});
var server = app.listen(8082);

wzxtarget

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js：jsonp实现原理

jsonp实现原理jsonp:通过script请求实现跨域，在前端页面设置一个处理函数来处理后端传过来的数据，先把处理函数的函数名传到服务端，然后文件名包裹后端要给前端的数据返回客户端。给客户端的处理程序处理。客户端：<script type="text/javascript" src="http://example.com/Index.aspx?callback=Hello"></script>function Hello(data){ //处理data}
复制链接

扫一扫