AJAX CLIENT SERVER
ARCHITECTURE
AJAX
AJAX CLIENT SERVER
ARCHITECTURE
⬥XML is commonly used as the format for
receiving server data
⬥AJAX is a web browser technology
independent of web server software.
⬥A user can continue to use the application
while the client program requests information
from the server in the background.
3 4
⬥AJAX - Asynchronous JavaScript and XML.
⬥A new technique for creating better, faster,
and more interactive web applications with the
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
ARCHITECTURE
⬥Intuitive and natural user interaction.
⬥Clicking is not required, mouse movement is
a sufficient event trigger.
⬥Data-driven as opposed to page-driven.
 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
exchange data with a server behind the
scenes.
⬥ This means that it is possible to update parts
of a web page, without reloading the whole
page.
⬥All modern browsers (Chrome, IE7+, Firefox,
Safari, and Opera) have a built-in
XMLHttpRequest object.
■ Syntax for creating an XMLHttpRequest object:
■ variable = new XMLHttpRequest();
⬥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
address to a file on a server:
xhttp.open("GET", "ajax_test.asp", true);
■ The file can be any kind of file, like .txt and
.xml, or server scripting files like .asp and .php
and XML,
■ and for the XMLHttpRequest object to behave as
AJAX, the async parameter of the open() method
has to be set to true:
xhttp.open("GET", "ajax_test.asp", true);

15 16
 XML HTTP REQUEST OBJECT CALL BACK METHODS

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

17 18

CALL BACK METHODS

⬥Parameters
■ callback − The function to execute. The event
object, XMLHttpRequest, and settings used for
that request are passed as arguments to the
callback.
⬥jQuery
■ fast, small, and feature-rich JavaScript library.
■ It makes things much simpler with an easy-to-use
API that works across a multitude of browsers
● 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
data using JQuery AJAX.
■ JQuery provides load() method to do the job
■ Syntax
[selector].load( URL, [data], [callback] );
to which the request is sent.
⬥data − This optional parameter represents an
object to be passed to the request.
■ If specified, the request is made using the POST
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.
⬥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.
■ 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.

25 26

S.
Methods & Description
N.

CALL BACK METHODS 1 CALL BACK METHODS

⬥Passing data to the Server
■ Many times you collect input from the user and
you pass that input to the server for further
processing.
■ JQuery AJAX made it easy enough to pass
collected data to the server using data parameter
of any available Ajax method.
27
jQuery.ajax( options )
Load a remote page using an HTTP request.
jQuery.ajaxSetup( options )
2
Setup global settings for AJAX requests.
⬥JQuery AJAX Methods
3
jQuery.get( url, [data], [callback], [type] )
Load a remote page using an HTTP GET request.
jQuery.getJSON( url, [data], [callback] )
4
Load JSON data using an HTTP GET request.
jQuery.getScript( url, [callback] )
5
Loads and executes a JavaScript file using an HTTP GET request.
6
jQuery.post( url, [data], [callback], [type] )
Load a remote page using an HTTP POST request.
load( url, [data], [callback] )
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
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