深入理解jQuery AJAX調用頁面內Web服務

這篇文章的靈感是來自XuebinDing的這篇jQuery AJAX實現調用頁面後台方法和web服務定義的方法，原文講到了這種直接調用aspx頁面內的Web服務方法，非常的輕巧，但作者只給出了代碼，裡面一些的詳細並沒有給出說明，這裡我會花上一些時間來去深入解析一下這其中的原理。

先來看代碼，注意此方法是位於aspx代碼檔案中：

using System.Web.Services;
/// <summary>
/// 無參數的Ajax調用
/// </summary>
/// <returns></returns>
[WebMethod]
public static string SayHello() {
return "Hello Ajax";
}

jQuery來使用json方式調用此方法：

$.ajax({
        type: 'post',
        url: 'TextAjax.aspx/SayHello,
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function(data) {
            alert(data.d);
        }
});

效果如下：

這裡需要注意以下問題：

1、WebMethod方法必須為static方法；

2、Ajax請求不能使用get方式。

3、如果使用的是VS2005，則需要在web.config中system.web段增加對System.Web.Extensions（可能需要System.Web.Extensions.dll）的引用：

<httpModules>
<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
</httpModules>

 

1、為何aspx能實現Web服務？

在我們的印象裡貌似 asp.net的Web服務是以.asmx來結尾的，而我們現在的asp.net也能實現Web服務，這是因為預設Web.config中已經添加了System.Web.Handlers.ScriptModule，它是用於管理asp.net中ajax功能的HTTP模組，這樣不管使用者是請求.asmx檔案還是.aspx檔案，都會通過此處理常式來處理請求。

在Web.Config中可以看到對.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"/>

而在vs2005（ASP.NET2.）中預設對.asmx處理的配置是這樣的：

<add path="*.asmx" verb="*" type="System.Web.Services.Protocols.WebServiceHandlerFactory, System.Web.Services, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" validate="False"/> 

可見對.asmx的處理常式由System.Web.Services.Protocols.WebServiceHandlerFactory變成了System.Web.Script.Services.ScriptHandlerFactory，查看System.Web.Extensions.dll的ScriptHandlerFactory方法：

View Code

public virtual IHttpHandler GetHandler(HttpContext context, string requestType, string url, string pathTranslated)
{
    IHttpHandlerFactory factory;
if (RestHandlerFactory.IsRestRequest(context))
    {
        factory = this._restHandlerFactory;
    }
else
    {
        factory = this._webServiceHandlerFactory;
    }
    IHttpHandler originalHandler = factory.GetHandler(context, requestType, url, pathTranslated);
bool flag = originalHandler is IRequiresSessionState;
if (originalHandler is IHttpAsyncHandler)
    {
if (flag)
        {
return new AsyncHandlerWrapperWithSession(originalHandler, factory);
        }
return new AsyncHandlerWrapper(originalHandler, factory);
    }
if (flag)
    {
return new HandlerWrapperWithSession(originalHandler, factory);
    }
return new HandlerWrapper(originalHandler, factory);
}

ScriptHandlerFactory在相容WebServiceHandlerFactory的基礎上同時增加了RestHandlerFactory的處理。

2、為何是data.d？

在js代碼裡你可以看到對返回對象的訪問是data.d，從控制台也可以看到返回的資料是這樣的：

{"d":"Hello Ajax"}

這個.d是怎麼回事呢？其實它是為了避免各種XSS跨站攻擊，不允許使用GET方式也是出於這個需求。詳細分析可以參見這位asp.net官方人員的回複http://encosia.com/a-breaking-change-between-versions-of-aspnet-ajax/#comment-34045。

擴充

這種調用本頁面的方式還是有很多可取之後，尤其是邏輯比較簡單，不需要封裝公用方法、只在當前頁面內調用的方法來尤其合適。這裡我封裝了用戶端調用的代碼：

/*
 * Ajax請求處理基礎類
*/
function AjaxRequestBuiler(url, data, callback) {
var async = !(callback == undefined);
var response = $.ajax({
        type: 'post',
        url: url,
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        async: async,
        success: function(data) {
if (!!callback) {
                complete(data);
            }
        }
    });
if (!async) {
try {
return eval('(' + response.responseText + ')').d;
        } catch (Error) {

        }
    }
function complete(obj) {
        callback(obj);
    }
}

包含了同步調用和非同步回調的方式，使用如下：

function RequestAjax() {
var d = AjaxRequestBuiler('TestAjax.aspx/SayHello');
    alert('無回調同步載入:' + d);
    AjaxRequestBuiler('TestAjax.aspx/SayHello', null, function(data) {
        alert('回調非同步載入:' + data.d);
        alert('回調成功');
    });
}

代碼