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";
}
}
}
效果：
笔记-Ajax[4]-JSONP跨域获取数据。
时间： 2024-12-25 17:36:40