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