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

发布时间：2020-12-16 19:13:04 所属栏目：百科来源：网络整理

导读：【jsonp跨域请求原理】 1）输入带参函数url 2）返回函数带实参数据 2）包装函数使用引入js到本地 3）执行带参自定义函数解析相关数据【以Google api搜索为例】 ① 首先我们分析url http://ajax.googleapis.com/ajax/services/search/web?v=1.0q=keycallback

【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?qu003dcache:iPJPy6Sdd7YJ:en.wiktionary.org","title":"u003cbu003e五u003c/bu003e- Wiktionary","titleNoFormatting":"五- Wiktionary","content":"One possibility is that u003cbu003e五u003c/bu003ewas 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!