AJAX CLIENT SERVER

ARCHITECTURE
⬥AJAX - Asynchronous JavaScript and XML.
⬥A new technique for creating better, faster,
and more interactive web applications with the
AJAX help of XML, HTML, CSS, and Java Script.
⬥Ajax uses
■ XHTML for content
■ CSS for presentation
■ Document Object Model and JavaScript for
dynamic content display.
2

AJAX CLIENT SERVER AJAX CLIENT SERVER

ARCHITECTURE ARCHITECTURE
⬥XML is commonly used as the format for ⬥Intuitive and natural user interaction.
receiving server data ⬥Clicking is not required, mouse movement is
⬥AJAX is a web browser technology a sufficient event trigger.
independent of web server software. ⬥Data-driven as opposed to page-driven.
⬥A user can continue to use the application
while the client program requests information
from the server in the background.

3 4
 AJAX CLIENT SERVER
ARCHITECTURE
⬥AJAX is based on the following open
standards:
■ Browser-based presentation using HTML and
Cascading Style Sheets (CSS).
■ Data is stored in XML format and fetched from
the server.
■ Behind-the-scenes data fetches using
XMLHttpRequest objects in the browser.
■ JavaScript to make everything happen.
5 6

XML HTTP REQUEST OBJECT XML HTTP REQUEST OBJECT

⬥The XMLHttpRequest object is used to ⬥All modern browsers (Chrome, IE7+, Firefox,
exchange data with a server behind the Safari, and Opera) have a built-in
scenes. XMLHttpRequest object.
⬥ This means that it is possible to update parts ■ Syntax for creating an XMLHttpRequest object:
of a web page, without reloading the whole ■ variable = new XMLHttpRequest();
page. ⬥Old versions of Internet Explorer (IE5 and
IE6) use an ActiveX Object:
■ variable = new ActiveXObject("Microsoft.XMLHTTP");

7 8
 XML HTTP REQUEST OBJECT XML HTTP REQUEST OBJECT

⬥if the browser supports the XMLHttpRequest ⬥Eg:

object, var xhttp;
■ create an XMLHttpRequest object, if (window.XMLHttpRequest) {
⬥if not, xhttp = new XMLHttpRequest();
■ create an ActiveXObject: } else {
// code for IE6, IE5
xhttp = new
ActiveXObject("Microsoft.XMLHTTP");
}
9 10

XML HTTP REQUEST OBJECT XML HTTP REQUEST OBJECT

⬥Send a Request To a Server Method Description

⬥To send a request to a server, Specifies the type of request
method: the type of request: GET or
■ use the open() and send() methods of the POST
open(method, url, async)
XMLHttpRequest object: url: the server (file) location
xhttp.open("GET", "ajax_info.txt", true); async: true (asynchronous) or false
(synchronous)
xhttp.send();
Sends the request to the server (used
send()
for GET)
Sends the request to the server (used
send(string)
for POST)

11 12
 XML HTTP REQUEST OBJECT ⬥A simple GET request:
⬥Example
xhttp.open("GET", "demo_get.asp", true);
⬥GET is simpler and faster than POST, and can xhttp.send();
be used in most cases. ⬥In the example above, you may get a cached
⬥However, always use POST requests when: result. To avoid this, add a unique ID to the
■ A cached file is not an option (update a file or URL:
database on the server). ⬥Example
■ Sending a large amount of data to the server xhttp.open("GET", "demo_get.asp?t=" +
(POST has no size limitations). Math.random(), true);
■ Sending user input (which can contain unknown xhttp.send();
characters), POST is more robust and secure than
GET. 13 14

XML HTTP REQUEST OBJECT XML HTTP REQUEST OBJECT

⬥The url - A File On a Server ⬥AJAX stands for Asynchronous JavaScript

■ The url parameter of the open() method, is an and XML,
address to a file on a server: ■ and for the XMLHttpRequest object to behave as
xhttp.open("GET", "ajax_test.asp", true); AJAX, the async parameter of the open() method
■ The file can be any kind of file, like .txt and has to be set to true:
.xml, or server scripting files like .asp and .php xhttp.open("GET", "ajax_test.asp", true);

15 16
 XML HTTP REQUEST OBJECT CALL BACK METHODS

⬥With AJAX, the JavaScript does not have to ⬥The ajaxSuccess( callback ) method attaches
wait for the server response, but can instead: a function to be executed whenever an AJAX
■ execute other scripts while waiting for server request completes successfully. This is an
response Ajax Event.
■ deal with the response when the response ready ⬥Syntax
⬥ $(document).ajaxSuccess( callback )

17 18

CALL BACK METHODS

⬥Parameters ⬥jQuery
■ callback − The function to execute. The event ■ fast, small, and feature-rich JavaScript library.
object, XMLHttpRequest, and settings used for ■ It makes things much simpler with an easy-to-use
that request are passed as arguments to the API that works across a multitude of browsers
callback. ● HTML document traversal and manipulation
● event handling
● Animation
● Ajax

19 20
 CALL BACK METHODS CALL BACK METHODS

⬥Loading simple data ⬥URL − The URL of the server-side resource

■ This is very easy to load any static or dynamic to which the request is sent.
data using JQuery AJAX. ⬥data − This optional parameter represents an
■ JQuery provides load() method to do the job object to be passed to the request.
■ Syntax ■ If specified, the request is made using the POST
[selector].load( URL, [data], [callback] ); method.
■ If omitted, the GET method is used.

21 22

CALL BACK METHODS CALL BACK METHODS

⬥callback ⬥Getting JSON data

■ A callback function invoked after the response ■ There would be a situation when server would
data has been loaded into the elements of the return JSON string against your request.
matched set. ■ JQuery utility function getJSON() parses the
● The first parameter passed to this function is the returned JSON string and makes the resulting
response text received from the server string available to the callback function as first
● second parameter is the status code. parameter to take further action.
⬥Syntax
■ [selector].getJSON( URL, [data], [callback] );
23 24
 CALL BACK METHODS CALL BACK METHODS

⬥URL − The URL of the server-side resource ⬥callback −

contacted via the GET method. ■ A function invoked when the request completes.
⬥data − An object whose properties serve as ■ The data value resulting from digesting the
the name/value pairs used to construct a response body as a JSON string is passed as the
query string to be appended to the URL, or a first parameter to this callback, and the status as
the second.
preformatted and encoded query string.

25 26

S.
Methods & Description
N.

CALL BACK METHODS 1 CALL BACK METHODS

jQuery.ajax( options )
Load a remote page using an HTTP request.
jQuery.ajaxSetup( options )
2
Setup global settings for AJAX requests.
⬥Passing data to the Server ⬥JQuery AJAX Methods
3
jQuery.get( url, [data], [callback], [type] )
Load a remote page using an HTTP GET request.
■ Many times you collect input from the user and jQuery.getJSON( url, [data], [callback] )
4
you pass that input to the server for further Load JSON data using an HTTP GET request.
jQuery.getScript( url, [callback] )
processing. 5
Loads and executes a JavaScript file using an HTTP GET request.
■ JQuery AJAX made it easy enough to pass 6
jQuery.post( url, [data], [callback], [type] )
Load a remote page using an HTTP POST request.
collected data to the server using data parameter
load( url, [data], [callback] )
of any available Ajax method. 7
Load HTML from a remote file and inject it into the DOM.
serialize( )
8
Serializes a set of input elements into a string of data.
serializeArray( )
9 Serializes all forms and form elements like the .serialize() method but returns a
27 JSON data structure for you to work with. 28
 JQuery AJAX Events

S.N
Methods & Description
.
ajaxComplete( callback )
1
Attach a function to be executed whenever an AJAX request completes.
ajaxStart( callback )
2 Attach a function to be executed whenever an AJAX request begins and there is none already
active.
ajaxError( callback )
3
Attach a function to be executed whenever an AJAX request fails.
ajaxSend( callback )
4
Attach a function to be executed before an AJAX request is sent.
ajaxStop( callback )
5
Attach a function to be executed whenever all AJAX requests have ended.
ajaxSuccess( callback )
6
Attach a function to be executed whenever an AJAX request completes successfully.
29