Ajax Requests Directly with jQuery

jQuery has methods which allow us to make Ajax requests directly. The Ajax.BeginForm() and Ajax.ActionLink() methods are translated into jQuery Ajax calls. jQuery needs specific information for the requests. The information in AjaxOptions object provides jQuery with everything it needs to produce correct Ajax calls. The settings of AjaxOptions parameter tell MVC how to render the jQuery call in HTML page.

The definition of the Ajax call in jQuery has many parameters which can be looked at http://api.jquery.com/jQuery.ajax/. In addition to $.ajax() function, jQuery also provides two other specialized functions $.post() and $.get(). They perform same functionality as $.ajax() but implements an specific HTTP method as indicated by its names.

A simplified $.ajax() definition is given below:

$.ajax ({

               type: ""

               data: "",

               url : "",

               dataType: "",

               beforeSend: handler,

               complete: handler,

               success: handler,

               error: handler

});

The parameters are listed and described below:

Figure 1. Parameters of jQuery Ajax Call

Using jQuery ajax() method gives us full control over the requests but only drawback is that it involves a bit more work (but nothing significant). Let’s see how we can use jQuery ajax() method to replace Ajax link we created to load picture.

The code is implemented below in Figure 2:

Figure 2. jQuery ajax() Method to Load a picture