使用Jsonp方式跨域获取json

以前遇到过ajax跨域的问题，自己也写过一个简单的servlet 请求代理 来解决过同源策略带来的ajax跨域问题，详细见这个

 

http://8366.iteye.com/blog/452441

 

 

 今天在网上发现 使用JQuery+Jsonp 也可以解决ajax跨域问题

 

首先看下 jsonp 是如何解决跨域问题的，详细见 下面两篇文章

 

使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup

http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/

 

 

使用 JSONP 实现跨域通信，第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup

 

http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp2/

 

 

 

 一个JQuery+jsnop 跨域的例子

 

步骤：

 

 1.在tomcat中配置两个web项目 一个是 /oa  ，一个是/jofc2

 

 2.在/oa项目中有个testJQuery.jsp 中发送一个ajax请求到 http://localhost:9090/jofc2/ajax.jsp?callback=? 这是一个跨域请求

 

 3.在testJQuery.jsp  中接受跨域请求的结果

 

实现步骤：

 

 

1. ajax请求代码 必须是get方式

//使用jsonp 跨域访问
    $.ajax({
         type: "get",
        //url: "http://www.cnblogs.com/rss",
        //  url: "http://suggest.taobao.com/sug?code=utf-8&q=mp3&callback=callback",
        url: "http://localhost:9090/jofc2/ajax.jsp?callback=?",
      // url: "http://133.64.80.9:9082/bz/ajax.jsp?callback=?",
        beforeSend: function(XMLHttpRequest){
            //ShowLoading();
        },
        dataType : "jsonp",
        jsonp: 'callback',
        success: function(data,textStatus){
            $("#loadrss").html("1234");
            //alert(textStatus);
            alert(data.length);
            alert(data[0].name);
            alert(data[1].name);

            $(data).each(function(i, item){
                //jquery 处理html 数据 ，找title 元素
                //$("#loadrss").append("<li>"+$(domEle).children("title").text()+"</li>");
                //jquery 处理Json 数据
                $("#loadrss").append("<li>"+item.name+"</li>");
            });
        },
        complete: function(XMLHttpRequest, textStatus){
            //HideLoading();
        },
        error: function(){
            //请求出错处理
        }
        });

 

 

 

 2. 服务器端 业务处理，把处理结果写到输出流里 注意输出流利json串的写法

 

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@page import="java.io.PrintWriter"%>


<%
    //服务器端接到回调函数名字输出回调函数，客户端根据回调函数进行解析取得函数中json对象
    response.setContentType("text/html; charset=utf-8");
    String callback=request.getParameter("callback");
    PrintWriter ss = response.getWriter();
    ss.print(callback+"([ { name:\"跨域访问成功！\"},{ name:\"跨域访问失败！\"}])");

%>

 

 

3.这样前台就可以跨域访问资源了，这种解决方案不足之处是：a.服务器端和客户端必须都按照jsnop的方式 b.不能捕获异常

 

4.测试时候 访问 http://localhost:9090/oa/testJQuery.jsp