Download - Ajax
![Page 1: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/1.jpg)
![Page 2: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/2.jpg)
Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring PartnerBaabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
![Page 3: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/3.jpg)
Week Target Achieved
1 30 22
2 30 23
3 30 25
4 30 26
Typing Speed
![Page 4: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/4.jpg)
Jobs AppliedWeek Company Designation Applied Date Current Status
1
2
3
![Page 5: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/5.jpg)
Ajax
Muhammed Ajmal [email protected]/ajuik2008twitter.com/usernamein.linkedin.com/in/
profilename9745020951
![Page 6: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/6.jpg)
Overview
• Introduction• Ajax technologies• XMLHttpRequest• How Ajax work?• Ajax example
![Page 7: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/7.jpg)
Introduction
• It is an acronym for Asynchronous
Javascript
And
XML.
• It is a group of inter-related technologies• AJAX allows you to send and receive data
asynchronously without reloading the web page.
![Page 8: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/8.jpg)
Web page without Ajax
![Page 9: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/9.jpg)
Web page with Ajax
![Page 10: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/10.jpg)
Where it is used?
• Google Map• Facebook• Twitter• you tube
![Page 11: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/11.jpg)
AJAX Technologies
• HTML/CSS• DOM• XML or JSON• XMLHttpRequest• Javascript
![Page 12: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/12.jpg)
XMLHttpRequest
• The keystone of AJAX is the XMLHttpRequest object.
• The XMLHttpRequest object is used to exchange data with a server behind the scenes.
![Page 13: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/13.jpg)
Properties of XMLHttpRequest object
![Page 14: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/14.jpg)
Methods of XMLHttpRequest object
![Page 15: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/15.jpg)
Status Property Value
200 = ok
201 = created
204 = no content
404 = not found
![Page 16: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/16.jpg)
Create XMLHttpRequest object
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"); }
![Page 17: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/17.jpg)
Create Request
• Step 1: Creating a XML HTTP Request object – var xmlhttp = new XMLHttpRequest();
• Step 2: Specifying where and how to retrieve the resource – xmlhttp.open('GET', 'foo.jsp', true);
• Step 3: Setting a function to be called when the response is returned by the server – xmlhttp.onreadystatechange = function()
{ // Code to handle the response here }
![Page 18: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/18.jpg)
Create Request contd..
• Step 4: Send the request– xmlhttp.send(null);
![Page 19: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/19.jpg)
Simple Example
![Page 20: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/20.jpg)
How AJAX works
![Page 21: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/21.jpg)
Example Check username
![Page 22: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/22.jpg)
Example contd..
![Page 23: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/23.jpg)
Example contd..
![Page 24: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/24.jpg)
Example contd..
![Page 25: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/25.jpg)
Example contd..
![Page 26: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/26.jpg)
If this presentation helped you, please visit our page facebook.com/baabtra and like it.
Thanks in advance.
www.baabtra.com | www.massbaab.com |www.baabte.com
![Page 27: Ajax](https://reader033.vdocuments.us/reader033/viewer/2022042813/549a65c5b4795966668b4587/html5/thumbnails/27.jpg)
Contact Us
Emarald Mall (Big Bazar Building)Mavoor Road, Kozhikode,Kerala, India.Ph: + 91 – 495 40 25 550
NC Complex, Near Bus StandMukkam, Kozhikode,Kerala, India.Ph: + 91 – 495 40 25 550
Start up VillageEranakulam,Kerala, India.
Email: [email protected]
NIT-TBI,NIT Campus, Kozhikode,Kerala, India.