Scribd
Upload
110 views15 pages

Web Techologies Lecturer: Mrs Matsika Ajax Presentation

AJAX allows web pages to asynchronously update parts of a page without reloading the entire page. It uses the XMLHttpRequest object to make requests to a server in the background. The XMLHttpRequest object sends a request to a server, which processes it and sends a response. JavaScript then reads the response and performs actions like updating parts of the page without reloading. Common examples include interactive maps on Google Maps and autocomplete suggestions in Google Search.

Uploaded by

hcb Malouvre
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
110 views15 pages

Web Techologies Lecturer: Mrs Matsika Ajax Presentation

AJAX allows web pages to asynchronously update parts of a page without reloading the entire page. It uses the XMLHttpRequest object to make requests to a server in the background. The XMLHttpRequest object sends a request to a server, which processes it and sends a response. JavaScript then reads the response and performs actions like updating parts of the page without reloading. Common examples include interactive maps on Google Maps and autocomplete suggestions in Google Search.

Uploaded by

hcb Malouvre
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/ 15

WEB TECHOLOGIES

LECTURER: MRS MATSIKA


AJAX PRESENTATION
GROUP 10
GODWIN TAUYA C208522C
PHILLES ZVENYIKA C209383J
DENFORD MUGADZA R1919877F
PRESENTATION FORMAT
•WHAT IS AJAX?
•PROPERTIES OF AJAX
•HOW AJAX WORK
•The XMLHttpRequest Object
•Create an XMLHttpRequest Object
•Send a Request To a Server
•Server Response
•STATUS
•Server Response Properties
•Server Response Methods
•AJAX - Examples
What is AJAX?
• AJAX = Asynchronous JavaScript And XML.

• AJAX is not a programming language.

• AJAX just uses a combination of:

• A browser built-in XMLHttpRequest object (to request data from a web


server)
• JavaScript and HTML DOM (to display or use the data)
PROPERTIES OF AJAX
• AJAX allows web pages to be updated asynchronously by exchanging
data with a web server behind the scenes.
• This means that it is possible to update parts of a web page, without
reloading the whole page.
How AJAX Works
HOW AJAX WORK
1. An event occurs in a web page (the page is loaded, a button is
clicked)
2. An XMLHttpRequest object is created by JavaScript
3. The XMLHttpRequest object sends a request to a web server
4. The server processes the request
5. The server sends a response back to the web page
6. The response is read by JavaScript
7. Proper action (like page update) is performed by JavaScript
AJAX - The XMLHttpRequest Object
• The keystone of AJAX is the XMLHttpRequest object.
• All modern browsers support the XMLHttpRequest
object.
• The XMLHttpRequest object can be 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.
Create an XMLHttpRequest Object
• Syntax for creating an XMLHttpRequest object:
• variable = new XMLHttpRequest();
Send a Request To a Server
• The XMLHttpRequest object is used to exchange data with a server.
• To send a request to a server, we use the open() and send() methods
of the XMLHttpRequest object:
• xhttp.open("GET", "ajax_info.txt", true);
• xhttp.send();
Server Response
The onreadystatechange Property
• The readyState property holds the status of the XMLHttpRequest.

• The onreadystatechange property defines a function to be executed


when the readyState changes.

• The status property and the statusText property holds the status of
the XMLHttpRequest object
STATUS
• 200: "OK"
• 403: "Forbidden"
• 404: "Page not found"
• For a complete list go to the Http Messages Reference
Server Response Properties
Property Description

responseText get the response data as


a string
responseXML get the response data as
XML data
Server Response Methods
Method Description
getResponseHeader() Returns specific header
information from the
server resource
getAllResponseHeaders() Returns all the header
information from the
server resource
AJAX - Examples
Google Maps
• A user can drag an entire map by using the mouse, rather than clicking on a
button.
Google Suggest
• As you type, Google offers suggestions. Use the arrow keys to navigate the
results.
Gmail
• Gmail is a webmail built on the idea that emails can be more intuitive, efficient,
and useful.
Yahoo Maps (new)
• Now it's even easier and more fun to get where you're going!
THANK YOU

You might also like