码迷,mamicode.com
首页 > Web开发 > 详细

笔记-Ajax[4]-JSONP跨域获取数据。

时间:2014-06-14 19:01:07      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   java   http   

JS的跨域:跨域名获取数据,a域名获取b域名中的数据。

解决跨域获取数据的方法也叫JSONP(JSON and Padding)

JSONP方法:

1:服务器代理:XMLHttpRequest代理文件
2:script标签:jsonp(常用);//利用script标签的src引入外部文件的功能,src能够引入任何的文件的类型
3:location.hash方式:iframe
4:window.name方式
5:flash方式
6:html5的postMessage方式

例子:百度输入数据下拉框提示功能

布局代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="css/index.css" type="text/css" />
<script type="text/javascript" src="js/index.js"></script>
</head>

<body>
<input type="text" id="content"/>
<ul id="lists">
</ul>
</body>
</html>

css代码:

#content{width:300px;height:40px;line-height:40px;border:1px solid #ccc;font-size:16px;}
#lists{margin:0px;list-style:none;padding:0px;border:1px solid #ccc;width:300px;display:none;}
#lists li a{display:block;width:300px;height:35px;line-height:35px;font-size:14px;text-decoration:none;
color:#C60;
}
#lists li a:hover{background:#ccc;}

javascript代码:

// JavaScript Document
function getData(data){
    var oUl=document.getElementById("lists");
    var listContents="";
    if(data.s.length){
            oUl.style.display="block";
            for(var i=0;i<data.s.length;i++){
                listContents+="<li><a href=‘http://www.baidu.com/#wd="+data.s[i]+"&rsv_bp=0&tn=baidu&rsv_spt=3&ie=utf-8&rsv_sug3=4&rsv_sug4=361&rsv_sug1=4&f=3&rsp=0&inputT=3257‘ target=‘_blank‘>"+data.s[i]+"</a></li>";    
            }
            oUl.innerHTML=listContents;
    }else{
        oUl.style.display="none";
    }
}
window.onload=function(){
    var oContent=document.getElementById("content");
    var oUl=document.getElementById("lists");
    oContent.onkeyup=function(){
            if(this.value!=""){
                var oScript=document.createElement("script");
                oScript.src="http://suggestion.baidu.com/su?wd="+this.value+"&cb=getData";
                document.getElementsByTagName(‘head‘)[0].appendChild(oScript);        
            }else{
                oUl.style.display="none";
            }
    }
}

效果:

bubuko.com,布布扣

笔记-Ajax[4]-JSONP跨域获取数据。,布布扣,bubuko.com

笔记-Ajax[4]-JSONP跨域获取数据。

标签:style   class   blog   code   java   http   

原文地址:http://www.cnblogs.com/hellome/p/3787604.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!