What is Ajax - Basics of Ajax

1
iFour Consultancy
https//www.ifourtechnolab.com/custom-software-dev
elopment
2
What is Ajax?

• An Asynchronous JavaScript and XML
• Technique for creating fast and dynamic web pages
• It allows web pages to be updated asynchronously
  by exchanging small amounts of data with the
  server behind the scenes
• This means that it is possible to update parts of
  a web page without reloading the whole page
• Classic web pages, (which do not use AJAX) must
  reload the entire page if the content should
  change
• Examples of applications using AJAX Google Maps,
  Gmail, YouTube, and Facebook

https//www.ifourtechnolab.com/custom-software-dev
elopment
3
Why use Ajax?

• Client/Server Apps
• Dynamic data
• Static forms, controls, code, etc
• Efficient, but not flexible
• Traditional Web Apps
• Dynamic data
• Dynamic forms, controls, code, etc
• Flexible, but inefficient, and noticeably slow
• Ajax Apps
• Dynamic data
• Static or dynamic forms, controls, code, etc
• Best of both worlds

https//www.ifourtechnolab.com/custom-software-dev
elopment
4
Why use Ajax?

• Multithreaded data retrieval from Web servers
• Pre-fetch data before needed
• Progress indicators
• Appearance of speed
• Avoids need for setTimeout()
• Less bandwidth required less server load
• Reload partial page, not entire page
• Load data only, not even partial page

https//www.ifourtechnolab.com/custom-software-dev
elopment
5
jQuery AJAX

• JQuery is a great javascript tool which provides
  a rich set of AJAX methods to develop next
  generation web application
• All jQuery AJAX methods use the ajax() method,
  this method is mostly used for requests where the
  other methods cannot be used
• Syntax
• .ajax(namevalue, namevalue, ... )
• The parameters specifies one or more name/value
  pairs for the AJAX request
• Possible names/values in the table below
• async A Boolean value indicating whether the
  request should be handled asynchronous or not.
  Default is true
• beforeSend() A function to run before the
  request is sent

https//www.ifourtechnolab.com/custom-software-dev
elopment
6
jQuery AJAX

• cache A Boolean value indicating whether the
  browser should cache the requested pages. Default
  is true
• contentType The content type used when sending
  data to the server
• context Specifies the "this" value for all AJAX
  related callback functions
• data Specifies data to be sent to the server
• dataType The data type expected of the server
  response
• complete(status) A function to run when the
  request is finished (after success and error
  functions)
• error(status,error) A function to run if the
  request fails
• success(result,status) A function to be run
  when the request succeeds
• url Specifies the URL to send the request to.
  Default is the current page
• type Specifies the type of request. (GET or
  POST)

https//www.ifourtechnolab.com/custom-software-dev
elopment
7
Loading Simple Data
selector.load( URL, data, callback )
selector.load( URL, data, callback )

• Here is the simple syntax for load() method
• selector.load( URL , data , callback )
• URL The URL of the server-side resource to
  which the request is sent
• data Represents an object whose properties are
  serialized into properly encoded parameters to be
  passed to the request. If specified, the request
  is made using the POST method. If omitted, the
  GET method is used
• callback This function invoked after the
  response data has been loaded into the elements
  of the matched set
• The first parameter passed to this function is
  the response text received from the server and
  second parameter is the status code

https//www.ifourtechnolab.com/custom-software-dev
elopment
8
Getting JSON data

• Here is the simple syntax for getJSON() method
• selector.getJSON( URL , data , callback )
• URL The URL of the server-side resource
  contacted via the GET method
• data An object whose properties serve as the
  name/value pairs used to construct a query string
  to be appended to the URL, or a preformatted and
  encoded query string
• callback A function invoked when the request
  completes. The data value resulting from
  digesting the response body as a JSON string is
  passed as the first parameter to this callback,
  and the status as the second

https//www.ifourtechnolab.com/custom-software-dev
elopment
9
jQuery AJAX Methods

• Following are all important JQuery AJAX methods
  for programming
• jQuery.ajax(options) Load a remote page using
  an HTTP request.
• jQuery.ajaxSetup(options) Setup global settings
  for AJAX requests.
• jQuery.get( url, data, callback, type )
  Load a remote page using an HTTP GET request.
• jQuery.post( url, data, callback, type )
  Load a remote page using an HTTP POST request.
• jQuery.getJSON( url, data, callback ) Load
  JSON data using an HTTP GET request.
• jQuery.getScript( url, callback ) Loads and
  executes a JavaScript file using an HTTP GET
  request.

https//www.ifourtechnolab.com/custom-software-dev
elopment
10
jQuery AJAX Methods

• load( url, data, callback ) Load HTML from
  a remote file and inject it into the DOM
• serialize( ) Serializes a set of input elements
  into a string of data
• serializeArray( ) Serializes all forms and form
  elements like the .serialize() method but returns
  a JSON data structure

https//www.ifourtechnolab.com/custom-software-dev
elopment
11
jQuery AJAX Events

• You can call various JQuery methods during the
  life cycle of AJAX call progress. Based on
  different events/stages following methods are
  available
• ajaxComplete( callback ) Attach a function to
  be executed whenever an AJAX request completes
• ajaxStart( callback ) Attach a function to be
  executed whenever an AJAX request begins and
  there is none already active
• ajaxError( callback ) Attach a function to be
  executed whenever an AJAX request fails
• ajaxSend( callback ) Attach a function to be
  executed before an AJAX request is sent
• ajaxStop( callback ) Attach a function to be
  executed whenever all AJAX requests have ended
• ajaxSuccess( callback ) Attach a function to be
  executed whenever an AJAX request completes
  successfully

https//www.ifourtechnolab.com/custom-software-dev
elopment
12

• Thank You..

https//www.ifourtechnolab.com/custom-software-dev
elopment