深入淺出JSONP--解決ajax跨域問題

取不到數據！

　　上週客戶新買了服務器，原本在舊的服務器上放着客戶的Web主頁信息和一個後臺程序(asp.net)，在客戶的主頁中有一個動態顯示最新消息的處理，這個處理就是通過ajax異步從那個後臺程序中取得的。由於又購買了新的服務器，客戶想把web主頁和那個後臺程序分開來，後臺程序被部署到了新的服務器上。不過這個項目是我的同事小福同志開發的，也就由他來把程序分開部署，然後進行一些小改動。

　　“怎麼最新消息取不到了，異步處理的url也已經添加上新服務器的地址(http://xxxx.com/…/news.ashx)，奇怪了…”小福在一邊抱怨，我看了看IE7下還出了個腳本錯誤”アクセスが拒否されました”的錯誤(環境是日文的，意思是訪問被拒絕了)。網上查了下中文環境應該是”沒有權限”吧。在Firefox和Chrome上是看不到任何腳本錯誤的，不過可以通過Firebug工具測出這個錯誤（”Permission denied to call method XMLHttpRequest.open”）。
同源策略

　　爲什麼會出這樣的錯誤呢？這是因爲所有支持Javascript的瀏覽器都會使用同源策略這個安全策略。看看百度的解釋：

　　同源策略，它是由Netscape提出的一個著名的安全策略。現在所有支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面當一個百度瀏覽器執行一個腳本的時候會檢查這個腳本是屬於哪個頁面的，即檢查是否同源，只有和百度同源的腳本纔會被執行。

　　這就是引起爲何取不到數據的原因了，那如何才能解決跨域的問題呢？沒錯，我們現在可以進入正題，來了解下什麼是JSONP了。
JSON和JSONP

　　JSONP和JSON好像啊，他們之間有什麼聯繫嗎？

　　JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。對於JSON大家應該是很瞭解了吧，不是很清楚的朋友可以去json.org上了解下，簡單易懂。

　　JSONP是JSON with Padding的略稱。它是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。–來源百度

　　JSONP就像是JSON+Padding一樣(Padding這裏我們理解爲填充)，我們先看下面的小例子然後再詳細介紹。
跨域的簡單原理

　　光看定義還不是很明白，那首先我們先來手動做個簡單易懂的小測試。新建一個asp.net的web程序，添加sample.html網頁和一個test.js文件，代碼如下：

sample.html的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>test</title>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>

test.js的代碼：

alert("success");

　打開sample.html後會跳出”success”這樣的這樣的信息框，這似乎並不能說明什麼，跨域問題到底怎麼解決呢？好，現在我們模擬下非同源的環境，剛纔我們不是已經用Visual Studio新建了一個Web程序嗎(這裏我們叫A程序)，現在我們再打開一個新的Visual Studio再新建一個Web程序(B程序)，將我們的之前的test.js文件從A程序中移除然後拷貝到B程序中。兩個程序都運行起來後，Visual Studio會啓動內置服務器，假設A程序是localhost:20001,B程序是localhost:20002，這就模擬了一個非同源的環境了(雖然域名相同但端口號不同，所以是非同源的)。

　　OK，我們接下來應該改下sample.html裏的代碼，因爲test.js文件在B程序上了，url也就變成了localhost:20002。

sample.html部分代碼：

<script type="text/javascript" src="http://localhost:20002/test.js"></script>

　請保持AB兩個Web程序的運行狀態，當你再次刷新localhost:20001/sample.html的時候，和原來一樣跳出了”success”的對話框，是的，成功訪問到了非同源的localhost:20002/test.js這個所謂的遠程服務了。到了這一步，相信大家應該已經大概明白如何跨域訪問了的原理了。

<script type="text/javascript">
//回調函數
function callback(data) {
    alert(data.message);
}
</script>
<script type="text/javascript" src="http://localhost:20002/test.js"></script>

程序B中test.js的代碼：

1 //調用callback函數，並以json數據形式作爲闡述傳遞，完成回調
2 callback({message:"success"});

　這其實就是JSONP的簡單實現模式，或者說是JSONP的原型：創建一個回調函數，然後在遠程服務上調用這個函數並且將JSON 數據形式作爲參數傳遞，完成回調。

　　將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義吧。

　　一般情況下，我們希望這個script標籤能夠動態的調用，而不是像上面因爲固定在html裏面所以沒等頁面顯示就執行了，很不靈活。我們可以通過javascript動態的創建script標籤，這樣我們就可以靈活調用遠程服務了。

程序A中sample的部分代碼：

<script type="text/javascript">
    function callback(data) {
        alert(data.message);
    }
    //添加<script>標籤的方法
    function addScriptTag(src){
    var script = document.createElement('script');
        script.setAttribute("type","text/javascript");
        script.src = src;
        document.body.appendChild(script);
    }

    window.onload = function(){
        addScriptTag("http://localhost:20002/test.js");
    }
</script>

　程序B的test.js代碼不變，我們再執行下程序，是不是和原來的一樣呢。如果我們再想調用一個遠程服務的話，只要添加addScriptTag方法，傳入遠程服務的src值就可以了。這裏說明下爲什麼要將addScriptTag方法放入到window.onload的方法裏，原因是addScriptTag方法中有句document.body.appendChild(script);，這個script標籤是被添加到body裏的，由於我們寫的javascript代碼是在head標籤中，document.body還沒有初始化完畢呢，所以我們要通過window.onload方法先初始化頁面，這樣纔不會出錯。

　　上面的例子是最簡單的JSONP的實現模型，不過它還算不上一個真正的JSONP服務。我們來看一下真正的JSONP服務是怎麼樣的，比如Google的ajax搜索接口：http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=?&callback=?

　　q=?這個問號是表示你要搜索的內容，最重要的是第二個callback=?這個是正如其名錶示回調函數的名稱，也就是將你自己在客戶端定義的回調函數的函數名傳送給服務端，服務端則會返回以你定義的回調函數名的方法，將獲取的json數據傳入這個方法完成回調。有點羅嗦了，還是看看實現代碼吧：
　　

<script type="text/javascript">
    //添加<script>標籤的方法
    function addScriptTag(src){
        var script = document.createElement('script');
        script.setAttribute("type","text/javascript");
        script.src = src;
        document.body.appendChild(script);
    }

    window.onload = function(){
        //搜索apple，將自定義的回調函數名result傳入callback參數中
        addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result");

    }
    //自定義的回調函數result
    function result(data) {
        //我們就簡單的獲取apple搜索結果的第一條記錄中url數據
        alert(data.responseData.results[0].unescapedUrl);
    }
</script>

像這樣的JSONP服務還有很多(以下信息來自使用 JSONP 實現跨域通信，第 1 部分: 結合 JSONP 和 jQuery 快速構建強大的 mashup)：

Digg API：來自 Digg 的頭條新聞：

　　http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?

Geonames API：郵編的位置信息：

　　http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?

Flickr JSONP API：載入最新貓的圖片：

　　http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?

Yahoo Local Search API：在郵編爲 10504 的地區搜索比薩：

　　http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=10504&results=2&output=json&callback=?

　　接下來我們自己來創建一個簡單的遠程服務，實現和上面一樣的JSONP服務。還是利用Web程序A和程序B來做演示，這次我們在程序B上創建一個MyService.ashx文件。

程序B的MyService.ashx代碼：

public class MyService : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            //獲取回調函數名
            string callback = context.Request.QueryString["callback"];
            //json數據
            string json = "{\"name\":\"chopper\",\"sex\":\"man\"}";

            context.Response.ContentType = "application/json";
            //輸出：回調函數名(json數據)
            context.Response.Write(callback + "(" + json + ")");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

程序A的sample代碼中的調用：

<script type="text/javascript">
    function addScriptTag(src){
        var script = document.createElement('script');
        script.setAttribute("type","text/javascript");
        script.src = src;
        document.body.appendChild(script);
    }

    window.onload = function(){
        //調用遠程服務
        addScriptTag("http://localhost:20002/MyService.ashx?callback=person");

    }
    //回調函數person
    function person(data) {
        alert(data.name + " is a " + data.sex);
    }
</script>

　這就完成了一個最基本的JSONP服務調用了，是不是很簡單，下面我們來了解下JQuery是如何調用JSONP的。
jQuery對JSONP的實現

　　jQuery框架也當然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法(詳細可以參考http://api.jquery.com/jQuery.getJSON/)。那我們就來修改下程序A的代碼，改用jQuery的getJSON方法來實現(下面的例子沒用用到向服務傳參，所以只寫了getJSON(url,[callback]))：
　　

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){
        alert(data.name + " is a a" + data.sex);
    });
</script>

　結果是一樣的，要注意的是在url的後面必須添加一個callback參數，這樣getJSON方法纔會知道是用JSONP方式去訪問服務，callback後面的那個問號是內部自動生成的一個回調函數名。這個函數名大家可以debug一下看看，比如jQuery17207481773362960666_1332575486681。

　　當然，加入說我們想指定自己的回調函數名，或者說服務上規定了固定回調函數名該怎麼辦呢？我們可以使用$.ajax方法來實現(參數較多，詳細可以參考http://api.jquery.com/jQuery.ajax)。先來看看如何實現吧：
　　

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
   $.ajax({
        url:"http://localhost:20002/MyService.ashx?callback=?",   
        dataType:"jsonp",
        jsonpCallback:"person",
        success:function(data){
            alert(data.name + " is a a" + data.sex);
        }
   });
</script>

　沒錯，jsonpCallback就是可以指定我們自己的回調方法名person，遠程服務接受callback參數的值就不再是自動生成的回調名，而是person。dataType是指定按照JSOPN方式訪問遠程服務。

　　利用jQuery可以很方便的實現JSONP來進行跨域訪問。先暫時寫到這吧。

深入淺出JSONP--解決ajax跨域問題

SQL優化-20231016

解決ajaxfileupload插件在IE10以下不兼容的問題

JAVA實現查看端口是否被佔用

DWR推送

redis.conf 配置項說明

JAVA ArrayList的實現原理及ArrayList的使用

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結