Jsonp跨域

原理:利用<script>标签的src属性并不被同源策略所约束即可以跨域的特性,获取任何服务器上脚本并执行,只能通过GET方式传递.你不能访问响应信息头或者像访问字符串那样访问整个响应报文;
JSONP由两部分组成:回调函数和数据;回调函数是响应到来时应该在页面中调用的函数,回调函数的名字一般是在请求中指定的或者是默认的;而数据就是传入回调函数中的JSON数据;
注意点:script标签只能是DOM生成插入head标签内的;不能使用obj.innerHTML="",这样src属性不能执行;
如:百度的Jsonp接口 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=jsonp&json=1&p=3&sid=22078_1428_21112_17001_22035&req=2&csor=2&pwd=w&cb=show
其中:“wd=”里面就是搜索的关键字;“cb=”里面就是callback;
调用接口返回的结果为:
show({"q":"jsonp","p":false,"bs":"","csor":"2","status":0,"g":[ { "q": "json", "t": "n", "st": { "q": "json", "new": 0 } }, { "q": "jsonp 跨域", "t": "n", "st": { "q": "jsonp 跨域", "new": 0 } }, { "q": "jsonp post", "t": "n", "st": { "q": "jsonp post", "new": 0 } }, { "q": "jsonp callback", "t": "n", "st": { "q": "jsonp callback", "new": 0 } }, { "q": "jsonp原理", "t": "n", "st": { "q": "jsonp原理", "new": 0 } }, { "q": "jsonpath", "t": "n", "st": { "q": "jsonpath", "new": 0 } }, { "q": "jsonparser", "t": "n", "st": { "q": "jsonparser", "new": 0 } }, { "q": "jsonp的原理", "t": "n", "st": { "q": "jsonp的原理", "new": 0 } }, { "q": "json.parse()", "t": "n", "st": { "q": "json.parse()", "new": 0 } }, { "q": "json.parse", "t": "n", "st": { "q": "json.parse", "new": 0 } } ],"s":["json","jsonp 跨域","jsonp post","jsonp callback","jsonp原理","jsonpath","jsonparser","jsonp的原理","json.parse()","json.parse"]});
百度接口使用代码:

  <script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=jsonp&json=1&p=3&sid=22078_1428_21112_17001_22035&req=2&csor=2&pwd=w&cb=show"></script>
  //定义callback函数
  function show(json){
    // 要执行的代码
  }
  //执行
  show(json);

为了使用方便,我们需要封装一个Jsonp函数,方便使用:

 function jsonp(json){
    var json = json || {};
    if(!json.url){
        return;
    }
    json.data = json.data || {};
    json.cbName = json.cbName || 'cb';

    var fnName = 'jsonp_'+Math.random();
//把随机数里面的"."去掉
    fnName = fnName.replace('.','');
    var oS = document.createElement('script');
    json.data[json.cbName] = fnName;
    var arr = [];
    for(var name in json.data){
        arr.push(name + '=' + json.data[name]);
    }
    oS.src = json.url + '?' + arr.join('&');
    var oHead = document.getElementsByTagName('head')[0];
    oHead.appendChild(oS);
    window[fnName] = function(json2) {
        json.success && json.success(json2);
        //创建的script标签使用完,删除
        oHead.removeChild(oS);
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 222,183评论 6 516
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,850评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,766评论 0 361
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,854评论 1 299
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,871评论 6 398
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,457评论 1 311
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,999评论 3 422
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,914评论 0 277
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,465评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,543评论 3 342
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,675评论 1 353
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,354评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,029评论 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,514评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,616评论 1 274
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,091评论 3 378
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,685评论 2 360

推荐阅读更多精彩内容

  • 题目1: 什么是同源策略 浏览器出于安全考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,...
    saintkl阅读 236评论 0 0
  • JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的...
    西瓜w阅读 1,768评论 0 1
  • 诞生背景: 由于Ajax直接请求普通文件存在跨域无权访问的问题,甭管是静态页面、动态网页、web服务、wcf、只要...
    FTOLsXD阅读 1,092评论 0 1
  • 0. 前言 说到AJAX就会不可避免的面临两个问题。 AJAX以何种格式来交换数据? 第二个是跨域的需求如何解决?...
    公子七阅读 23,612评论 7 67
  • 面试中常常会问到如何使用jsonp跨域(jsonp跨域的原理是什么),这篇文章就给大家介绍一下相关的知识,如有不对...
    webCoder阅读 1,200评论 1 19