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

什么是跨域呢？

比如说ajax必须在自己的域(名)之下，才能进行异步的请求，如果不是在同一个域之下就不能进行请求，会报错。比如说我们用ajax去请求腾讯的API如果我们的这个域不在腾讯那个接口的’白名单’里面，腾讯的接口就会拒绝给我返回数据。但是大多数情况下，我们不可能每次都去去相应的网站申请一个’白名单’，这个时候我们就要用到跨域这种方法，跨域有很多方式比如说用iframe但是这种的可操作性太差了，不能操作frame里面的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"@H_403_63@;

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

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

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

var@H_403_63@ str="text"@H_403_63@;

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

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

这样显然是会报错的，那么跨域解决之后就要解决怎么使用这个资源的问题了。
我们先和后台定义一个方式，把所有的数据作为一个函数的参数去调用函数，当然这个函数是我们预先定义好的了，如下面的格式：

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

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

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

资源里面要有几个方法

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

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

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

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

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

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

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

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

好了，如果上面的东西你都连接了，那么你就差不多知道什么是跨域和怎么解决跨域了，那么光说不练还是不好的，我们就用百度的搜索API来简单联系一下。
当然啦，还有一个重要的问题，jsonp加载的时候应该是动态加载的，我们应该用代码创建。具体的说明请看下面的demo

简单说实现百度 搜索

<!DOCTYPE html>@H_403_63@
<html@H_403_63@ lang@H_403_63@="en"@H_403_63@>@H_403_63@
<head@H_403_63@>@H_403_63@
    <Meta@H_403_63@ charset@H_403_63@="UTF-8"@H_403_63@>@H_403_63@
    <title@H_403_63@>@H_403_63@Document</title@H_403_63@>@H_403_63@
    <style@H_403_63@>@H_403_63@ *{padding@H_403_63@: 0@H_403_63@@H_403_63@@H_403_63@;margin@H_403_63@: 0@H_403_63@@H_403_63@@H_403_63@;}@H_403_63@@H_403_63@ #q@H_403_63@ {width@H_403_63@: 300@H_403_63@px@H_403_63@@H_403_63@; height@H_403_63@: 30@H_403_63@px@H_403_63@@H_403_63@; padding@H_403_63@: 5@H_403_63@px@H_403_63@@H_403_63@; border@H_403_63@:1@H_403_63@px solid #f90@H_403_63@@H_403_63@@H_403_63@; font-size@H_403_63@: 16@H_403_63@px@H_403_63@@H_403_63@;}@H_403_63@@H_403_63@ #ul1@H_403_63@ {border@H_403_63@:1@H_403_63@px solid #f90@H_403_63@@H_403_63@@H_403_63@; width@H_403_63@: 310@H_403_63@px@H_403_63@@H_403_63@; margin@H_403_63@: 0@H_403_63@@H_403_63@@H_403_63@;padding@H_403_63@: 0@H_403_63@@H_403_63@@H_403_63@; display@H_403_63@: none@H_403_63@@H_403_63@;}@H_403_63@@H_403_63@ li@H_403_63@ a@H_403_63@ { line-height@H_403_63@: 30@H_403_63@px@H_403_63@@H_403_63@; padding@H_403_63@: 5@H_403_63@px@H_403_63@@H_403_63@; text-decoration@H_403_63@: none@H_403_63@@H_403_63@; color@H_403_63@: black@H_403_63@@H_403_63@; display@H_403_63@: block@H_403_63@@H_403_63@;}@H_403_63@@H_403_63@ li@H_403_63@ a@H_403_63@:hover@H_403_63@{ background@H_403_63@: #f90@H_403_63@@H_403_63@@H_403_63@; color@H_403_63@: white@H_403_63@@H_403_63@; }@H_403_63@@H_403_63@ @H_403_63@</style@H_403_63@>@H_403_63@
    <script@H_403_63@>@H_403_63@ function@H_403_63@ solve@H_403_63@(data)@H_403_63@ {@H_403_63@//得到百度API返回的数据@H_403_63@ var@H_403_63@ Show = document.getElementById('show'@H_403_63@); var@H_403_63@ html = ""@H_403_63@; //debugger@H_403_63@ if@H_403_63@(data.s.length) { Show.style.display = 'block'@H_403_63@; var@H_403_63@ len = data.s.length; for@H_403_63@ (var@H_403_63@ i=0@H_403_63@; i<len; i++) {//逐条显示@H_403_63@ html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='@H_403_63@+data.s[i]+'">'@H_403_63@+ data.s[i] +'</a></li>'@H_403_63@; } Show.innerHTML = html; }else@H_403_63@{ Show.style.display = "none"@H_403_63@; } } window.onload = function@H_403_63@()@H_403_63@{@H_403_63@ var@H_403_63@ oQ = document.getElementById('q'@H_403_63@),Show = document.getElementById('show'@H_403_63@); oQ.onkeyup = function@H_403_63@()@H_403_63@{@H_403_63@//当有键盘事件的时候@H_403_63@ if@H_403_63@(this@H_403_63@.value!=""@H_403_63@){ var@H_403_63@ oScript = document.createElement("script"@H_403_63@);//创建一个script标签，准备引入资源@H_403_63@ oScript.src = 'http://suggestion.baidu.com/su?wd='@H_403_63@+this@H_403_63@.value+'&cb=solve'@H_403_63@; /*上面的两行就相当于<script src="ziyuan"> <\/script>*/@H_403_63@ document.body.appendChild(oScript);//加入的body中@H_403_63@ } else@H_403_63@{ Show.style.display = "none"@H_403_63@; } } } @H_403_63@</script@H_403_63@>@H_403_63@
</head@H_403_63@>@H_403_63@
<body@H_403_63@>@H_403_63@
    <input@H_403_63@ type@H_403_63@="text"@H_403_63@ id@H_403_63@="q"@H_403_63@>@H_403_63@
    <ul@H_403_63@ id@H_403_63@="show"@H_403_63@>@H_403_63@</ul@H_403_63@>@H_403_63@
</body@H_403_63@>@H_403_63@
</html@H_403_63@>@H_403_63@