This project is read-only.

Making an AjaxRequest

NinJa provides a simple means of making Ajax request. There are two types of request; AjaxRequest and WebServiceRequest. More on WebServiceRequest can be found in another tutorial. AjaxRequest wraps an Ajax call in an object and it can be stored in a variable to be reused later. Let's look at a basic AjaxRequest:

var aRequest = new AjaxRequest("/getservertime.aspx");

aRequest.OnSuccess.Add(displayResult);
aRequest.OnError.Add(function () {
    alert("Something went wrong!");
});

function displayResult(e) {
    e = $AjaxEventArgs(e);
    $Span("time").Text(e.ResponseText);
}

Page.OnLoad.Add(function () {
    Page.AddElement(new Span("time"));
    var b = new Button().Text("Get Server Time");

    b.OnClick.Add(function () {
        aRequest.Send();
    });

    Page.AddElement(b);

    b = new Button().Text("Cancel");
    b.OnClick.Add(function () {
        aRequest.Abort();
    });
    Page.AddElement(b);
});
This makes a basic request to the page getservertime.aspx. We will have to assume that the code for getservertime.aspx returns the correct response as we're only interested in handling the NinJa side of it. We attach a function to the OnSuccess event and one to the OnError event. These events follow the standard event model for NinJa.

OnLoad we add a span tag with the id "time" to the page, along with two buttons. The first button will tell the AjaxRequest to send the request. The second button will abort the request. Notice that we're using the same request rather than create a brand new request each time in the function. This allows for less memory use and the ability to abort the ajax request. If the request made is successful, the response text is placed into the "time" span tag. If an error occurs, we notify the user with an alert.

AjaxRequest supports several ways of sending the information to the server with the SerializationMethod. The default for AjaxRequest is UrlEncoded It can be changed to Raw (you set the request yourself) or JSON encoded. SOAP is currently not supported.

In a similar fashion, there is a DeserializationMethodthat can be use to tell the request how to deserialize the response. Default is None but can be set to JSON as well.

You can also modify how the data is sent, through a form POST, GET or DELETE. There's a lot more to the AjaxRequest that's beyond the scope of this tutorial.

To send parameters with your request, use the Parameters dictionary on the AjaxRequest. More information about a Dictionary can be found in other tutorials and documentation. Just know that Parameters represents a list of key/value pairs and is sent a server encoded in the method provided in SerializationMethod on the request.

Also, you can set the TimeOut of the request to determine how long the request should be valid for. Standard is set to two minutes but you can set it to any TimeSpan amount you wish. If the timeout does occur, the OnTimeOut event will fire and should be handled by the developer.

Finally, all requests are sent asynchronously by default. If you wish, you can provide "true" to the first parameter of the Send function and execution of code will halt until the response is received. The response from the server will be returned from the Send function in this case.

Handling AJAX Response

All events fired by an AjaxRequest provide a specialized AjaxEventArgs. This contains information about the request such as the ResponseCode, ResponseText, and ResponseObject if it was deserialized into another format.

Last edited Jun 13, 2012 at 6:08 PM by dahrkdaiz, version 1

Comments

No comments yet.