jsonp原理(jsonp原理分析)

 2021-11-18 19:39    77  

方法一jsonp原理:

用JSONObject.fromObject(json字符串) 解析,然后去捕获异常,如果异常肯定是不完整的(这个如果字符串中有table也会报错,具体看使用中是否会出现看是否先处理这个(暂时只遇到这个))jsonp原理。

方法二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; // 拼装url url = 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_8260732076596469 name = "jsonp_" this。
  now() '_' this。rand(); // 把callback中的?替换成函数名 url = url。replace("callback=?", "callback=" name); // 处理?被encode的情况 url = url。
  replace("callback=?", "callback=" name); } // 创建一个script元素 var script = document。createElement("script"); script。type = "text/javascript"; // 设置要远程的url script。
  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("。
  qunar。com/cdnWebservices。jcp", data, function(json) {console。log(json)});
当然要这么写也行:
JSONP。getJSON("。
  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的核心是通过Xml获取非本页内容,而jsonp的核心则是动态添加标签来调用服务器提供的js脚本。


3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。
  


4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。
  


总而言之,jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变这一点!

好了,写完了,有什么问题欢迎讨论。
  

本文标签:实现原理简单

原文链接:https://www.xgfox.com/kfbc/34504.html

本文版权:如无特别标注,本站文章均为原创。