UNIT III - AJAX With PHP

AJAX
Introduction
• AJAX - Asynchronous JavaScript And XML
• AJAX is not a programming language
• AJAX is a technique for accessing web servers
from a web page
• 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)
• AJAX was popularized in 2005 by Google (with
Google suggest)
AJAX cannot work independently. It is used in combination
with other technologies to create interactive web pages.
• 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.
Why 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
Famous web applications that make use of AJAX
• Google Maps:
– A user can drag an entire map by using the mouse, rather
than clicking on a button.
– http://maps.google.com/
• Google Suggest:
– As you type, Google will offer suggestions. Use the arrow
keys to navigate the results.
– http://www.google.com/webhp?complete=1&hl=en
• Gmail:
– Gmail is a webmail, built on the idea that email can be more
intuitive, efficient and useful.
– http://gmail.com/
• Yahoo Maps:
– Now it's even easier and more fun to get where you're going!
– http://maps.yahoo.com/
Pros and Cons of AJAX
• Pros:
– Allows web applications to interact with data on
the server
– Avoid clunky GET/POST send/receive interfaces
– web apps look more and more like real
applications
– Some applications can only be realized this way
– Eg: Google Suggest offers interactive access to one of the
largest data collections in the world
– For office style applications, user's data is stored
on a reliable server, accessable from any web
browser
• Cons:
– Tough to make compatible across all browsers
– Should have a low-latency connection to the
server
– Can be server intensive
– Eg: Google Suggest generates a search for
every keystroke entered
Working of AJAX
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
XMLHttpRequest Object
• The XMLHttpRequest object can be used to
exchange 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.
• Almost All modern browsers support
the XMLHttpRequest object.
Create an XMLHttpRequest Object
• All modern browsers (Chrome, Firefox, IE7+,

Edge, Safari, Opera) have a built-
in XMLHttpRequest object.
• Syntax:
– var variable_name = new XMLHttpRequest();
• Access Across Domains:
– For security reasons, modern browsers do not allow access across domains
– This means that both the web page and the XML file it tries to load, must be
located on the same server.
• Fetch API:
– Modern Browsers can use Fetch API instead of the XMLHttpRequest Object.
– The Fetch API interface allows web browser to make HTTP requests to web
servers.
– If you use the XMLHttpRequest Object, Fetch can do the same in a simpler
way]
• Old Browsers (IE5 and IE6):
– ld versions of Internet Explorer (5/6) use an ActiveX object instead of
the XMLHttpRequest object
– Syntax:
variable = new ActiveXObject("Microsoft.XMLHTTP");
XMLHttpRequest Object Methods
XMLHttpRequest Object Properties
Sending 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
• Syntax:
– xhttp.open("GET", “URL", true);
– xhttp.send();
• To POST data like an HTML form, add an HTTP header
with setRequestHeader()
– xhttp.setRequestHeader("Content-
type", "application/x-www-form-urlencoded");
• URL: is an address to a file on a server
• Asynchronous - True or False?
– Server requests should be sent asynchronously
– By sending asynchronously, 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 after the response is ready
onreadystatechange Property
• With the XMLHttpRequest object you can define

a function to be executed when the request
receives an answer
• The function is defined in the
onreadystatechange property of
– xhttp.onreadystatechange = function() {
……
};
Server Response
• 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.
• The onreadystatechange function is called
every time the readyState changes.
When readyState is 4 and status is 200, the response is
ready
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 in a
website, you should create one function for
executing the XMLHttpRequest object, and one
callback function for each AJAX task.
• The function call should contain the URL and
what function to call when the response is
ready.
AJAX-XML
• AJAX can be used for interactive
communication with an XML file.
• Example:
Ajax Application to fetch information
from XML file
AJAX-PHP
• Can create more interactive applications using
Ajax with PHP
• Example:
– Ajax application that reflects the Google
suggestions using PHP

UNIT III - AJAX With PHP

Uploaded by

Copyright:

Available Formats

UNIT III - AJAX With PHP

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UNIT III - AJAX With PHP

Uploaded by

Copyright:

Available Formats

AJAX

• All modern browsers (Chrome, Firefox, IE7+,

• With the XMLHttpRequest object you can define

You might also like