iTakeo

JSONP跨域的原理解析…

跨域的方法有很多，这里给大家解释一下什么是JSONP
JSON相比大家都已经很了解了，那么JSONP又是个什么鬼，JSONP是利用在页面中动态创建<script>节点的方法向不同域提交HTTP请求的方法称为JSONP,通俗的来说，就是在服务端输出JSON数据并执行回调函数。

var _script= document.createElement(“script”);
_script.type = “text/javascript”;
_script.src = “xxxxx”;
document.getElementsByTagName(“head”)[0].appendChild(_script);

我们以百度为例，打开浏览器调试工具，点击网络，然后再百度搜索里面输入关键字，网络里面会出现一个请求，具体看下图：

我们用Firebug查看参数，其中cb就是回调函数callback，wd就是我们输入的关键字，其它的参数我们暂时先不看，然后点击JSON，会看到有个s数组，里面就是返回的数据了，具体看下图。

在接着我们把这个地址在浏览器中打开看看是什么样的，里面返回了各种数据。

上面一堆什么鬼，看起来，是不是很乱，那我们来简化一下，如下代码：

jquery111({
wd:123,
s:[1,2,3]
})

看起来像不像在调用一个jquery111的函数，参数是一个json呢？当然这个jquery111名字是随机取的，可以是任意的。接下来，我们在页面顶部写入一个Baidu的函数。然后通过点击这个按钮点击我来动态创建一个<script>向刚刚的地址发送一个http请求，有没有发现，Baidu函数执行了，具体代码如下：

function Baidu(){
alert(‘我会执行吗？’)
}

span.onclick = function(){
var _script = document.createElement(‘script’);
_script.src = ‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=12&cb=Baidu’;
document.body.appendChild(_script);
}

接下来，我们来模拟一个百度搜索框看看吧：

需要注意的是，Baidu函数必须在添加script标签之前。具体实现过程看下面的代码：

function Baidu(data){
var _ul = document.getElementsByTagName(‘ul’)[0];
var arr = data.s; //获取数据
var _html = “”;
if(arr.length>0){ //如果有数据写入html
_ul.style.display = ‘block’
for(var i=0;i<arr.length;i++){
_html+='<li><a target=“_blank” href=“http://www.baidu.com/s?wd=’+data.q+'”>’+arr[i]+'</a></li>’;
};
_ul.innerHTML = _html;
}else{ //否则不显示
_ul.style.display = ‘none’
};
};

var _btn = document.getElementById(‘search’);
var _ul = document.getElementsByTagName(‘ul’)[0];
var _in = document.getElementById(‘in‘);
_in.onkeyup = function(){
if(this.value!=”){ //输入框up的时候不为空的情况下，动态添加script标签
var _script = document.createElement(‘script’);
_script.src = ‘http://suggestion.baidu.com/su?wd=’+ this.value +’&cb=fn’;
document.body.appendChild(_script);
// 加载完成后，删除script
_script.onload = _script.onreadystatechange = function(){
if (!_script.readyState || _script.readyState == ‘loaded’ || _script.readyState == ‘complete’) {
document.body.removeChild(_script);
};
};
}else{
_ul.style.display = ‘none’;
};
};
//输入框blur
_in.onblur = function(){
setTimeout(function(){
_ul.style.display = ‘none’;
},300);
};
_btn.onclick = function(){
if(_in.value!=”){
window.location = “http://www.baidu.com/s?wd=”+_in.value;
};
};

2015/07/07 0 /

未分类

标签: 暂无标签

回到顶部