JS-JQuery(JSONP)調用WebService跨域若干技術點


 

1、JSONP:JSON With Padding,讓網頁從別的網域獲取信息,也就是跨域獲取信息,可以當做是一種“工具”,大多數架構Jquery、EXTjs等都支持。

  由於同源策略,一般來說位於 server1.example.com 的網頁無法與不是 server2.example.com的服務器溝通,而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略,網頁可以得到從其他來源動態產生的 JSON 資料,而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並不是 JSON,而是任意的JavaScript,用 JavaScript 直譯器執行而不是用 JSON 解析器解析。

2、WebService,這里使用VS2010自帶,不使用WCF。

       說明:jsoncallback是針對前台網頁的函數聲明,不要問web服務方法為什么這個樣寫,目的是為了跨域調用需要;此方法發布到IIS后直接調用是執行不了,會出現【HttpContext.Current.Request.Params["jsoncallback"].ToString()】這句代碼出錯返回NullReferenceException。

[WebMethod]

        public   void GetSingleInfo(string   x, string y)

        {

            HttpContext.Current.Response.ContentType   = "application/json;charset=utf-8";

            string   jsonCallBackFunName = HttpContext.Current.Request.Params["jsoncallback"].ToString();

//上面代碼必須

//中間代碼執行自己的業務操作,可返回自己的任意信息(多數據類型)

            GetAttrData   gad = new GetAttrData();

            string   result = gad.GetSingleInfo(x, y);

//下面代碼必須

            HttpContext.Current.Response.Write(string.Format("{0}({1})",   jsonCallBackFunName, result));

            HttpContext.Current.Response.End();

        }

 

3、WebService的Web.config配置,是服務端,和Web服務一起。

       Protocols聲明網頁Get/Post方式,務必要增加這個節點,在system.web節點內。

<system.web>

              <!-- 。。。其他節點 -->

    <webServices>

      <protocols>

        <add name="HttpPost"/>

        <add name="HttpGet"/>

      </protocols>

    </webServices>

  </system.web>

 

4、客戶端網頁(aspx,asp,jsp,html)跨域調用——Jquery為例

<!—頭部引用 -->

    <script type="text/javascript" src="/js/jquery-1.4.4.js"></script>

    <!-- 解決jquery和其他引入的JS的$存在沖突,可選

    <script   type="text/javascript">var JQ=$;</script>

    -->

<!—在功能執行JS調用Web服務的函數內   -->

    JQ.ajax({

             type: "get",

             url: "http://10.0.0.29/TheDimDataService/GetDataString.asmx/GetSingleInfo?jsoncallback=?",

             dataType: "jsonp",

             jsonp: "jsoncallback",

             data: {x:xv,y:yv},  //傳輸的數據

             success: function (result){},  //得到調用服務結果

                       error:OnError 

    });

 

  參考

  [1] JSONP之百度百科

  另WCF Ajax、Jquery跨域訪問點開見此。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM