為什么已經用了jsonp了，還是存在跨域問題？??！求大神指教?。?！1
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>必應練習</title>
<script type="text/javascript" src="G:\sublime\jquery\jquery-2.1.1.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{background-color: #333;}
#main{background-image: url(river.jpg);width:1228px;height:690px;margin: 0 auto;position: relative;}
#search{position:absolute;top:150px;left: 200px; }
.img{float: left;margin-right:18px;margin-top: -4px;}
.form{float: left;background-color: #fff;padding: 5px;}
.search-text{height:25px;line-height: 25px;width: 350px;border:0;outline: none;float: left;}
/*outline:none外框點擊時高亮取消*/
.search-submit{border: 0;background-image: url(search-button.png);width:29px;height:29px;float: left;}
/*注意??！要想容器里在同一行高低不一致的兩者同樣高低，可以用float:left*/
#tip{
background-color:#fff;
width:389px;
position: absolute;
top:189px;
left:325px;
visibility: hidden;
}
#tip ul{
list-style: none;
}
#tip ul li a{
display: block;
padding:5px;
font-size: 15px;
color: #777;
text-decoration: none;
}
#tip ul li:hover{
background-color:#CCC;
text-decoration: underline;
}
/* 如果想用focus，則必須是在該容器下的 */
</style>
</head>
<body>
<div id="main">
<div id="search">
<img src="logo.png" class="img">
<form class="form">
<input type="text" class="search-text">
<input type="submit" class="search-submit" value="">
<!-- input中是無法插入img的 -->
</form>
</div>
<div id="tip">
<ul id="search-list">
<li><a href="#">搜索內容</a></li>
<li><a href="#">搜索內容</a></li>
<li><a href="#">搜索內容</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".search-text").bind({'focus':function(){
$('#tip').css({'visibility': 'visible'});
var searchresult=$(this).val();
$.ajax({
type: "GET",
url: "http://api.bing.com/qsonhs.aspx?q=" + searchresult,
dataType: "jsonp",
jsonp: "callback",
success: function(data) {
var data=data.AS.Results[0].Suggests;
if (data.success) {
$.each(data,function(index){
$("#search-list").append('<li><a href="#">'+data.eq(index)+'</a></li>')
});
} else {
$("#searchResult").html("出現錯誤：" + data.msg);
} ?
},
error: function(jqXHR){ ? ??
? alert("發生錯誤：" + jqXHR.status); ?
} ??
});
/*$.get('http://api.bing.com/qsonhs.aspx?q='+searchresult,function(data){
var data=data.AS.Results[0].Suggests;//取到的是一個數組
$.each(data,function(index){
$("#search-list").append('<li><a href="#">'+data.eq(index)+'</a></li>')
});
},'json');//data為服務器返回的值
*/
},'blur':function(){
$('#tip').css({'visibility': 'hidden'});}
});
});
</script>
</body>
</html>
2016-08-08
url : 'http://api.bing.com/qsonhs.aspx?type=cb&q='+searchText,
dataType :' jsonp',
jsonp : 'cb',
2016-04-18
?JSONP是一個非常強大的構建mashp的方法，可是不是一個解決跨域訪問問題的萬能藥。它也有一些缺點
?? ?第一也是最重要的：JSONP不提供錯誤處理。如果動態插入的代碼正常運行，你可以得到返回，但是如果失敗了，那么什么都不會發生。你無法獲得一個404的錯誤，也不能取消這個請求
?? ?另外一個重要的缺點是如果使用了不信任的服務會造成很大的安全隱患。 ? ?