一个简单的 ASP.NET AJAX 控制

• 下载源代码 - 3.64 KB
• 下载演示 - 7.22 KB

引言

本文面向任何正在寻找易于使用的 AJAX Web 控制的人。

背景

该控制实际上由两部分组成：一个服务器端 WebControl，用于处理来自客户端的 AJAX 请求，以及另一端，一个客户端 JavaScript 对象，用于处理来自服务器的响应。

使用代码

该控制旨在尽可能易于使用，而且确实如此。

服务器端代码

//You have to create the AJAX control 
//in the Page Load method and add it to the page
protected void Page_Load(object sender, EventArgs e)
{
    AJAX aj = new AJAX("myAJAX" //Client ID
        , "AJAXCallbackHandler", //Client callback handler fucntion
        this.AJAXCommandEventHandler, //Command recieved event handler
        this.AJAXErrorOccuredEventHandler); //Error occured event handler

    /*Basically you can add the ajax control anywhere on the page, but 
    be sure not to forget it.*/ 
    this.Controls.Add(aj);
}

//Method that will handle incoming requests from the client
private void AJAXCommandEventHandler(object sender, AJAXCommandEventArgs e)
{   
    /*AJAXCommandEventArgs has only two properties - request and response
      If you want to send something to the client 
      you have to write it in the response property.*/                

    e.Response = "Response from the server";
}

//Method that will fire if some error occurs in AJAX control
private void AJAXErrorOccuredEventHandler(object sender, AJAXErrorEventArgs e)
{
    /*You may for example write the error message to the response.
    AJAXErrorEventArgs has only Message property.*/

    Response.Close();
    Response.Write("Error occured in AJAX control - message: " + e.Message);
    Response.End();
}

当页面加载时，服务器控件将在页面的 head 部分生成一个 JavaScript。该脚本包含您可以用来向服务器发送请求的对象。

客户端代码

<script type="text/javascript">
    function SendToServer(message)
    {
        /*You can access the javascript object with 
        ID that you specified, when creating the control on
        the server.*/

        //You can send requests to server with SendCommand method

        myAJAX.SendCommand("message");  
        /*Optionally you can set timeout paramater 
          in miliseconds - so when the callback
          lasts more than timeout it will return with 'Message timeout'*/          

        myAJAX.SendCommand("message", 10000);//wait for responce for 10s  
    }        

    /*Function that will handle response from the server
    It has to be named as you specified it when creating
    the control the server.
    It takes only one parameter - response object. That consists of 
    Request and Response fields*/
    function AJAXCallbackHandler(resp)
    {
        alert("Request was: " + resp.Request + 
              " and response from the server is " + resp.Response);
    }
    
</script>

关注点

注意 - 如果您在短时间内发送许多回调，内部 JavaScript 对象将发送第一个回调，并将其他回调存储在缓冲区中。当响应返回或发生超时时，它会从缓冲区发送下一个回调，依此类推，直到所有回调都发送完毕。此功能可以确保来自服务器的响应与发送请求的顺序相同。

但是，即使具有此功能，我仍然建议您将这些回调组合成一个更大的回调，而不是按顺序发送许多回调。另一方面，如果您的回调很大，那么第一种选择会更好。

我还进行了一些修复，包括发送回调中的错误字符（'<'，'>'，'='，'?'，'&'，....）。现在，您可以发送任何您想要的内容，它应该可以正常工作。如果不起作用，请告诉我！

就这样了。现在，您可以轻松地在应用程序中使用 AJAX 回调。该控件在 IE7、IE8、Firefox v3.0 和 Opera v9.51 浏览器下进行了测试，并且工作正常。如果您在使用该控件时遇到任何困难，请告诉我。我也很乐意听取一些改进建议。