AwesomeAjax

AwesomeAjax is the Ajax framework from AwesomeScript. There are objects and methods that make calling web services and page submissions easier. For now, raw text and JSON objects are supported, but SOAP format may be supported in the future.

 

The Ajax Framework is centered around the AjaxRequest object. All calls are made and received by it and can be reused, aborted and events are fired from it. Below is a tickle Ajax call set up:

<input type="text" id="txt_id" /><input type="button" onclick="search()" value="Search" />
<div id="results_div"></div>

<script type="text/javascript">
function search(){
    var ajax = new AjaxRequest("search.aspx");
    ajax.Parameters.Add("term", $TextBox("txt_id").Text());
    ajax.OnSuccess.Add(fillResults);
    ajax.Send()
}

function fillResults(e){
    var d = $Div("results_div");
    d.ClearContent();
    e.ResponseObject.ForEach(function(){
        var a = new Anchor().Href(this.Url).Text(this.Text);
        d.AddElements([a, new LineBreak()]);
    });
}
</script>

 

There’s a lot to discuss here, so lets break it down.

 

The first 2 lines set up a basic form search and a div container to receive the results. Simple.

 

The search function() is called when the button is clicked. A new ajax request is created and the url of the request is passed as the first argument, but the url can be modified by setting the Url field.

 

Next, we set the parameter to pass. The back in code has to handle the request and will not be discussed here, but by default, requests are sent as JSON serialized but can be modified by setting AjaxRequest.DefaultSerializationMethod (send) and AjaxRequest.DefaultDeserializationMethod (receive). The Parameters field is a dictionary so items can be added, removed, clear and read using the [] indexer syntax.

 

Before we send the request, we have to handle receiving it. The Ajax object contains an OnAbort, OnError, OnSend, OnSuccess and OnTimeOut event. These events work like any other event in the AwesomeScript library. Read more on events. So we had a function to be called. Finally we send the request.

 

For functions (not delegates), a single parameter of the type AjaxEventArgs  is passed which will contain the ResponseObject (deserialized response). For JSON requests, there is a DefaultResponseObjectProperty that will reference the property as the response object. ASP.NET sets JSON responses as an object with a property "d" whose value is the true response, so by default, DefaultResponseObjectProperty is set to "d". Your response has to send serialized JSON objects back to the browser for a response and is not discussed in this article, but do know that for ASP.NET, AwesomeScript is already configured and ready to roll. With that being said, in this example the objects sent back will have two properties: Url, Text and the response sends back an array of results. The Array object contains the ForEach function so we loop through the results, display links to the provided Urls.

 

There is a lot more to the AwesomeAjax library but you have to explore the objects to understand more, so be brave and explore!

AjaxRequest Represents an asynchronous web request.
WebServiceRequest Represents a specialized web request geared towards web services.

Last edited Oct 17, 2011 at 7:45 PM by dahrkdaiz, version 6

Comments

No comments yet.