• jquery ajax 调用webservice以及跨域问题


    先在服务器端配置webconfig,因为默认情况下是不支持post,get访问

    在system.web 中间

     <webServices >
            <protocols >
              <add name="HttpSoap"/>
              <add name="HttpPost"/>
              <add name="HttpGet"/>
              <add name="Documentation"/>
            </protocols>
          </webServices>
     <httpHandlers>
            <remove verb="*" path="*.asmx"/>
            <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/>
          </httpHandlers>

    本地调用

    客户端

     $(document).ready(function () {
    
            $("#button1").click(function () {
                var p_code = $("#pcode").val();
                var m_code = $("#mcode").val();
                var language = 'ch';
    
                $.ajax({
                    type: "post", //访问webservice使用POST方式请求 
                    contentType: "application/json;gb2312", //WebService会返回Json类型 
                    url: "Service1.asmx/GetData", //调用WebService方法 
                    data: "{goods_no:'" + p_code + "',mer_no:'" + m_code + "',language:'" + language + "'}", //要传递的参数,没有传参时,也一定要写上 
                    dataType: "json",
                    success: function (result) {
                        //$("#divtips").slideToggle(1000);
                        $("#divtips").slideDown();
                        result = result.d; //返回d后面的json内容 
                        $("#tips").html(result);
                    }
                });
    
    
            });
        });

    跨域不得不说jsonp=json+padding (json数据填充)

    这是一种通过在客户端注册一个回调函数(callback)传给服务器,然后在服务器端获取函数名并将json数据作为参数填充到函数中返回给客户端((callbackFunName + "([ { name:\"John\"} ] )")),而客户端就在预先定义好的callback回调函数里获取传来的json数据。

    详细原理如下:

    Jsonp原理:

    首先在客户端注册一个callback, 然后把callback的名字传给服务器。

    此时,服务器先生成 json 数据。 

    然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.

    最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

    客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

    超简单的demo如下:

    <!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 Jsonp</title>  
       <script type="text/javascript">  
               function jsonpCallback(result)  
               {  
               alert(result.msg);  
               }  
           </script>  
        <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>  
    </head>  
    <body>  
    </body>  
    </html>   

    其中 jsonCallback 是客户端注册的,获取跨域服务器上的json数据后,回调的函数。

    http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback

    这个 url 是跨域服务器取 json 数据的接口,参数为回调函数的名字,返回的格式为

    jsonpCallback({msg:'this is json data'})  

    jsonp一般都是以get的方式获取的,这边我想介绍2个方法($.getJSON,$.AJAX)

    $.getJSON(url,data,callback)

    举个.NET webservice 的例子
    
    客户端
    
    $.getJSON(
    
                   "http://192.168.0.66/services/WebService1.asmx/ws?callback=?",
    
                { name: "ff", time: "2pm" }, 
    
                   function(data) { alert(data.msg) }
    
       );
    
    服务器端
    
       [WebMethod]
          
        public void ws(string name,string time) {
    
            HttpRequest Request = HttpContext.Current.Request;
            string callback = Request["callback"];
            HttpResponse Response = HttpContext.Current.Response;
           // Response.ContentEncoding = Encoding.UTF8; 
    //
    Response.ContentType = "application/json"; 
    Response.Write(callback
    + "({msg:'this is"+name+"jsonp'})"); Response.End(); }

    如果返回值是一个对象

      $.getJSON( "http://192.168.0.66/services/WebService1.asmx/ws?callback=?",


      { name: "ff", time: "2pm" },

           
    function(result) {   

             for(var i in result) {   

                alert(i+":"+result[i]);//循环输出a:1,b:2,etc.   

            }   

        });   

    
    

     详细内容可参考:http://justcoding.iteye.com/blog/1366102

    $.ajax

    客户端

    <script type="text/javascript"> 
    jQuery(document).ready(function(){ 
    $.ajax({ 
    type : "get", 
    async:false, 
    url : "ajax.ashx", 
    dataType : "jsonp", 
    jsonp: "callbackparam",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback) 
    jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名 
    success : function(json){ 
    alert(json); 
    alert(json[0].name); 
    }, 
    error:function(){ 
    alert('fail'); 
    } 
    }); 
    var a="firstName Brett"; 
    alert(a); 
    }); 
    </script> 
    
    详细出处参考:http://www.jb51.net/article/28502.htm

    服务器端

    <%@ WebHandler Language="C#" Class="ajax" %> 
    using System; 
    using System.Web; 
    public class ajax : IHttpHandler { 
    public void ProcessRequest (HttpContext context) { 
    context.Response.ContentType = "text/plain"; 
    string callbackFunName = context.Request["callbackparam"]; 
    context.Response.Write(callbackFunName + "([ { name:\"John\"} ] )"); 
    } 
    public bool IsReusable { 
    get { 
    return false; 
    } 
    } 
    } 
    
    
    详细出处参考:http://www.jb51.net/article/28502.htm

     另外参考:

  • 相关阅读:
    如果 TCP 是一场恋爱:遇到心动的女孩时,如何去把握?
    再来聊一聊「动态规划」
    如何判断一个数是否在 40 亿个整数中?
    写代码之外,如何再赚一份工资?
    学好这13种数据结构,应对各种编程语言(C++版)
    GitHub 标星 3w+,很全面的算法和数据结构知识
    和程序员小吴学算法文章导航
    Broadcast组件——收发广播应用——捕获屏幕的变更事件——竖屏与横屏切换
    homebrew
    git连接gitlab远程仓库
  • 原文地址:https://www.cnblogs.com/userbibi/p/2801232.html
Copyright © 2020-2023  润新知