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

 

 另外參考:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM