您的位置：首页 > Web前端 > JavaScript

JSONP跨域请求+简答实现百度搜索

2016-12-31 19:24 281 查看

什么是跨域呢？

比如说
ajax
必须在自己的域(名)之下，才能进行异步的请求，如果不是在同一个域之下就不能进行请求，会报错。比如说我们用
ajax
去请求腾讯的API如果我们的这个域不在腾讯那个接口的’白名单’里面，腾讯的接口就会拒绝给我返回数据。但是大多数情况下，我们不可能每次都去去相应的网站申请一个’白名单’，这个时候我们就要用到跨域这种方法，跨域有很多方式比如说用
iframe
但是这种的可操作性太差了，不能操作f
rame
里面的
DOM
元素。当先最流行的一种的方式是使用
jsonp
这种方式。

什么是JSONP

jsonp
是英文为
json with padding
的简称。简单地来说
jsonp
就是
script
标签,通常的我们把
script
，
link
，
img
叫做资源标签，也就是能连接资源的意思。只要记住了
jsonp
就是
script
标签就好了。下面我们来说下一部分：

script标签怎么引入数据

我们如果知道操作系统并不是靠后缀名来识别一个文件的，是靠文件里面的内容来识别的，后缀名知识更利于第三方的软件进行查看。比如说我们把
a.txt
改为
a.png
那么我门用图片查看器打开的时候也是显示的图片不存在的(如果学过Linux的同学会更好的理解)。【有兴趣的同学可以尝试这把一个js文件的后缀改为其他格式再引入试试】。那么我们就解决的
script
如何引入数据的问题了，也就是说我们可以用
script
标签引用一个
json
或者
.php
的资源文件.

就算能引入资源，那么资源怎么使用呢

先举个简单地例子，比如我们在一个
a.json
定义了下面的一个变量

"text";


我们在HTML中去加载它，然后去执行，如下代码：

<script src="./a.json"></script>
<script>
alert(str);  //text
</script>


这样是能正确执行了，但是我们也知道json数据中并没有定义什么变量和方法的，这个就好像下面的方式：

var str="text";


我们在HTML中去加载它，然后去执行，如下代码：

<script src="./a.json"></script>
<script>
alert(str);  //error
</script>


这样显然是会报错的，那么跨域解决之后就要解决怎么使用这个资源的问题了。

我们先和后台定义一个方式，把所有的数据作为一个函数的参数去调用函数，当然这个函数是我们预先定义好的了，如下面的格式：

function solve(data){
//使用数据
}
<script src="./a.json"></script>


下面我们来看看
a.json
是怎么定义的

solve(100);
solve({});
//相当于a.json里面的数据作为参数传递到了solve函数里面，然后，在solve函数里面操作这个数据就可以了


资源里面要有几个方法

先看下面的例子，当我们引入一个PHP动态资源的时候

<?php
$t = isset($_GET['t']) ? $_GET['t'] : 'num';
$a = "111";
$b = "aaa";
if ($t == 'num') {
$data = json_encode($a);
} else {
$data = json_encode($b);
}
echo solve($data)


比如我们有两个按钮一个按钮执行的时候要求，收到
$a
另一个要求收到
$b
，那我们应该怎么搞？在pho文件中加一个
solve()
?这样虽然是可取的，如果有n种请求呢，只要加n个方法，这样肯定是不行的。我们怎么解决呢？有一个很好的方法就是在请求的时候就把函数名字加进去，例如下面的方式：

<?php
$t = isset($_GET['t']) ? $_GET['t'] : 'num';
$callback = isset($_GET['callback']) ? $_GET['callback'] : 'fn1';

$arr1 = array('111111','22222222','33333333','4444444','555555555555555555555');
$arr2 = array('aaaaaaaaaaaa','bbbbbbbb','cccccccccccc','ddddddddd','eeeeeeeeeeee');

if ($t == 'num') {
$data = json_encode($arr1);
} else {
$data = json_encode($arr2);
}

echo $callback.'('.$data.');';


这样就能很好的规避这个问题了。

好了，如果上面的东西你都连接了，那么你就差不多知道什么是跨域和怎么解决跨域了，那么光说不练还是不好的，我们就用百度的搜索API来简单联系一下。

当然啦，还有一个重要的问题，jsonp加载的时候应该是动态加载的，我们应该用代码创建。具体的说明请看下面的demo

简单说实现百度搜索

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0;margin: 0;}
#q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}
#ul1 {border:1px solid #f90; width: 310px; margin: 0;padding: 0; display: none;}
li a { line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block;}
li a:hover{ background: #f90; color: white; }
</style>
<script>
function solve(data) {//得到百度API返回的数据
var Show = document.getElementById('show');
var html = "";
//debugger
if(data.s.length) {
Show.style.display = 'block';
var len = data.s.length;
for (var i=0; i<len; i++) {//逐条显示
html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';
}
Show.innerHTML = html;
}else{
Show.style.display = "none";
}
}
window.onload = function(){
var oQ = document.getElementById('q'),
Show = document.getElementById('show');

oQ.onkeyup = function(){//当有键盘事件的时候
if(this.value!=""){
var oScript = document.createElement("script");//创建一个script标签，准备引入资源
oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=solve';
/*上面的两行就相当于<script src="ziyuan"> <\/script>*/
document.body.appendChild(oScript);//加入的body中
} else{
Show.style.display = "none";
}
}
}
</script>
</head>
<body>
<input type="text" id="q">
<ul id="show"></ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航