Nowadays IT developers is fan of using Ajax due to requirement of time and rendering HTML without page refreshing. Mainly It works on asynchronous mode but we can use it in synchronous mode also.
The jQuery library provides full Ajax capabilities.The functions and methods therein allow us to load data from the server without a browser page refresh.
Mostly we use following methods:
jQuery.ajax() : Perform an asynchronous HTTP (Ajax) request.
Syntax :
1 | jQuery.ajax( url [, settings ] ) |
url
Type: String
A string containing the URL to which the request is sent.
Settings : This is the set of key/value pairs which are associated with the Ajax request like dataType, data, Type etc.. All settings are optional.
data :
Type: PlainObject or String or Array
Data to be sent to the server which can be plainObject, string or array. It is converted to a query string, if not already a string.
Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value. like Input elements in a form can be passed as form.serialize();
dataType: ()
Type: String
The type of data that will be returned from the server. If none is specified, jQuery will try to get it based on the MIME type of the response. Available types are following:
1. xml: Returns a XML document that can be processed via jQuery.
2. html: Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.
3. script: Evaluates the response as JavaScript and returns it as plain text.
4. json: Evaluates the response as JSON and returns a JavaScript object.
5. jsonp: Loads in a JSON block using JSONP. Adds an extra “?callback=?” to the end of your URL to specify the callback
6. text: A plain text string.
Multiple data types can be assigned by separating with multiple spacing. For example: “text xml” -> if you want a text response to be treated as XML
error :
Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )
a function to be called when request fails. Given function takes three parameters:
jqXHR ->jQuery XMLHttpRequest object
textStatus -> a string describing the type of error that occurred.eg: timeout, error, abort, parsererror
errorThrown -> the textual portion of the HTTP status eg: ‘Not Found’ or ‘Internal Server Error’.
mimeType
Type: String
A mime type to override the XHR mime type.
Success:
Type: Function( PlainObject data, String textStatus, jqXHR jqXHR )
If request succeeds then function will be called. It takes three arguments which are optional. Generally we receives first plaingObject data returned from the server.
type
type of request to make (“POST” or “GET”), default is “GET”
url (default: The current page)
Type: String
A string containing the URL to which the request is sent.
async (default: true)
If you need synchronous requests, set this option to false.
Examples
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(document).ready(function(){ $.ajax({ url:'fellowtuts.com/getusers.php', type: "GET", data:'id=5', success:function(data){ alert(data) }, error:function(jqXHR, textStatus, errorThrown) { alert(textStatus) } }) }) |
On form Submission :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $(document).ready(function(){ $(form).submit(function(){ $.ajax({ url:'fellowtuts.com/getusers.php', type: "GET", data:'id=5', success:function(data){ alert(data) }, error:function(jqXHR, textStatus, errorThrown) { alert(textStatus) } }) return false; }) }) |
Note: On form submission or click of submit button or click of a link, we must write ‘return false’ statement at the end of event function like given above, to execute it as ajax request. otherwise it will function as default like form submit will refresh page.
This is one of the way of jQuery ajax. we will discuss other ways also.