AJAX allows web pages to be updated asynchronously by exchanging data with a server behind the scenes without reloading the page. It uses a combination of technologies including HTML, CSS, JavaScript, XML, and the XMLHttpRequest object. The XMLHttpRequest object is used to send and receive data from a web server asynchronously. It has properties like readyState and responseText and methods like open(), send(), onreadystatechange. The readyState indicates the state of the request and status codes indicate the response from the server. AJAX allows creating fast and dynamic web pages by updating specific parts of a web page after new data is received from the server.

2. ManeeshaK K
maneeshakk16@gmail.com
www.facebook.com/username
twitter.com/username
in.linkedin.com/in/profilename
7559813984
AJAX

3. Disclaimer: This presentation is prepared by trainees of
baabtra as a part of mentoring program. This is not official
document of baabtra –Mentoring Partner
Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd

4. Introduction
• It is an acronym for
Asynchronous
Javascript
And
XML.
• A technique for creating fast & dynamic web
pages.
• It is a group of inter-related technologies

5. What is Ajax ?
AJAX allows you to send and receive data
asynchronously without reloading the web
page.
 A new way to use existing standards.

6. The Core Components :
• HTML & CSS - for presenting.
• JavaScript - for local processing.
• Document Object Model (DOM) – to access
data inside the page or to access elements of
an XML file on the server.
• XMLHttpRequest object – to read/send data
to the server asynchronously.

7. How to code ajax?
Ajax is just a JavaScript function which can be
called like any other functions in JavaScript.
1. create XMLHttpRequest .
2. send server request .
3. Receive response from server.
4. If response is success get the resposeText and display it
on the html page using JavaScript DOM manipulation
5. if repose is error acknowledge accordingly

8. Creating xmlHttpRequest
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera,
Safari
xmlhttp=new XMLHttpRequest();
}
Else
{// code for IE6, IE5
xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP");
}

9. Send a request to server
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

10. Server response
To get the response from a server, use the
responseTextor responseXMLproperty of the
XMLHttpRequestobject.
responseText: Get the response data as a string
responseXML: Get the response data as XML

11. XMLHttpRequest
• The keystone of AJAX is the XMLHttpRequest
object.
• The XMLHttpRequest object is used to exchange data
with a server behind the scenes.

12. Properties of XMLHttpRequest
object
Property Description
onReadyStateChange It is called whenever readystate
attribute changes.It must not be used
with synchronous requests
readyState represents the state of the request
responseText returns response as text
ResponseXML returns response as XML

13. Methods of XMLHttpRequest
object

14. The readyState values
State Description
0 uninitialized
1 loading
2 loaded
3 interactive
4 complete

15. A few status values
Status Description
200 OK
400 Bad Request
404 File Not Found
500 Internal Server Error
505 HTTP version not supported

16. Want to learn more about programming or Looking to become a good programmer?
Are you wasting time on searching so many contents online?
Do you want to learn things quickly?
Tired of spending huge amount of money to become a Software professional?
Do an online course
@ baabtra.com
We put industry standards to practice. Our structured, activity based courses are so designed
to make a quick, good software professional out of anybody who holds a passion for coding.

17. Follow us @ twitter.com/baabtra
Like us @ facebook.com/baabtra
Subscribe to us @ youtube.com/baabtra
Become a follower @ slideshare.net/BaabtraMentoringPartner
Connect to us @ in.linkedin.com/in/baabtra
Give a feedback @ massbaab.com/baabtra
Thanks in advance
www.baabtra.com | www.massbaab.com |www.baabte.com

18. Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
NC Complex, Near Bus Stand
Mukkam, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
Cafit Square,
Hilite Business Park,
Near Pantheerankavu,
Kozhikode
Start up Village
Eranakulam,
Kerala, India.
Email: info@baabtra.com
Contact Us