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

jsonp跨域请求实现获取Google搜索结果

2014-11-02 20:55 751 查看

【jsonp跨域请求原理】

1）输入带参函数url

2）返回函数带实参数据

2）包装函数使用引入js到本地

3）执行带参自定义函数解析相关数据

【以Google api搜索为例】

① 首先我们分析url

http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=key&callback=delres

有两个参数是我们需要关心的

一个是 q ：我们要查询的数据

callback ：我们返回调用的函数名

然后我们直接地址栏输入该地址回车

② 分析返回的数据

然后看到结果如下

delres(
{"responseData": {
"results":[
{"GsearchResultClass":"GwebSearch",
"unescapedUrl":"http://en.wiktionary.org/wiki/%E4%BA%94",
"url":"http://en.wiktionary.org/wiki/%25E4%25BA%2594",
"visibleUrl":"en.wiktionary.org",
"cacheUrl":"http://www.google.com/search?q\u003dcache:iPJPy6Sdd7YJ:en.wiktionary.org",
"title":"\u003cb\u003e五\u003c/b\u003e- Wiktionary",
"titleNoFormatting":"五- Wiktionary",
"content":"One possibility is that \u003cb\u003e五\u003c/b\u003ewas originally ..."<span style="font-family: Arial, Helvetica, sans-serif;">                                                    ...</span>

<pre name="code" class="javascript"><pre name="code" class="javascript">			  "responseStatus": 200
}
}
)

对结果而言我们看到的是

返回结果是一个:

函数(json对象);

这就是带参数的回调函数，我们要取到数据

那么就得先风装

<script>delres(json_obj);</script>

然后写入本地dom 那么他就会自动执行delres函数并携带数据

③ 根据上述的结构我们只要在本地

写一个与回调函数同名(回调函数名是自定义的)的函数取出数据就可以了

【完整代码如下】

<!doctype html>
<html>
<head>
<title>jsonp的跨域请求</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function loadres(){
var rescot = document.getElementById('search');
var key = rescot.value;
var url = 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q='+key+'&callback=delres';
var scr = document.createElement('script');
scr.setAttribute('type','text/javascript');
scr.setAttribute('src',url);
document.getElementsByTagName('head')[0].appendChild(scr);
}
function delres(resobj){
var res = resobj.responseData.results;
var str = '';
for(var i in res){
str +='<p><a href="'+res[i].url+'">'+res[i].title+'</a></p>';
str +='<p>'+res[i].content+'</p>';
}
var resdiv = document.getElementById('res');
resdiv.innerHTML = str;
}
</script>
<style type="text/css">

</style>

</head>
<body>
<div>
输入搜索内容：<input type="text" id="search"/><br/>
<input type="button" value="搜索" onclick="loadres();"/>
</div>
<div id="res"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航