|
|
业务需求:一台独立的新闻服务器(A),对外提供新闻。 客户(B)网页引入A的js,即可请求新闻。
B请求新闻所产生的页面有A的js生成。
A提供<script type="text/javascript" src="http://newsdomain/js/news.js" > </script> 来让B 引入。
一般的ajax无法跨域请求,jquery的 $.ajax 也是如此。均提示访问被拒绝。这是由于浏览器对javascript的安全机制造成的。请求时 服务器可以得到响应并生成数据,但无法跨域返回给B。查了很多资料,Jquery的jsonp可以实现跨域请求和响应。但是网上的写法各不相同,甚至不全面,经过多番研究得以实现。我将客户端的写法和服务端的写法写出来,与各位同仁一起分享。
首先js的写法。news.js中
function requestNews(page,key,from,to,sort,language){$.getJSON("http://"+domain+"/requestNews/getNews?mehtod=splitPage&page="+page+"&key="+k+"&from="+from+"&to="+to+"&sort="+sort+"&language="+language+"&jsonpcallback=?",null,function call(json){alert(json.info);});}
大家有发现这个url有些特别http://******?参数=值jsonpcallback=? 。这种写法是jsonp的写法。jquery就是通过jsonpcallback=? 这个参数找到回调函数function call(json) 的。所以请求中必须加jsonpcallback=?。
在服务器端会接收jsonpcallback这个值。jquery会把那个?做处理,jsonpcallback=jsonp1287199309053。
$.getJSON这个函数的的参数写法你可以去查一下。$.getJSON(地址,数据,回调函数)
由于我的数据已经与url合并,所以我的第二个参数为null,不写也可。
下面说服务器端对请求的数据如何处理和返回。重点只有两个。
1,json数据格式。2,为了让回调函数可以接受返回值,其写法特被。
第一json数据格式{name:value}.详细的自己去查。
第二。服务端一定要接收jsonpcallback=?
String callBack = req.getParameter("jsonpcallback");
String strJson = {"info":"aaaa"};
String result = callBack (strJson);// 这里很重要。
打印出来的结果就是
jsonp1287199543662({"info":"aaaa"}) //这里要看清楚。
重点讲完了,最后一点就是返回
resp.setContentType("application/json;charset=UTF-8"); //这里的格式是json
resp.setHeader("Cache-Control","no-cache");
PrintWriter out = resp.getWriter();
out.print(callBack); // 这是是print 不是write。
out.close();
这样就实现了ajax跨域访问。 很多事情做出来的时候再回想感觉特简单,当你摸索的过程中却云里雾里 也很烦恼,尤其在网上查到的各种方法都无效的时候 ,烦。 其实就这么简单,如果你有什么疑问欢迎你加入我的QQ 群,一起探讨。 |
|