AJAX for beginners - An Intro

I have attached a presentation from the lecture I took for the freshers who had joined our institution..

Requirements to run the application:

1. Java Runtime Environment

2. Apache Tomcat 3. A text editor

Downloads: ajaxsample.zip(around 2MB) AJAX.ppt(l60 KB)

Download Details:

A. AJAX .ppt is the presentation

B. ajaxsample.zip is the simple application. In order to use it, do the following:

1. Unzip the package inside the "webapps" folder of "Tomcat" and start the "Tomcat" service

2. Go to the URL, (most probably) http://localhost:8080/ajaxsample

3. Something like a login page should appear.

Explanation: The code for the server program goes something like this: //code logic(simple program, no explanation needed)

String loginName = request.getParameter("username");

String password = request.getParameter("password");

try {

String result = "Invalid Credentials";

if (loginName.equals("test")) {

if (password.equals("test")) {

result = "You have been successfully validated";

} else {

result = "Wrong Password";

}

} else {

result = "Wrong Username";

}

//This is where the server will write the response

PrintWriter out = response.getWriter();

out.write(result);

The code for the client-side can be viewed by opening the login.jsp file inside webapps/ajaxsample/jsp/login/ using your text editor:

<script>

//Step 1: Creating the request object

var xmlHttp=null; function checkLogin() {

try {

// creation in Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

} catch (e) {

// creation in Internet Explorer

try {

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

// creation in Internet Explorer

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {

alert("Your browser does not support AJAX!");

return false;

}

}

}

var url="./ValidateLoginAction.do"; url=url+"?username="+document.getElementById("user").value+"&password="+document.getElementById("pass").value+"&ddd="+Math.random();

alert(url);

//Step 2: Initializing a connection. This is a "GET" type of a connection and hence the URL above has all the parameters in it. "true" means this is an asynchronous type of connection, i.e. we dont have to wait for the server's response. If it were "false", the screen would freeze and become enabled only when we get a response from the server.

xmlHttp.open("GET",url,true);

//Step 3: Tell the browser which function to call once the "readyState" property of the request object changes xmlHttp.onreadystatechange=displayResult;

//Step 4: This is where the request is sent. Since this is of a "GET" type, we are not sending anything encoded in the body and hence passing "null"

xmlHttp.send(null);

}

//This is the function that will be called when the browser finds a change in the "readyState" property

function displayResult(){

alert("xmlHttp.readyState="+xmlHttp.readyState); alert("xmlHttp.responseText="+xmlHttp.responseText);

//readyState = 4, means the response from the server has come, be it successful or unsuccessful

//another property is requestStatus which can be 200 for successful response, 404 if the server program doesnt exist and many more statuses

if(xmlHttp.readyState==4) {

//the responseText property will contain the response from the server. In our case(check the server program above), it will be "Wrong Password" or "Wrong Username" or "You have been successfully validated"

var resp = xmlHttp.responseText;

//this is a DOM manipulation. Here we put the responseText that has been stored in the "resp" variable inside the innerHTML of the "message" element(find the message element in the login.jsp page) document.getElementById("message").innerHTML=resp;

}

}

</script>

I hope this is satisfactory for all beginners.