JQuery Ajax

For the development of Ajax jQuery uses various libraries of methods or functions.  Ajax stands for Asynchronous JavaScript and XML. This is a technique for creating fast and dynamic web pages. Ajax permits web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. That is it is possible to update parts of a web page, without reloading the whole page. Ajax is not a new programming language. It is a new way to use the existing standards.

JQuery Ajax
JQuery Ajax

Ajax is based on internet standards and uses a combination of the following ones.

  1. XMLHttpRequest object (to exchange data asynchronously with a server)
  2. JavaScript/DOM (to display/interact with the information)
  3. CSS (to style the data)
  4. XML (often used as the format for transferring data)

Ajax applications are browser enables one and platform independent. For Ajax web development with jQuery Ajax we can request TXT, HTML, XML or JSON data from a remote server using both HTTP Get and HTTP Post.

JQuery Ajax Methods

1)      .load():- This method is simple and very powerful Ajax function.

Syntax: –

$(selector).load(url,data,callback)

The selector parameter defines the HTML elements to change and the url parameter to specify a web address for your data. The data parameter used to send data to the server. The callback parameter uses only if we need to trigger a function after completion.

2)      $.ajax():- This is a low level Ajax function. $.ajax provide more functionality than higher level functions like load, get, and post, but it is also more difficult to use.

Syntax: –

$.ajax(options)

The option parameter takes name|value pairs defining url data, passwords, data types, filters, character sets, timeout and error functions.

3)      $.ajax():- This method performs an AJAX request.

Syntax: –

$.ajax({name:value, name:value, ... })

The possible name values are given below.

1)      Async: – It is a Boolean value indicating whether the request should be handled asynchronous or not. Default is true.

2)      beforeSend(xhr):- It is a function to run before the request is sent.

3)      Cache: – This is a Boolean value indicating whether the browser should cache the requested pages. Default is true.

4)      complete(xhr,status):- This function to run when the request is finished (after success and error functions).

5)      contentType: – The content type used when sending data to the server. Default is: “application/x-www-form-urlencoded”.

6)      Context:- It specifies the “this” value for all AJAX related callback functions.

7)      Data: – This value specifies data to be sent to the server.

8)      dataFilter(data,type):- This function used to handle the raw response data of the XMLHttpRequest.

9)      dataType: – The data type expected of the server response.

10)  error(xhr,status,error):- This function to run if the request fails.

11)  Global: – It is a Boolean value specifying whether or not to trigger global AJAX event handles for the request. Default is true.

12)  ifModified: – This is also a  Boolean value specifying whether a request is only successful if the response has changed since the last request. Default is: false.

13)  Jsonp: – This is a string overriding the callback function in a jsonp request.

14)  jsonpCallback: – It specifies a name for the callback function in a jsonp request.

15)  Password: – It specifies a password to be used in an HTTP access authentication request.

16)  processData: – It is a Boolean value specifying whether or not data sent with the request should be transformed into a query string. Default is true.

17)  scriptCharset: – It specifies the charset for the request.

18)  success(result,status,xhr):- This function helps to run when the request succeeds.

19)  timeout: – The local timeout (in milliseconds) for the request.

20)  traditional:-It is a Boolean value specifying whether or not to use the traditional style of param serialization.

21)  Type: – It specifies the type of request. (GET or POST).

22)  url:-It specifies the URL to send the request to. Default is the current page.

23)  Username: – it specifies a username to be used in an HTTP access authentication request.

24)  Xhr: – A function used for creating the XMLHttpRequest object.

4)      ajaxComplete():- It specifies a function to run when the AJAX request completes.

Syntax: –

$(selector).ajaxComplete(function(event,xhr,options))

The function(event,xhr,options) parameter specifies the function to run when the request completes.

  1. event – contains the event object
  2. xhr – contains the XMLHttpRequest object
  3. options – contains the options used in the AJAX request
  4. ajaxError():- This method specifies a function to run when the AJAX request completes with an error.

Syntax: –

$(selector).ajaxError(function(event,xhr,options,exc))

The function parameter specifies the function to run if the request fails. Additional parameters are,

1)      event – contains the event object

2)      xhr – contains the XMLHttpRequest object

3)      options – contains the options used in the AJAX request

4)      exc – contains the JavaScript exception, if one occurred.

6)      ajaxSend():- This method specifies a function to run before the AJAX request is sent.

Syntax: – $(selector).ajaxSend(function(event,xhr,options))

7)      $.ajaxSetup():- This sets the default values for future AJAX requests.

Syntax: – $.ajaxSetup({name:value, name:value, … })

The possible name/values are,

1)      Async: – It is a Boolean value indicating whether the request should be handled asynchronous or not. Default is true.

2)      beforeSend(xhr):- This function to run before the request is sent.

3)      Cache: – It is a Boolean value indicating whether the browser should cache the requested pages. Default is true.

4)      complete(xhr,status):- This function to run when the request is finished (after success and error functions).

5)      contentType: – The content type used when sending data to the server. Default is: “application/x-www-form-urlencoded”.

6)      context: – It specifies the “this” value for all AJAX related callback functions.

7)      data: – It specifies data to be sent to the server.

8)      dataFilter(data,type):- This function used to handle the raw response data of the XMLHttpRequest.

9)      dataType: – The data type expected of the server response.

10)  error(xhr,status,error):- This function to run if the request fails.

11)  Global: – It is a Boolean value specifying whether or not to trigger global AJAX event handles for the request. Default is true

12)  ifModified: – It is a Boolean value specifying whether a request is only successful if the response has changed since the last request. Default is: false.

13)  Jsonp: – A string overriding the callback function in a jsonp request.

14)  jsonpCallback: – This specifies a name for the callback function in a jsonp request.

15)  password: – It specifies a password to be used in an HTTP access authentication request.

16)  processData: -It is a Boolean value specifying whether or not data sent with the request should be transformed into a query string. Default is true.

17)  scriptCharset: – It specifies the charset for the request.

18)  success(result,status,xhr):- This function to be run when the request succeeds.

19)  Timeout: – The local timeout (in milliseconds) for the request.

20)  Traditional: – It is a Boolean value specifying whether or not to use the traditional style of param serialization.

21)  Type: – It specifies the type of request. (GET or POST).

22)  url: – It specifies the URL to send the request to. Default is the current page.

23)  username: – It specifies a username to be used in an HTTP access authentication request.

24)  Xhr:- A function used for creating the XMLHttpRequest object

8)      ajaxStart():- This method uses to specify a function to run when the first AJAX request begins.

Syntax: –

$(selector).ajaxStart(function())

9)      ajaxStop():- It specifies a function to run when all AJAX requests have completed.

Syntax: –

$(selector).ajaxStop(function())

10)  ajaxSuccess():- This method specifies a function to run an AJAX request completes successfully.

Syntax: –

$(selector).ajaxSuccess(function(event,xhr,options))

11)  $.get():- It loads data from a server using an AJAX HTTP GET request.

Syntax: –

$(selector).get(url,data,success(response,status,xhr),dataType)

The url parameter specifies the url to send the request to. The success(response,status,xhr) parameter specifies the function to run if the request succeeds.Additional parameters are,

  1. response – contains the result data from the request
  2. status – contains the status of the request (“success”, “notmodified”, “error”, “timeout”, or “parsererror”)
  3. xhr – contains the XMLHttpRequest object

The dataType parameter specifies the data type expected of the server response. By default jQuery performs an automatic guess. Possible types are,

1)      “xml” – An XML document

2)      “html” – HTML as plain text

3)      “text” – A plain text string

4)      “script” – Runs the response as JavaScript, and returns it as plain text

5)      “json” – Runs the response as JSON, and returns a JavaScript object

6)      “jsonp” – Loads in a JSON block using JSONP. Will add an “?callback=?” to the URL to specify the callback

12)  $.getJSON():- It loads JSON-encoded data from a server using a HTTP GET request.

Syntax: –

$(selector).getJSON(url,data,success(data,status,xhr))

13)  $.getScript():- It loads (and executes) a JavaScript from the server using an AJAX HTTP GET request.

Syntax: –

$(selector).getScript(url,success(response,status))

14)  load():- It loads data from a server and puts the returned HTML into the selected element.

Syntax: –

$(selector).load(url,data,function(response,status,xhr))

15)  $.param():- This method creates a serialized representation of an array or object (can be used as URL query string for AJAX requests).

Syntax: –

 $.param(object,trad)

16)  $.post():- It loads data from a server using an AJAX HTTP POST request.

Syntax: –

$(selector).post(url,data,success(response,status,xhr),dataType)

17)  serialize():- It encodes a set of form elements as a string for submission.

Syntax: –

$(selector).serialize()

18)  serializeArray():- This method encodes a set of form elements as an array of names and values.

Syntax:-

$(selector).serializeArray()