这次给大家带来JSONP原理详解以及案例分析，JSONP原理详解以及案例分析的注意事项有哪些，下面就是实战案例，一起来看一下。
在web2.0时代，熟练的使用ajax是每个前端攻城师必备的技能。然而由于受到浏览器的限制，ajax不允许跨域通信。
JSONP就是目前主流的实现跨域通信的解决方案。
虽然在在jquery中，我们可以通过$.ajax的dataType设置为jsonp来调用jsonp，但是jsonp和ajax的实现原理一个关系都木有。jsonp主要是通过script可以链接远程url来实现跨域请求的。如：
登录后复制
callback定义了一个函数名，而远程服务端通过调用指定的函数并传入参数来实现传递参数。
搜索了网上好多文章，他们实现方法都过于简单，要实际应用还要多加修改，我在这里封装了一个对象，可以直接运用于实际操作。
var JSONP = {// 获取当前时间戳now: function() {return (new Date()).getTime();},// 获取16位随机数rand: function() {return Math.random().toString().substr(2);},// 删除节点元素removeElem: function(elem) {var parent = elem.parentNode;if(parent && parent.nodeType !== 11) {parent.removeChild(elem);}},// url组装parseData: function(data) {var ret = "";if(typeof data === "string") {ret = data;}else if(typeof data === "object") {for(var key in data) {ret += "&" + key + "=" + encodeURIComponent(data[key]);}}// 加个时间戳，防止缓存ret += "&_time=" + this.now();ret = ret.substr(1);return ret;},getJSON: function(url, data, func) {// 函数名称var name;// 拼装urlurl = url + (url.indexOf("?") === -1 ? "?" : "&") + this.parseData(data);// 检测callback的函数名是否已经定义var match = /callback=(w+)/.exec(url);if(match && match[1]) {name = match[1];} else {// 如果未定义函数名的话随机成一个函数名// 随机生成的函数名通过时间戳拼16位随机数的方式，重名的概率基本为0// 如:jsonp_1355750852040_8260732076596469name = "jsonp_" + this.now() + '_' + this.rand();// 把callback中的?替换成函数名url = url.replace("callback=?", "callback="+name);// 处理?被encode的情况url = url.replace("callback=%3F", "callback="+name);}// 创建一个script元素var script = document.createElement("script");script.type = "text/javascript";// 设置要远程的urlscript.src = url;// 设置id，为了后面可以删除这个元素script.id = "id_" + name;// 把传进来的函数重新组装，并把它设置为全局函数，远程就是调用这个函数window[name] = function(json) {// 执行这个函数后，要销毁这个函数window[name] = undefined;// 获取这个script的元素var elem = document.getElementById("id_" + name);// 删除head里面插入的script，这三步都是为了不影响污染整个DOM啊JSONP.removeElem(elem);// 执行传入的的函数func(json);};// 在head里面插入script元素var head = document.getElementsByTagName("head");if(head && head[0]) {head[0].appendChild(script);}}};
登录后复制
实现过程基本写在注释里啦，自己看。调用的方法跟jQuery基本一样。如：
var data = {from: "北京",count: 27,output: "json",callback: "?"}JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp", data, function(json) {console.log(json)});
登录后复制
当然要这么写也行：
JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp?from=北京&count=27&output=json&callback=?", null, function(json) {console.log(json)});
登录后复制
至于服务端的实现，那就比较简单了，以php为例：
$callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback';echo $callback.'( .json_encode( $data ).')';
登录后复制
ajax与jsonp的异同再做一些补充说明：
1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加标签来调用服务器提供的js脚本。
3、所以说，其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。
4、还有就是，jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。
总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变这一点！
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
JSON作为函数参数时应该如何使用
实体类与JSON对象转化方法总结
以上就是JSONP原理详解以及案例分析的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2768355.html
