[Study Note] AJAX basics with jQuery in ASP.NET

AJAX basics with jQuery in ASP.NET

What is AJAX ?

AJAX - Asynchronous Javascript And XML

• Using the browser’s XMLHttpRequest object to transfer data asynchronously between the client and server.
• Using XML (or JSON) as the format for the data being transferred
• Using XHTML and CSS for structure and presentation
• Using the Document Object Model to render information within the browser page
• Using Javascript to bind everything together

Traditional Browser approach to returning requested information to the user

1. The browser requests a page (using GET or POST method) from the web server using the URL of the page.
2. If the page exists, the server responds to the browser by sending to it the requested HTML page.
3. The browser gets the page content and renders it on its surface.

AJAX works way

1. Some JavaScript code on the client begins an HTTP request to the web server by using the XmlHttpRequest object and continues with its execution.
2. After the server has serviced the request, it passes the result back to the browser. This invokes a JavaScript function (the callback) within the client by passing to it, as arguments, the result of the execution as XML document.
3. The callback function parses the data and updates the page’s content.

AJAX libraries

Getting jQuery intellisence

Visual Studio 2010 support for jQuery extends to providing intellisense when working with this library. Visual Studio 2010 is able to use the comments contained on a special version of the jQuery library in order to populate the intellisense window as for the standard .NET classes. To use this feature, all you need to do is to replace the .min suffix with the –vsdoc suffix on the ScriptReference declaration of ScriptManager.

Remember to revert the –vsdoc with the .min suffix when your site will be release.

Writing The Clien-Side Code

.ajax() method of the main jQuery object $. This method accepts, as input, a JavaScript object that has all the elements that are needed to perform an AJAX call to the server.

url: jQuery will use the XmlHttpRequest object to perform a request to the server at this url. It will use the GET method, unless a different value for the type element is specified.

data: Data can be sent to the server, either as query string attached to the url of the Get request, or in a POST request. Data must be expressed as JSON formatted object. Data can be also be sent to the server by directly adding the query string to the url element.

success: This allows us to set the callback function that must be executed on the client after the server response is received successfully. It is used to refresh the page’s content. When called, the parameters that are passed as arguments are: (1)data, that represent the data received by the server, (2) textStatus, that is a string describing the status of the response and (3) XmlHttpRequest that represents the instance of the XmlHttpRequest object used for the request.

dataType: This specifies the type of data expected by the client. It can be ‘html’, ‘text’, ‘xml’, ‘script’,’json’ and ‘jsonp’.

error: This allows you to set a JavaScript callback function that will be invoked if some error occurs during the AJAX request. Its arguments are: (1) XmlHttpRequest, that represents the instance of the XmlHttpRequest object used for the request, (2) textStatus, that is a string describing the status of the response, (3) errorThrown that is a string that represent the description of the error generated.

complete: If this is set, than the JavaScript function that you’ve specified will be invoked at the end of the process, after the sucess or error function are executed. Its arguments are: (1) XmlHttpRequest that represents the instance of XmlHttpRequest object used for the request, (2) textStatus, that is a string describing the status of the response.

Improving the User-Experience

.ajaxStart(fn)/.ajaxSend(fn): Allows you to set a javaScript callback-function to execute just before the AJAX request.

.ajaxComplete(fn): Specifies a JavaScript callback-function to execute just after the AJAX request completion.