JSONドメイン間要求
15657 ワード
原理:まず、クライアントはcallbackを登録する機会があり、ドメイン間要求を送信する前にurlの後に登録されたcallbackパラメータ(例えば、callback 1982422322)を添付し、その後、サーバはcallbackパラメータを取得し、データを取得した後、jsonデータ(例えば、callback 1982422322({status:「ok」,fantasy[{key:value}]})を接続します.ここでは、サーバが取得したcallbackがクライアント上のcallbackと一致することに注意してください.そうしないと、ドメイン間で成功しません.chromブラウザでcallbackxxx is not definedを見つけることができます.
1.クライアントがドメイン間でjsonデータを要求する方式
- $.ajax( type , async , url , dataType , jsonp ,success : function(json){expression...} , error : function(){expression...})
ここで、jqueryはpost方式をサポートしないドメイン間リクエストである
- $.getJSON( url , param , function(json){ expression ... })
2.サーバー側の設定
パラメータ:callback/param...
応答:callback({
status:"ok",
fantasy[{
key1:value1,
key2:value2
}]
});
3.エラー
テストと実戦の過程で発生したいくつかのエラーを収集しました.
4.例:
1.クライアントがドメイン間でjsonデータを要求する方式
- $.ajax( type , async , url , dataType , jsonp ,success : function(json){expression...} , error : function(){expression...})
ここで、jqueryはpost方式をサポートしないドメイン間リクエストである
- $.getJSON( url , param , function(json){ expression ... })
2.サーバー側の設定
パラメータ:callback/param...
応答:callback({
status:"ok",
fantasy[{
key1:value1,
key2:value2
}]
});
3.エラー
テストと実戦の過程で発生したいくつかのエラーを収集しました.
1.Origin null is not allowed by Access-Control-Allow-Origin Ajax
2.jquery12334223232 is not defined callback , callback , callback json
3.XMLHttpRequest cannot load http://i.nubb.com/fcms/conn/shareToFantasy.htm?fid=11&callback=jsoncallback102131211. Origin http://fantasy.nubb.com is not allowed by Access-Control-Allow-Origin.
: google -> -> (T) -> --disable-web-security ( :"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security)
4.例:
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://i.nubb.com/fcms/conn/shareToFantasy.htm?fid=<%=team.getFans_id()%>&format=jsonp",
dataType: "jsonp",
jsonp: "callback",// , jsonp ( :callback)
success: function(json){
//dom
for(var num in json.fantasy){
var html = "<div class=\"tao\"><div class=\"tao1\"><span class=\"t\">"
+"<p><span>$qc-read</span><a href=\"#\"><img src=\"/images/sd_career/liu.gif\" /> </a></p>"
+"</span><div class=\"wenzi\">"
+"<h3>$qc-title</h3>"
+"<div class=\"d\">"
+"<p><a href=\"http://i.nubb.com/fans/Topicdetail.htm?fid=$qc-fid&aid=$qc-aid\" target=\"_blank\">$qc-desc</a>"
+"<dl>"
+"<dt><a href=\"javascript:;\" target=\"_blank\"><img src=\"http://i.nubb.com$qc-ulogo\" /></a></dt>"
+"<dd><a href=\"http://i.nubb.com/home/$qc-uid.htm\" target=\"_blank\">$qc-uname</a> <span id=\"qc-time\"> $qc-time</span></dd>"
+"</dl>"
+"</p></div></div></div></div>";
console.log(json.fantasy[num]);
html = html.replace("$qc-aid", json.fantasy[num].aid);
html = html.replace("$qc-fid", <%=team.getFans_id()%>);
html =html.replace("$qc-read", json.fantasy[num].read);
html =html.replace("$qc-title", json.fantasy[num].title);
html =html.replace("$qc-desc", json.fantasy[num].desc);
html =html.replace("$qc-uid", json.fantasy[num].uid);
html =html.replace("$qc-uname", json.fantasy[num].uname);
html =html.replace("$qc-ulogo", json.fantasy[num].ulogo);
html =html.replace("$qc-time", json.fantasy[num].time.substring(0,10));
$(".taolun").append(html);
}
},
error: function(){
console.log(' ');
}
});
});
</script>