jsonp是什么？jsonp的原理详细说明|雨林木风下载站

导读网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立...

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

什么是jsonp？有什么用处？本篇文章就带大家来认识一下jsonp及对jsonp原理的理解，有需要的朋友可以参考一下。

话不多说，我们直接进入正文~

jsonp是什么？

我们从网上可以查到jsonp的定义：JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。其实简单点来说jsonp就是一种轻量级的数据传输格式，用来解决跨域请求问题。

下面我们就来分析一下jsonp的原理

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

我们来看一个jsonp的例子：

<!DOCTYPE html>
 <html> 
 <head> 
 <title>GoJSONP</title> 
 </head> 
 <body> <
 script type="text/javascript">
    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
</script> <script type="text/javascript" src="jquery-1.8.3.min.js">
</script> <script type="text/javascript">
    $(document).ready(function(){
        var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
        var obj = $('<script><\/script>');
        obj.attr("src",url);
        $("body").append(obj);
    });
</script>
 </body> 
 </html>

这里动态的添加了一个script标签，src指向跨域的一个php脚本，并且将上面的js函数名作为callback参数传入，那么我们看下PHP代码怎么写的：

<?php 
$data = array( 'age' => 20, 'name' => '张三', ); 
$callback = $_GET['callback']; 
echo $callback."(".json_encode($data).")"; 
return;

PHP代码返回了一段JS语句，即

此时访问页面时，动态添加了一个script标签，src指向PHP脚本，执行返回的JS代码，成功弹出提示框。
所以JSONP将访问跨域请求变成了执行远程JS代码，服务端不再返回JSON格式的数据，而是返回了一段将JSON数据作为传入参数的函数执行代码。

本篇文章到这里就全部结束了，更多jsonp相关内容可以关注php中文网！！！

以上就是jsonp是什么？jsonp的原理详解的详细内容，更多请关注php中文网其它相关文章！

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

温馨提示：喜欢本站的话，请收藏一下本站！

当前位置:雨林木风下载站 > 网页设计教程 > 详细页面

jsonp是什么？jsonp的原理详细说明

本类教程下载

系统下载排行