ajax不能跨域,jsonp可以跨域

跨域的核心思想:
     调用(拿到的接口),定义(jsonp核心处理器)分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据 )
 
jsonp传进来的数据是{url:'',data:{
                                   cbName='cb',(根据接口制定的命名规范,有些事叫callback)
                                   wd='aaa',
                                   ......(之后的数据都要进行字符串拼接)
                              },success:function(result){}}
一:设置默认状态(容错处理)
     json=json||{};
     if(!json.url)return;
     json.data.cbName=json.data.cbName ||'cb';
     json.data=json.data||{};
二:函数名做清除缓存处理
json.data[json.data.cbName ]='show'+Math.random();    json.data[json.data.cbName]=json.data[json.data.cbName].replace('.','');
三:data数据转成字符串
     for(var name in json.data){
          arr.push(name+'='+encodeURIComponent(json.data[name]));
     }
          var str=arr.join('&');
四:定义处理数据函数返回回调函数
     window[json.data[json.data.cbName] ]=function(result){
               success&&success(result);
               oH.removeChild(oS);//数据获取到后删除掉oS
     };
五:存放数据到script ,获取调用接口
     var oH=document.getElementsByTagName('head')[0];
     var oS=document.createElement('script');
     oS.src=json.url+'?'+str;
     oH.appendChild(oS);

1.把拿到的数据存到一个script里面它的src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abb&cb=show "这里相当于数据调用的地方
其真实面目是:show({q:"abb",p:false,s:["abb变频器","abb电机","abb变频器配件","abby","bbs","abb式的词语","abbyy","abba","abb接触器","abbs建筑论坛"]});
 
2.定义
function show(json){
     json.s//取到的数据是一个数组:["abb变频器","abb电机","abb变频器配件","abby","bbs","abb式的词语","abbyy","abba","abb接触器","abbs建筑论坛"]
}
function jsonp(url//数据形参){
     //存数据到地址到新的script
     var oH=document.getElementsByTagName('head')[0];
     var oS=document.createElement('script');
     oH.appendChild(oS);
}
当某个事件触发的时候调用:
     jsonp(url//数据地址实参);

 
1.拿到jsonp接口
     拿到百度搜素接口的步骤
          1.F12
          2.Network==找开头是su的文件,并且关键词是相应的
          4.删除没有用的信息
wd             word          关键字
cb             callback     回调函数
          6.地址放入浏览器得出的数据是:

               show({q:"abb",p:false,s:["abb变频器","abb电机","abb变频器配件","abby","bbs","abb式的词语","abbyy","abba","abb接触器","abbs建筑论坛"]});
               jsonp提供的数据接口相当于一个调用函数
               所以需要在跨域的时候先定义一个函数show
          地址接口相当于是获取了这些数据
 
注意:1.人家给你接口你才能用
  2.jsonp的回调函数,必须是全局的
 
转自:http://www.cnblogs.com/shiyou00/p/5533486.html

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

  1. jquery及原生javascript对jsonp解决跨域问题实例详解

    jquery方式 前端: $.ajax({ url: 'http://m.xxx.tv/goLottery', data: { data: data }, type: 'GET', dataType: ...

  2. 原生 JavaScript 实现 AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  3. 原生JavaScript实现AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  4. Javascript的jsonp原理

    Javascript的jsonp原理   首先JSON是一种基于文本的数据交换方式,或者叫做数据描述格式 当一个网页在请求JavaScript文件时则不受是否跨域的影响,凡是拥有”src”这个属性的标 ...

  5. 原生JavaScript封装的jsonp跨域请求

    原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. javascript实现jsonp跨域问题+原理

    在工作中往往存在跨域的问题 ,跨域是什么概念就不在这里了,搜这类问题的肯定已经知道了.下面直接探讨jsonp跨域原理 jspon跨域原理: 1.动态创建一个script标签 var script = ...

  7. jQuery 调用jsonp实现与原理

    jQuery 调用jsonp实现与原理 您的评价:        收藏该经验     阅读目录 1.客户端代码 2.服务器端 通过jQuery实现JSONP 一般的ajax是不能跨域请求的,因此需要使 ...

  8. jsonp跨域原理

    Jsonp原理: 首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器.注意:服务端得到ca ...

  9. jsonp 跨域原理详解

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

随机推荐

  1. 高宽不定的div相对父div上下、左右居中

    <div class="parent"> <div class="child">123</div> </div> ...

  2. JQuery对表格进行排序

    添加相关jar <script type="text/javascript" src="jquery-1.1.3.pack.js"></scr ...

  3. [Git] 怎么使用Git让代码回到以前的某个节点

    我们可以使某个文件回到以前的某个节点,也可以使整个文件夹下面的文件都回到以前的某个节点,下面只介绍某个文件的,全部的类似. 按步骤操作完成后本地你选中的文件会变成红色,此时的代码还是原来的代码,但是G ...

  4. windows递归拷贝(或删除等操作)文件

    SHFileOperation 以拷贝为例. CString strFrom = ....._T("src");CString strTo = ....._T("dest ...

  5. features block

    很轻松就能把一个新建的block导出到一个module包里.

  6. 点击a标签,跳转到iframe中,并在iframe中显示指定的页面

    点击a标签,跳转到iframe中,并在iframe中显示指定的页面 1.用a标签的target属性 <iframe id="myFrameId" name="myF ...

  7. SAP NWBC for HTML and Desktop configuration steps[From sdn]

    Summary :- This dcoumnenst conatin the information about requirement , hardware , configuration step ...

  8. 递归算法(三)——不借助四则运算实现加法

    问题 求两个整型变量的和,不能使用四则运算,但可以使用位运算. 思路 以二进制形式,考虑两个整数相加: a = 01101001b b = 11100111b s =  ???????? 一个常见的结 ...

  9. IntelliJ UI安装

  10. 各种边缘检测算子特点比较(canny)

    canny 最好.但是容易把噪点误判为边界.sobel prewitt log 效果差不多.prewitt比sobel 去噪效果好.roberts马马虎虎.适合什么图片那得看图片的噪点情况,一般can ...