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





 另外参考：


http://www.cnblogs.com/william-lin/archive/2012/08/22/2650880.html





        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/userbibi/p/2801232.html