Scribd
Upload
126 views5 pages

How Ajax Works: To Send A Request To A Server, We Use The Open and Send Methods of The Xmlhttprequest Object

1) The XMLHttpRequest object is used to exchange data with a server asynchronously without reloading the entire webpage. 2) It uses the open() and send() methods to send a request to a server, specifying things like the request type, URL, and whether it should be asynchronous. 3) The response is retrieved using properties like responseText or responseXML, and the onreadystatechange event handles responses when readyState is 4 and status is 200, indicating the response is ready.

Uploaded by

abishek abi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
126 views5 pages

How Ajax Works: To Send A Request To A Server, We Use The Open and Send Methods of The Xmlhttprequest Object

1) The XMLHttpRequest object is used to exchange data with a server asynchronously without reloading the entire webpage. 2) It uses the open() and send() methods to send a request to a server, specifying things like the request type, URL, and whether it should be asynchronous. 3) The response is retrieved using properties like responseText or responseXML, and the onreadystatechange event handles responses when readyState is 4 and status is 200, indicating the response is ready.

Uploaded by

abishek abi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 5

How AJAX Works

The XMLHttpRequest Object

All modern browsers support the XMLHttpRequest object (IE5 and IE6 uses an ActiveXObject).

The XMLHttpRequest object is used to exchange data with a server behind the scenes. This means that it
is possible to update parts of a web page, without reloading the whole page.

Send a Request To a Server

To send a request to a server, we use the open() and send() methods of the
XMLHttpRequest object:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

Method Description
open(method,url,async) Specifies the type of request, the URL, and if the request should be
handled asynchronously or not.

method: the type of request: GET or POST


url: the location of the file on the server
async: true (asynchronous) or false (synchronous)
send(string) Sends the request off to the server.

string: Only used for POST requests


Server Response

To get the response from a server, use the responseText or responseXML property of the
XMLHttpRequest object.

Property Description
responseText get the response data as a string
responseXML get the response data as XML data

The onreadystatechange event

When a request to a server is sent, we want to perform some actions based on the response.

The onreadystatechange event is triggered every time the readyState changes.

The readyState property holds the status of the XMLHttpRequest.

Three important properties of the XMLHttpRequest object:

Property Description
onreadystatechang Stores a function (or the name of a function) to be called automatically each time
e the readyState property changes
readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4: 
0: request not initialized 
1: server connection established
2: request received 
3: processing request 
4: request finished and response is ready
status 200: "OK"
404: Page not found

In the onreadystatechange event, we specify what will happen when the server response is ready to be
processed.

When readyState is 4 and status is 200, the response is ready:

//countservlet.java

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
public class countservlet extends HttpServlet
{
private static int visits=0;
public void doGet(HttpServletRequest req,HttpServletResponse res) throws
ServletException,IOException
{
visits++;
res.setContentType("text/html");
PrintWriter srout=res.getWriter();
srout.println("<html><head><title> Example program for Ajax</title><script
type='text/javascript' src='/countupdate.js'></script>"+
"</head><body onload='init()'><p>Welcome to the world :\n Number of visits:</p><p
id='visits'>0 </p></body></html>");
srout.close();
}
public void doPost(HttpServletRequest req,HttpServletResponse res) throws
ServletException,IOException
{

res.setContentType("application/xml");
PrintWriter srout=res.getWriter();
srout.println("<?xml version='1.0' ?> <count>"+visits+"</count>");
srout.close();

}
}
//countupdate.js
function init()
{
window.setInterval("getvisits()",300);
return;
}
function getvisits()
{
var con=new XMLHttpRequest();
if(con)
{
con.open("POST","/countservlet",true);
con.onreadystatechange=function update(){updatevisits(con);}
con.send("");
}
return;
}
function updatevisits(con)
{
if(con.readyState==4 && con.status==200)
{
visits=document.getElementById("visits");
var count=con.responseXML.documentElement;
visits.childNodes[0].data=count.childNodes[0].data;
}
return;
}

You might also like