那这篇博客就介绍JSONP方式。
JSONP原理
而JSONP就是通过script节点src调用跨域的请求。
举个例子
客户端http://localhost:8080访问服务器http://localhost:11111/user，正常情况下，这是不允许的。因为这两个URL是不同域的。
若我们使用JSONP格式发送请求的话？
http://localhost:11111/user?callback=callbackfunction
则服务器返回的数据如下：
callbackfunction({"id":1,"name":"test"})
注意：其中URL地址中的callback和callbackfunction是随意命名的。
具体的JS实现JSONP代码。
JS中：
- <script>
- varurl="http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callbackfunction";
- varscript=document.createElement('script');
- script.setAttribute('src',url);//loadjavascript
- document.getElementsByTagName('head')[0].appendChild(script);
- //回调函数
- functioncallbackfunction(data){
- varhtml=JSON.stringify(data.RESULTSET);
- alert(html);
- }
- publicclassTestJsonextendsActionSupport{
- @Override
- publicStringexecute()throwsException{
- try{
- JSONObjectjsonObject=newJSONObject();
- Listlist=newArrayList();
- for(inti=0;i<4;i++){
- MapparamMap=newHashMap();
- paramMap.put("bank_no",100+i);
- paramMap.put("money_type",i);
- paramMap.put("bank_name",i);
- paramMap.put("bank_type",85); line-height:18px"> paramMap.put("bank_status",0);
- paramMap.put("en_sign_ways",1);
- list.add(paramMap);
- }
- JSONArrayrows=JSONArray.fromObject(list);
- jsonObject.put("RESULTSET",rows);
- HttpServletRequestrequest=ServletActionContext.getRequest();
- HttpServletResponseresponse=ServletActionContext.getResponse();
- response.setContentType("text/javascript");
- booleanjsonP=false;
- Stringcb=request.getParameter("jsonp");
- if(cb!=null){
- jsonP=true;
- System.out.println("jsonp");
- }else{
- System.out.println("json");
- response.setContentType("application/x-json");
- }
- response.setCharacterEncoding("UTF-8");
- Writerout=response.getWriter();
- if(jsonP){
- out.write(cb+"("+jsonObject.toString()+")");
- System.out.println(jsonObject.toString());
- else{
- out.write(jsonObject.toString());
- }catch(Exceptione){
- e.printStackTrace();
- returnnull;
- }
JQUERY实现JSONP代码。
Jquery从1.2版本开始也支持JSONP的实现。
- $(function(){
- jQuery.getJSON("http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=?",function(data)
- {
- varhtml=JSON.stringify(data.RESULTSET);
- $("#testjsonp").html(html);
- }
- );
- });
JQUERY中Ajax实现JSONP代码。
- $.ajax({
- type:"GET",
- async:false,
- url:"http://localhost:8080/crcp/rcp/t99eidt/testjson.do",226); color:inherit; line-height:18px"> dataType:"jsonp",85); line-height:18px"> success:function(data){
- varhtml=JSON.stringify(data.RESULTSET);
- $("#testjsonp").html(html);
- },85); line-height:18px"> error:function(){
- alert("error");
- }
- });
String cb=request.getParameter("callback");
http://www.w3school.com.cn/jquery/ajax_ajax.asp
jsonp:jsonp,则请求的地址为：
http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=自动生成回调函数名
jsonpCallback:callbackfunction,则请求的地址为：
http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callbackfunction
最后返回前台的是：
callbackfunction(具体的json值)
<script type="text/javascript" src=""></script>
本文转载自：http://blog.csdn.net/yuebinghaoyuan/article/details/32706277
实际应用：上面说了那么多在实践中问题出在总是获取不到返回值，实际上后台默认传入callback参数，此值为jQuery加上一串数字组成，将这个参数与要传回的json串拼成：callback +"("+json+")"形式返回，这样前台就不会报错。后台返回类型设置为text/html;charset=UTF-8即可。特此记录