• 售前

  • 售后

热门帖子
入门百科

一文看懂JSONP原理和应用

[复制链接]
日啊驴吗厩 显示全部楼层 发表于 2021-10-26 13:56:43 |阅读模式 打印 上一主题 下一主题
目录


  • 什么是JSONP
  • JSONP原理
  • JSONP详细实现

    • 1.ajax中如果举行跨域哀求会如何
    • 2.使用JSONP,将前端代码中的ajax哀求去掉
    • 3.将前端代码再举行修改
    • 4.最后jQuery提供了方便使用JSONP的方式


什么是JSONP

起首提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中。JSON格式数据的编码息争析根本在所有主流语言中都被实现,以是现在大部分前后端分离的架构都以JSON格式举行数据的传输。
那么JSONP是什么呢?
起首抛出欣赏器同源策略这个概念,为了包管用户访问的安全,当代欣赏器使用了同源策略,即不允许访问非同源的页面,详细的概念各人可以自行百度。这里各人只要知道,在ajax中,不允许哀求非同源的URL就可以了,比如www.a.com下的一个页面,此中的ajax哀求是不允许访问www.b.com/c.php如许一个页面的。
JSONP就是用来解决跨域哀求问题的,那么详细是怎么实现的呢?

JSONP原理

ajax哀求受同源策略影响,不允许举行跨域哀求,而script标签src属性中的链接却可以访问跨域的js脚本,使用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中举行了调用,如许实现了跨域。

JSONP详细实现


1.ajax中如果举行跨域哀求会如何

前端代码在域www.practice.com下面,使用ajax发送了一个跨域的get哀求
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>GoJSONP</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8.         function jsonhandle(data){
  9.                 alert("age:" + data.age + "name:" + data.name);
  10.         }
  11. </script>
  12. <script type="text/javascript" src="jquery-1.8.3.min.js">
  13. </script>
  14. <script type="text/javascript">
  15.         $(document).ready(function(){
  16.                 $.ajax({
  17.                         type : "get",
  18.                         async: false,
  19.                         url : "http://www.practice-zhao.com/student.php?id=1",
  20.                         type: "json",
  21.                         success : function(data) {
  22.                                 jsonhandle(data);
  23.                         }
  24.                 });
  25.         });
  26. </script>
  27. </body>
  28. </html>
复制代码
后端PHP代码放在域www.practice-zhao.com下,简单的输出一段json格式的数据
  1. <span style="background-color: initial;">jsonhandle({</span>
  2. <span style="white-space:pre">        </span>"age" : 15,
  3. <span style="white-space:pre">        </span>"name": "John",
复制代码
当访问前端代码http://www.practice.com/gojsonp/index.html 时 chrome报以下错误

提示了不同源的URL禁止访问

2.使用JSONP,将前端代码中的ajax哀求去掉

添加了一个script标签,标签的src指向了另一个域www.practice-zhao.com下的remote.js脚本
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>GoJSONP</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8.         function jsonhandle(data){
  9.                 alert("age:" + data.age + "name:" + data.name);
  10.         }
  11. </script>
  12. <script type="text/javascript" src="jquery-1.8.3.min.js">
  13. </script>
  14. <script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script>
  15. </body>
  16. </html>
复制代码
这里调用了跨域的remote.js脚本,remote.js代码如下:
  1. <span style="background-color: initial;">jsonhandle({</span>
  2. <span style="white-space:pre">        </span>"age" : 15,
  3. <span style="white-space:pre">        </span>"name": "John",})
复制代码
也就是这段远程的js代码实行了上面定义的函数,弹出了提示框


3.将前端代码再举行修改

代码如下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>GoJSONP</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8.         function jsonhandle(data){
  9.                 alert("age:" + data.age + "name:" + data.name);
  10.         }
  11. </script>
  12. <script type="text/javascript" src="jquery-1.8.3.min.js">
  13. </script>
  14. <script type="text/javascript">
  15.         $(document).ready(function(){
  16.                 var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
  17.                 var obj = $('<script><\/script>');
  18.                 obj.attr("src",url);
  19.                 $("body").append(obj);
  20.         });
  21. </script>
  22. </body>
  23. </html>
复制代码
这里动态的添加了一个script标签,src指向跨域的一个php脚本,并且将上面的js函数名作为callback参数传入,那么我们看下PHP代码怎么写的:
  1. <?php
  2. $data = array(
  3.         'age' => 20,
  4.         'name' => '张三',
  5. );
  6. $callback = $_GET['callback'];
  7. echo $callback."(".json_encode($data).")";
  8. return;
复制代码
PHP代码返回了一段JS语句,即
  1. jsonhandle({
  2.         "age" : 15,
  3.         "name": "张三",
  4. })
复制代码
此时访问页面时,动态添加了一个script标签,src指向PHP脚本,实行返回的JS代码,乐成弹出提示框。
以是JSONP将访问跨域哀求酿成了实行远程JS代码,服务端不再返回JSON格式的数据,而是返回了一段将JSON数据作为传入参数的函数实行代码。

4.最后jQuery提供了方便使用JSONP的方式

代码如下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>GoJSONP</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript" src="jquery-1.8.3.min.js">
  8. </script>
  9. <script type="text/javascript">
  10.         $(document).ready(function(){
  11.                 $.ajax({
  12.                         type : "get",
  13.                         async: false,
  14.                         url : "http://www.practice-zhao.com/student.php?id=1",
  15.                         dataType: "jsonp",
  16.                         jsonp:"callback", //请求php的参数名
  17.                         jsonpCallback: "jsonhandle",//要执行的回调函数
  18.                         success : function(data) {
  19.                                 alert("age:" + data.age + "name:" + data.name);
  20.                         }
  21.                 });
  22.         });
  23. </script>
  24. </body>
  25. </html>
复制代码
以上就是一文看懂JSONP原理和应用的详细内容,更多关于JSONP原理和应用的资料请关注草根技术分享别的相关文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作