使用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