使用JSONP实现跨域通信

引语

ajax 允许在不干扰 web 应用程序的显示和行为的情况下在后台进行数据检索。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。由于受到浏览器的限制,该方法不允许跨域通信。克服该限制更理想方法是在 Web 页面中插入动态脚本元素,该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据,我们可用JSONP 实现,所谓的 JSONP 服务是一种带有附加功能的 Web 服务,该功能支持在特定于用户的函数调用中打包返回的 JSON 数据。这种方法依赖于接受回调函数名作为请求参数的远程服务。然后该服务生成对该函数的调用,将 JSON 数据作为参数传递,在到达客户端时将其插入 Web 页面并开始执行。
 
一、模仿百度搜索栏
 
1、在Google Chrome获取百度的 API步骤:

打开百度首页

按下F12  审查元素

使用JSONP实现跨域通信使用JSONP实现跨域通信

使用JSONP实现跨域通信

即:http://suggestion.baidu.com/su?wd=关键字&cb=成功后回调函数&t=时间戳
 
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{width:500px; margin:50px auto; height:25px;}
#text1{ width:500px; height:25px;}
#ul1{ width:500px; margin:50px auto; border:1px solid #e5e5e5;}
</style>
<script type="text/javascript">
function succ(json){
var oUl=document.getElementById("ul1");
oUl.innerHTML="";
for(var i=0; i<json.s.length; i++){
var oLi=document.createElement("li");
oLi.innerHTML=json.s[i];
oUl.appendChild(oLi);
}
}
window.onload=function (){
var oTxt=document.getElementById("text1");
var oS=null;
oTxt.onkeyup=function (){
if (oS){
document.body.removeChild(oS);
}
oS=document.createElement("script");
var url="http://suggestion.baidu.com/su?wd="+oTxt.value+"&cb=succ";
oS.src=url;
document.body.appendChild(oS);
}
}
</script>
</head>
<body>
<div id="div1">
<input type="text" id="text1"/>
</div>
<ul id="ul1">
</ul>
</body>
</html>
 
 
 
上一篇:如何更改nginx网站根目录 以及解析php


下一篇:Ubuntu下安装codeblocks