Ajax allows web applications to asynchronously retrieve and send data to a server without interfering with the display of the existing page. It uses a combination of technologies including HTML/XHTML, CSS, DOM, XML/JSON, and the XMLHttpRequest object. Common Ajax techniques are used by popular sites like Google Maps, Gmail, YouTube, and Facebook. Ajax works by creating an XMLHttpRequest object to send GET or POST requests to a server. The server response is then dynamically displayed without a page refresh using the onreadystatechange event.

1. AJAX
Asynchronous JavaScript and XML
Ahmed farag mostafa

2. What is Ajax ?
• an acronym for Asynchronous JavaScript and XML is a group of
interrelated web development techniques used on the client-side to
create asynchronous web applications. With Ajax, web applications can
send data to, and retrieve data from, a server asynchronously (in the
background) without interfering with the display and behavior of the
existing page. Data is usually retrieved using the XMLHttpRequest object.
Despite the name, the use of XML is not needed (JSON is often used
instead), and the requests do not need to be asynchronous.
• Ajax is not a single technology, but a group of
technologies. HTML and CSS can be used in combination to mark up and
style information. The DOM is accessed with JavaScript to dynamically
display, and to allow the user to interact with the information presented.
JavaScript and the XMLHttpRequest object provide a method for
exchanging data asynchronously between browser and server to avoid full
page reloads.

3. Technologies
• HTML (or XHTML) and CSS for presentation
• The Document Object Model (DOM) for
dynamic display of and interaction with data
• XML for the interchange of data.
• The XMLHttpRequest object for asynchronous
communication
• JavaScript to bring these technologies
together

4. Examples of applications using AJAX:
• Google Maps, Gmail, Youtube, and Facebook
tabs.

5. How AJAX Works

6. AJAX app and classic web

7. AJAX app and classic web

8. Ajax
• create The XMLHttpRequest Object
variable=new XMLHttpRequest();
• Send a Request To a Server
- get request
xmlhttp.open("GET","demo_get2.asp?fname=ahmed&lname=farag",tr
ue);
xmlhttp.send();
- post request
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send("fname=ahmed&lname=farag");

9. • Server Response
document.getElementById("myDiv").innerHTML=xmlhttp.res
ponseText;

10. The onreadystatechange Event
• xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

11. Questions?

12. Thanks ^_^