首页 > 代码库 > 笔记-Ajax[4]-JSONP跨域获取数据。

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

2024-07-08 04:52:48   221人阅读

JS的跨域：跨域名获取数据，a域名获取b域名中的数据。

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

JSONP方法：

1：服务器代理：XMLHttpRequest代理文件2：script标签：jsonp（常用）;//利用script标签的src引入外部文件的功能，src能够引入任何的文件的类型3：location.hash方式：iframe4：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 Documentfunction 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.mamicode.com/‘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";            }    }}

效果：


联系
我们