先在服务器端配置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
另外参考: