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

Week Target Achieved

1 30 22

2 30 23

3 30 25

4 30 26

Typing Speed

Jobs AppliedWeek Company Designation Applied Date Current Status

1

2

3

Ajax

Muhammed Ajmal IKmhdajmalik@gmail.comwww.facebook.com/ajuik2008twitter.com/usernamein.linkedin.com/in/

profilename9745020951

Overview

• Introduction• Ajax technologies• XMLHttpRequest• How Ajax work?• Ajax example

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.

Web page without Ajax

Web page with Ajax

Where it is used?

• Google Map• Facebook• Twitter•  you tube

AJAX Technologies

• HTML/CSS• DOM• XML or JSON• XMLHttpRequest• Javascript

XMLHttpRequest

• The keystone of AJAX is the XMLHttpRequest object.

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

Properties of XMLHttpRequest object

Methods of XMLHttpRequest object

Status Property Value

200 = ok

201 = created

204 = no content

404 = not found

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");  }

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 }

Create Request contd..

• Step 4: Send the request– xmlhttp.send(null);

Simple Example

How AJAX works

Example Check username

Example contd..

Example contd..

Example contd..

Example contd..

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

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: info@baabtra.com

NIT-TBI,NIT Campus, Kozhikode,Kerala, India.