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

使用JSONP实现跨域通信

2016-03-30 10:29 771 查看

引语

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

一、模仿百度搜索栏

１、在Google Chrome获取百度的 API步骤：
打开百度首页

按下F12 审查元素

我们获取百度的 API：http://suggestion.baidu.com/su?wd=h&p=3&cb=window.bdsug.sug&from=superpage&t=1393314327384
即：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>

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

标签：

相关文章推荐

新的分享

章节导航