How To Use Ajax In Javascript

jQuery ajax() Method

The jQuery ajax() method provides core functionality of Ajax in jQuery. Information technology sends asynchronous HTTP requests to the server.

$.ajax(url);  $.ajax(url,[options]);

Parameter description:

url: A string URL to which you want to submit or remember the data
options: Configuration options for Ajax request. An options parameter can exist specified using JSON format. This parameter is optional.

The following table list all the options available for configuring Ajax request.

Options	Clarification
accepts	The content blazon sent in the request header that tells the server what kind of response it will accept in return.
async	By default, all requests are sent asynchronously. Set it false to brand information technology synchronous.
beforeSend	A callback office to be executed earlier Ajax request is sent.
enshroud	A boolean indicating browser enshroud. Default is true.
complete	A callback function to be executed when request finishes.
contentType	A string containing a type of content when sending MIME content to the server.Default is "application/x-www-form-urlencoded; charset=UTF-8"
crossDomain	A boolean value indicating whether a request is a cantankerous-domain.
data	A data to be sent to the server. Information technology can be JSON object, string or array.
dataType	The type of information that you lot're expecting back from the server.
error	A callback function to be executed when the request fails.
global	A Boolean indicating whether to trigger a global Ajax request handler or not. Default is truthful.
headers	An object of additional header key/value pairs to ship along with request.
ifModified	Allow the request to be successful only if the response has inverse since the concluding asking. This is done past checking the Last-Modified header. Default value is false.
isLocal	Permit the current environment to exist recognized as local.
jsonp	Override the callback office proper name in a JSONP request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url.
jsonpCallback	Cord containing the callback role name for a JSONP request.
mimeType	Cord containing a mime blazon to override the XMLHttpRequest mime blazon.
countersign	A password to be used with XMLHttpRequest in response to an HTTP access authentication asking.
processData	A Boolean indicating whether data assigned to data selection volition exist converted to a query string. Default is truthful.
statusCode	A JSON object containing numeric HTTP codes and functions to exist chosen when the response has the corresponding code.
success	A callback office to be executed when Ajax asking succeeds.
timeout	A number value in milliseconds for the request timeout.
blazon	A type of http request e.g. POST, PUT and Become. Default is Become.
url	A string containing the URL to which the request is sent.
username	A username to exist used with XMLHttpRequest in response to an HTTP access authentication request.
xhr	A callback for creating the XMLHttpRequest object.
xhrFields	An object of fieldName-fieldValue pairs to attack the native XMLHttpRequest object.

Allow's come across how to send http requests using $.ajax() (or jQuery.ajax()) method.

Send Ajax Request

The ajax() methods performs asynchronous http request and gets the data from the server. The following example shows how to send a unproblematic Ajax request.

            $.ajax('/jquery/getdata',              // request url              {         success:              part              (data, status, xhr) {// success callback part              $('p').append(data);     } });              <              p              >              </              p              >

In the above example, first parameter '/getData' of ajax() method is a url from which we want to retrieve the information.

By default ajax() method performs http Go request if option parameter does non include method option.

The 2d parameter is options parameter in JSON format where we have specified callback office that will be executed when asking succeeds. Y'all can configure other options every bit mentioned in the in a higher place table.

The post-obit instance shows how to go the JSON data using ajax() method.

            $.ajax('/jquery/getjsondata',  {     dataType:              'json',              // blazon of response data              timeout: 500,              // timeout milliseconds              success:              function              (data,condition,xhr) {              // success callback function              $('p').append(information.firstName + ' ' + data.middleName + ' ' + information.lastName);     },     fault:              office              (jqXhr, textStatus, errorMessage) {              // error callback                            $('p').append('Mistake: ' + errorMessage);     } });              <              p              >              </              p              >

In the above example, beginning parameter is a request url which volition return JSON data. In the options parameter, we have specified dataType and timeout options. The dataType option specifies the type of response information, in this case it is JSON. The timeout parameter specifies request timeout in milliseconds. We accept as well specified callback functions for error and success.

The ajax() method returns an object of jQuery XMLHttpRequest. The following example shows how to apply jQuery XMLHttpRequest object.

                          var              ajaxReq = $.ajax('GetJsonData', {                         dataType:              'json',                         timeout: 500                     });      ajaxReq.success(role              (data, condition, jqXhr) {         $('p').suspend(information.firstName + ' ' + data.middleName + ' ' + data.lastName);     })                      ajaxReq.error(part              (jqXhr, textStatus, errorMessage) {         $('p').append('Error: ' + errorMessage);     })              <              p              >              </              p              >

Send Http POST request using ajax()

The ajax() method can ship all type of http requests. The following example sends http Post asking to the server.

            $.ajax('/jquery/submitData', {     type:              'Mail',              // http method              data: { myData:              'This is my data.'              },              // data to submit              success:              office              (data, status, xhr) {         $('p').suspend('status: '              + status +              ', data: '              + data);     },     fault:              function              (jqXhr, textStatus, errorMessage) {             $('p').suspend('Error'              + errorMessage);     } });              <              p              >              </              p              >

In the above example, first parameter is a url which is used to submit the data. In the options parameter, we have specified a type option equally a POST, then ajax() method will send http Postal service asking. Also, we have specified information option equally a JSON object containing information which will be submitted to the server.

So this mode you can transport Get, Mail service or PUT asking using ajax() method.

Visit jQuery documentation to know more almost ajax() method.

$.ajax() method allows you to transport asynchronous http requests to submit or call up information from the server without reloading the whole page.
$.ajax() can be used to send http Go, POST, PUT, DELETE etc. request. It can recollect whatsoever type of response from the server.
Syntax: $.ajax(url,[options])
Utilize option parameter to customize ajax asking as per your need.

Want to check how much you know jQuery?