Scribd
Upload
149 views

AJAX & Jquery Presentation Group22

AJAX allows web pages to asynchronously update parts of a page without reloading the entire page. It uses a combination of technologies including JavaScript, DOM, XMLHttpRequest, and CSS. AJAX enables asynchronous communication with the server in the background to retrieve small amounts of data from the server to update only parts of the page. This provides a faster and more responsive web experience compared to full page reloads.

Uploaded by

Ketan Salvi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
149 views

AJAX & Jquery Presentation Group22

AJAX allows web pages to asynchronously update parts of a page without reloading the entire page. It uses a combination of technologies including JavaScript, DOM, XMLHttpRequest, and CSS. AJAX enables asynchronous communication with the server in the background to retrieve small amounts of data from the server to update only parts of the page. This provides a faster and more responsive web experience compared to full page reloads.

Uploaded by

Ketan Salvi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

AJAX & JQUERY

By: Mohammad Sohel Khan Course: PGDAC


Mayur maruti malavi Batch: ‘B’ August 2019
Kalpana Anil Marathe
Manthan
Mahendra
Mayank
COMPONENTS OF AJAX
• The AJAX cannot work independently.
• It is used in combination with other technologies to create
interactive Web pages that are described in the following list:
• JavaScript:
• Loosely typed scripting language.
• JavaScript function is called when an event occurs in a page.
• Glue for the whole AJAX operation.
• DOM:
• API for accessing and manipulating structured documents.
Represents the structure of XML and HTML documents.
• CSS: Allows for a clear separation of the presentation style
from the content and may be changed programmatically by
JavaScript.
• XMLHttpRequest:
• JavaScript object that performs asynchronous interaction with
the server.
AJAX WORKS
• AJAX allows web pages to be updated asynchronously by
exchanging small amounts of data with the server without
reloading the whole page.
• • Classic web pages,must reload the entire page if the
content should change.
• • Examples of applications using AJAX: Google Maps,
Gmail, Youtube, and Facebook tabs.
Communication
• Communication usually occurs into 2 ways as following:

• Synchronous (Traditional ways)


• Ashynchronous (AJAX ways)
Synchronous Communication
• Classical way of connection
• Publication of information in
static web pages is good
examples
• Communication occurs as
• User Http request to
server
• Server process
request(includes data
retrieval and processing)
• Return a HTML page to
client
Asynchronous Communication
• AJAX enables faster, more
responsive Web applications
through a combination of
asynchronous Javascript, the
Document Object Model
(DOM), and XMLhttpRequest.
AJAX: Create an XMLHttpRequest Object
• The XMLHttpRequest object is used to exchange data
with a server behind the scenes(i,e) possible to update
parts of a web page, without reloading the whole page. •
• Syntax for creating an XMLHttpRequest object:
xmlhttp=new XMLHttpRequest();
AJAX: Send request to a Server
METHOD DESCIPTION SYNTAX

open(method,url,async) Specifies the type of request, xmlhttp.open("


the URL, and if the request GET","ajax_inf
should be handled o.txt",true);
asynchronously or not.
method: the type of request:
GET or POST url: the location
of the file on the server async:
true (asynchronous) or false
(synchronous
send(string) Sends the request off to the xmlhttp.send();
server. string: Only used for
POST requests
AJAX SERVER RESPONSE
• The responseText Property is used when the response
from the server is not XML,returns the response as a
string.
• To get the response from a server, use the responseText
or responseXML property.

PROPERTY DESCRIPTION
RESPONSE TEXT get the response data as a string
RESPONSE XML get the response data as XML data
AJAX :The onreadystatechange event
• When a request is sent to server, we need to perform
some actions based on the response.
• Three important properties of the XMLHttpRequest object:
• I. The onreadystatechange event is triggered every time
the readyState changes.
• II. The readyState property holds the status of the
XMLHttpRequest.
• III. status 200: "OK"
Using a Callback Function
• A callback function is a function passed as a parameter to
another function.
• • If you have more than one AJAX task on your website,
you should create ONE standard function for creating the
XMLHttpRequest object, and call this for each AJAX task.
• The function call should contain the URL and what to do
on onreadystatechange.
ADVANTAGES
• • page can be refreshed dynamically
• • response of the interface to user is faster
• • load much faster because the payload is much smaller
• • reduces the demand for bandwidth
• • allows the web applications to be much more efficient
• • operate more like an application rather than a
standalone program
DISADVANTAGES
• integration of browsers
• hard for the user to bookmark the state of the web page
Real-Life Scenarios for Using AJAX
• Autocomplete search text boxes
• Cascading dropdown list box
• Real-time communication, such as instant messaging
• Real-time data updates, such as score updates
• Immediate forms validation feedback
• Auto save user information
CONCLUSION
• Ajax provides functionality to create a robust web
application.
• If an Ajax web application is coded properly it will run
faster than and as secure as a non-Ajax program.
• Ajax also allows websites to reduce their overall
bandwidth usage and server load by reducing the amount
of full page loads.

You might also like