Home arrow AJAX & Prototype arrow Page 3 - Ajax Features Needed to Build Active Client Pages

The responseText Property - AJAX

This is the second part of my four-part series, Active Client Pages – Ajax Approach. In this part of the series, we continue our discussion of the Ajax features we will need to use with ACP, and then we look at the principles of the Ajax approach.

TABLE OF CONTENTS:
  1. Ajax Features Needed to Build Active Client Pages
  2. More About the XMLHttpRequest Object
  3. The responseText Property
  4. Principles of the Ajax Approach
By: Chrysanthus Forcha
Rating: starstarstarstarstar / 4
October 14, 2008

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

The data sent back from the server can be retrieved with the responseText property of the XMLHttpRequest object. This is a sample code.


xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

Some HTML Value or JavaScript Property = xmlHttp.responseText;

//You may call another function to do initialization.

}

}


Sending a Request to the Server

To send off a request to the server, we use the open() method and the send() method.

The open() method takes three arguments. The first argument defines which method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled asynchronously. The send() method sends the request off to the server. If we assume that the HTML and the server executable file (e.g. sendText.pl that is called by the request) are in the same directory, the code would be:


xmlHttp.open("GET","sendText.pl",true);

xmlHttp.send(null);


The send method sends the request to the server with a "data" parameter specifying the body of the request. For "GET" requests, this parameter should be a value of null, while for "POST" requests, it should be the parameters of the request. This method typically should always be called last.

Now we must decide when the AJAX function should be executed. This is executed normally when an event is triggered. The following is a sample code that illustrates everything I have said about Ajax.

There is an HTML button. When you click it some text will be sent from the server. The value of the onclick attribute is “ajaxFunction();”. When this function is called, it declares the XMLHttpRequest Object (variable). It performs the trials to assign the object variable. Next it stores the function that will process the response to onreadystatechange property of the object.

This function is not executed at this point. It is executed only when the status of the readyState property changes. So it can only be executed after the open() and send() methods of the object have been called. Next, in the ajaxFunction() function, the open() and send() methods are called.


<html>

<head>

<script type="text/javascript">

function ajaxFunction()

{

var xmlHttp;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

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

}

catch (e)

{

try

{

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

}

catch (e)

{

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

}

}

}


xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

document.getElementById('IDDIV').innerHTML = xmlHttp.responseText;

}

}

xmlHttp.open("GET","sendText.pl",true);

xmlHttp.send(null);

}

</script>

</head>

<body>

<div id="IDDIV">

</div>

<button type="button" onclick="ajaxFunction();">Obtain Data from Server</button>

</body>

</html>




 
 
>>> More AJAX & Prototype Articles          >>> More By Chrysanthus Forcha
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

AJAX & PROTOTYPE ARTICLES

- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: