首页 > 代码库 > JS-JQuery(JSONP)调用WebService跨域若干技术点

JS-JQuery(JSONP)调用WebService跨域若干技术点

2024-07-04 15:30:16   223人阅读

 

1、JSONP:JSON With Padding，让网页从别的网域获取信息，也就是跨域获取信息，可以当做是一种“工具”，大多数架构Jquery、EXTjs等都支持。

　　由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.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="http://www.mamicode.com/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跨域访问点开见此。


联系
我们