Jsonp原理: 
首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

使用JSON的优点在于:

  • 比XML轻了很多,没有那么多冗余的东西。
  • JSON也是具有很好的可读性的,但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示,浏览器对于JSON的格式化的显示就需要借助一些插件了。
  • 在JavaScript中处理JSON很简单。
  • 其他语言例如PHP对于JSON的支持也不错。

JSON也有一些劣势:

  • JSON在服务端语言的支持不像XML那么广泛,不过JSON.org上提供很多语言的库。
  • 如果你使用eval()来解析的话,会容易出现安全问题。

尽管如此,JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。

主要提示:

JSONP 是构建 mashup 的强大技术,但不幸的是,它并不是所有跨域通信需求的万灵药。它有一些缺陷,在提交开发资源之前必须认真考虑它们。

第一,也是最重要的一点,没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。(未来的 jQuery 版本可能有终止 JSONP 请求的特性)。

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务,了解它能造成的威胁非常重要。

<?php  

//服务端返回JSON数据
$arr=array('a'=>,'b'=>,'c'=>,'d'=>,'e'=>);
$result=json_encode($arr);
//echo $_GET['callback'].'("Hello,World!")';
//echo $_GET['callback']."($result)";
//动态执行回调函数
$callback=$_GET['callback'];
echo $callback."($result)";
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
function jsonpCallback(result) {
alert(result.a);
alert(result.b);
alert(result.c);
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
}
</script>
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>

 案例示范:

        window.onload = function() {
var oBtn = document.getElementById('btn');
var relative = document.getElementById('relative');
oBtn.onkeyup = function() {
//如果有输入内容的时候,就生成一个script标签获取数据
if (this.value != '') {
var oScript = document.createElement('script');
oScript.src = 'http://suggestion.baidu.com/su?wd=' + this.value + '&cb=jsonCallback';
document.body.appendChild(oScript);
} else {
relative.style.display = 'none';
}
}
}; function jsonCallback(result) {
var relative = document.getElementById('relative');
var html = '';
//由上文知道,我们所需要的字段都在s里面存放着
if (result.s.length) {
relative.style.display = 'block';
//这里可以限制一下所需要联想词的个数,太多了也没必要
for (var i = ; i < result.s.length - ; i++) {
html += '<li><a target="_blank">' + result.s[i] + '</a></li>';
}
//渲染到页面里
relative.innerHTML = html;
} else {
relative.style.display = 'none';
}
}

jsonp 实现原理的更多相关文章

  1. jsonp协议原理深度解析

    前言 今天在开发联调的过程中,需要跨域的获取数据,因为使用的jquery,当然使用dataType:'jsonp'就能够很easy的解决了.但是因为当时后端没有支持jsonp来访问,后来他在实现这个功 ...

  2. js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

    最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 ...

  3. JSONP的原理

    JSONP的原理 JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的. <script type="text/j ...

  4. JSONP的原理与实现(基于jQuery)

    为什么会有JSONP?因为我们使用AJAX,使用AJAX可能就会遇到跨域的需求,如何解决呢,对,就是JSONP. 这里注意下JSON和JSONP不是一类,虽然他们只是一个字母只差,但是实际差别很大.这 ...

  5. jsonp实现原理

    jquery 封装在 ajax方法 里面的jsonp jsonp跨域的原理       1:使用script 标签发送请求,这个标签支持跨域访问       2:在script 标签里面给服务器端传递 ...

  6. jsonp详细原理之一

    /*script标签是不存在跨域请求的,类似的还有img,background:url,link 你可以想象一下,平时的这些标签都是可以直接引入外部资源的,所以是不存在跨域问题的*/ function ...

  7. jsonp的原理,应用场景,优缺点

    在开发测试中,难免会在不同域下进行跨域操作,出于安全性考虑,浏览器中的同源策略阻止从一个域上加载的脚本获取或者操作 另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用jsonp ,ifra ...

  8. 关于javascript跨域及JSONP的原理与应用

    同源策略,它是由Netscape提出的一个著名的安全策略,现在所有的可支持javascript的浏览器都会使用这个策略. 为什么需要同源策略,这里举个例子: 假 设现在没有同源策略,会发生什么事情呢? ...

  9. jsonp的原理和实现

    什么是JSONP? javascript高级程序设计中是这样介绍jsonp的: jsonp是JSON with padding(填充式JSON或参数式JSON )的简写,是应用JSON的一种新方法,在 ...

随机推荐

  1. python locust 性能测试:locust 参数化(list) ---循环取数据,数据可重复使用

    from locust import TaskSet, task, HttpLocust class UserBehavior(TaskSet): def on_start(self): # 当模拟用 ...

  2. Class_fourth

    动手动脑 1,多层异常捕捉一 2,多层异常捕捉二 3,EmbedFinally.java示例 最先截获的错误 最后输出finally 4, SystemExitAndFinally.java示例 如果 ...

  3. 【winform】DataGridView控件[表格]

    一.表格 0.从数据库获取一个表在DataGridView中显示: 数据库查询的方式大同小异,重点是如何把数据显示到控件中的方法,通过dataset作为数据的中继,把Adapter中的数据存到data ...

  4. Poj1979 Red and Black (DFS)

    Red and Black Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 47466   Accepted: 25523 D ...

  5. 再谈git和github-深入理解-3

    git tag -a 和 -m的区别? -a是 注解 是单词 "annotate"的意思 , 表示 "给标签一个名字, 标签名 -m 是创建标签时的消息备注 git ta ...

  6. UVA11468 Substring

    思路 AC自动机+概率dp 设f[i][j]表示当前在第i位在AC自动机的第j个节点,满足条件的概率 AC自动机上的一个节点能被转移到当且仅当这个节点不是中止节点且无法通过fail指针跳到任何一个中止 ...

  7. MAC之间共享屏幕

    A 机设置-->共享-->屏幕共享 ☑️勾选上,打开屏幕共享.   B 机 safari 里输入 vnc://ip 回车就可以共享屏幕了   转载请注明出处:https://www.cnb ...

  8. variable 'o' used without having been completely initialized Compiling Vertex program

    variable 'o' used without having been completely initialized Compiling Vertex program   v2f vert (ap ...

  9. ckeditor5 安装高亮,颜色插件

    ckeditor5 安装高亮插件 1.准备 git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git cd ...

  10. IDEA复制某个类的包名路径

    在对应的类中右键: 然后看图: