[go: up one dir, main page]
Scribd
Upload
269 views25 pages

UNIT III - AJAX With PHP

AJAX allows for asynchronous updating of web pages without reloading. It uses the XMLHttpRequest object to make HTTP requests from the browser to a server in the background. The responses can then be used to update portions of the web page via JavaScript and DOM manipulation. Key aspects of AJAX include JavaScript, DOM, XMLHttpRequest object, and asynchronous HTTP requests/responses between the browser and server.

Uploaded by

praveen
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
269 views25 pages

UNIT III - AJAX With PHP

AJAX allows for asynchronous updating of web pages without reloading. It uses the XMLHttpRequest object to make HTTP requests from the browser to a server in the background. The responses can then be used to update portions of the web page via JavaScript and DOM manipulation. Key aspects of AJAX include JavaScript, DOM, XMLHttpRequest object, and asynchronous HTTP requests/responses between the browser and server.

Uploaded by

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

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
the XMLHttpRequest object
• 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
the XMLHttpRequest object
– 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

You might also like