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

【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>

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

相关推荐