JSON跨域请求

原理：首先客户机会注册一个callback，在发送跨域请求之前，会在url后附带注册的callback参数(如：callback1982342322)，随后服务器拿到了callback参数，获取数据后再拼接json数据(如：callback1982342322({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. 错误

　　收集了测试和实战过程中出现的一些错误

    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>

 

 

　　　　　　　　　　　　　　　　　　　　　　

转载于:https://www.cnblogs.com/xmaomao/p/3360989.html