jquery ajax跨域用jsonp方式調用web服務的例子

在做一個demo的項目，需要將php，.net的幾個人，加起來一起做個web系統。考慮到語言不通，demo要的急。就直接web使用html+js+asmx服務的方式進行開發。

資料請求及返迴流程是這樣的：

理解了上面的流程圖，其實實現起來是很簡單的。

1、html中引用jquery

2、jquery使用ajax調用遠程web服務，這裡需要定義為JSONP格式，並且加上callback參數

$.ajax({ 
        //url:"http://y.com/ceshi.php", 
        url:"http://192.168.3.5:8880/stat.asmx/Login", 
        dataType:'jsonp', 
        data: {
                    name:"a",
                    pwd:"a"
               },
        jsonp:'callback',       
        success:function(result) { 
            alert(JSON.stringify(result));
        }, 
        timeout:3000 
    });
其中?jsoncallback=?是必須的，需要在伺服器端，針對這個參數對返回的jsonp進行參數組合。

這裡需要注意，web服務的真正地址是：服務.asmx/Login參數。login是.net的函數名稱

 

3、伺服器端擷取資料庫資料後，對傳回值進行封裝

 public void Login(string name, string pwd)
        {
            AP.Model.TB_User user = new TB_User();
            AP.BLL.TB_User userbll=new AP.BLL.TB_User();
            HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";
            string jsoncallback = CheckResponse.GetResponse("callback");   
            user = userbll.GetModel(name, pwd);
            string rehtml = CheckResponse.Cleaner(CheckResponse.GetObjectJson(user));
            string returnvalue = "";
            returnvalue = returnvalue + (jsoncallback + "({\"jsondata\":\"" + rehtml + "\"})");
           // return returnvalue;
            HttpContext.Current.htm = htm&(returnvalue);
            HttpContext.Current.Response.End();
        }

這使用了Newtonsoft的序列化組件

 /// <summary>
    /// 序列化資料到json
    /// </summary>
    /// <param name="value"></param>
    /// <returns></returns>
    public static string GetObjectJson(object value)
    {
        return Newtonsoft.Json.JsonConvert.SerializeObject(value);
    }

其中，jsonp的字串可能會有特殊字元串，需要轉移一下。

 /// <summary>
    /// json html字串轉義
    /// </summary>
    /// <param name="_s"></param>
    /// <returns></returns>
    public static string Cleaner(string _s)
    {
        if (_s == null) return "";
        System.Text.StringBuilder sb = new System.Text.StringBuilder(_s);
        sb.Replace(@"\", @"\\");
        sb.Replace(@"'", @"\'");
        sb.Replace(@"""", @"\""");
        sb.Replace(Environment.NewLine, @"\n");   //替換連在一起的\r\n
        sb.Replace("\n", @"\n");               //單個替換
        sb.Replace("\r", @"\n");
        return sb.ToString();
    }

可以看到這段代碼根據callback參數進行了封裝。

context.Response.ContentType = "text/json";
returnvalue = returnvalue + (jsoncallback + "({\"datata\":\"" + rehtml + "\"})");

跨域調用不是很困難的事情。

跨域相關問題及同源策略

域這麼麻煩為什麼瀏覽器或者系統直接允許不就行了？跨域的初衷是什嗎？

初衷主要是瀏覽器的安全性原則：同源策略。

 

受同源策略限制，JavaScript不能跨域!　這裡提到了同源策略，那麼什麼是同源策略呢？

同源策略(Same Origin Policy)，它是由Netscape提出的一個著名的安全性原則。 現在所有支援JavaScript 的瀏覽器都會使用這個策略。同源策略阻止從一個域上載入的指令碼去擷取或操作另一個域上的文件屬性。也就是說，受到請求的 URL 的域必須與當前 Web 頁面的域相同。這說明瀏覽器隔離來自不同源的內容，以防止它們之間的操作。

 

為何要使用同源策略？
答案：安全！ 一個簡單的例子：比如一個駭客，他利用Iframe把真正的銀行登入頁面嵌到他的頁面上，當你使用真實的使用者名稱，密碼登入時，他的頁面就可以通過Javascript讀取到你的表單中input中的內容，這樣使用者名稱，密碼就輕鬆到手了。後果會非常嚴重！

那麼什麼才是同源？
所謂同源是指網域名稱，協議，連接埠均相同。

同源的幾種情況：

1.不同網域名稱屬於跨域，如：www.a.com和www.b.com，另外www.a.com 和www.a.com.cn 也屬於不同網域名稱。

2.主網域名稱和子網域名稱（次層網域、第三層網域名等）跨域，如：www.a.com 和 sub.a.com
屬於跨域，sub.a.com 和 sub1.a.com 之間也是跨域。

3.不同協議屬於跨域，如：http://www.a.com 和 https://www.a.com。

4.不同連接埠，如： www.a.com:80和 www.a.com:81 。

5.IP和網域名稱屬於跨域，如：123.125.106.16 和 t.suchso.com。