• JQuery+ajax+jsonp 跨域访问

    Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”，可以让网页从别的网域获取资料。

    关于Jsonp更详细的资料请参考http://baike.baidu.com/view/2131174.htm，下面给出例子：

    一.客户端

    Html代码  收藏代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    2. <html>  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    5. <title>Insert title here</title>  
    6. <script type="text/javascript" src="resource/js/jquery-1.7.2.js"></script>  
    7. </head>  
    8. <script type="text/javascript">  
    9. $(function(){     
    10.     /*  
    11.     //简写形式，效果相同  
    12.     $.getJSON("http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?",  
    13.             function(data){  
    14.                 $("#showcontent").text("Result:"+data.result)  
    15.     });  
    16.     */  
    17.     $.ajax({  
    18.         type : "get",  
    19.         async:false,  
    20.         url : "http://app.example.com/base/json.do?sid=1494&busiId=101",  
    21.         dataType : "jsonp",//数据类型为jsonp  
    22.         jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数  
    23.         success : function(data){  
    24.             $("#showcontent").text("Result:"+data.result)  
    25.         },  
    26.         error:function(){  
    27.             alert('fail');  
    28.         }  
    29.     });   
    30. });  
    31. </script>  
    32. <body>  
    33. <div id="showcontent">Result:</div>  
    34. </body>  
    35. </html>  

     二.服务器端

    Java代码  收藏代码
    1. import java.io.IOException;  
    2. import java.io.PrintWriter;  
    3. import java.util.HashMap;  
    4. import java.util.Map;  
    5. import javax.servlet.http.HttpServletRequest;  
    6. import javax.servlet.http.HttpServletResponse;  
    7. import net.sf.json.JSONObject;  
    8. import org.springframework.stereotype.Controller;  
    9. import org.springframework.web.bind.annotation.RequestMapping;  
    10.   
    11. @Controller  
    12. public class ExchangeJsonController {  
    13.     @RequestMapping("/base/json.do")  
    14.     public void exchangeJson(HttpServletRequest request,HttpServletResponse response) {  
    15.        try {  
    16.         response.setContentType("text/plain");  
    17.         response.setHeader("Pragma", "No-cache");  
    18.         response.setHeader("Cache-Control", "no-cache");  
    19.         response.setDateHeader("Expires", 0);  
    20.         Map<String,String> map = new HashMap<String,String>();   
    21.         map.put("result", "content");  
    22.         PrintWriter out = response.getWriter();       
    23.         JSONObject resultJSON = JSONObject.fromObject(map); //根据需要拼装json  
    24.         String jsonpCallback = request.getParameter("jsonpCallback");//客户端请求参数  
    25.         out.println(jsonpCallback+"("+resultJSON.toString(1,1)+")");//返回jsonp格式数据  
    26.         out.flush();  
    27.         out.close();  
    28.       } catch (IOException e) {  
    29.        e.printStackTrace();  
    30.       }  
    31.     }  
    32. } 
  • 相关阅读:
    【自然框架】终于把源码弄到git上了。
    js的动态加载、缓存、更新以及复用（四）
    ajax的再次封装！(改进版) —— new与不 new 有啥区别？
    ajax的再次封装！
    js的动态加载、缓存、更新以及复用（三）
    js的动态加载、缓存、更新以及复用（二）
    js的动态加载、缓存、更新以及复用（一）
    以【猫叫、老鼠跑、主人醒】为例子，使用 javascript 来实现 观察者模式 （有在线演示）
    以【联动列表框】来看单一职责！
    CPU 多核指令 —— WFE 原理【原创】
  • 原文地址：https://www.cnblogs.com/sikewang/p/5615044.html
Copyright © 2020-2023  润新知