AJAX - Return Array in Xmlhttp.responseText: Test

In this test program, we will see Ajax return an array in the xmlhttp.responseText.

Ajax Test and Information Links

More Ajax Related Links

What is Ajax? AJAX means Asynchronous JavaScript and XML, but it isn't a programming language. It is a new way to use existing languages. When one uses Ajax, one is exchanging data with a server and updating parts of a web page, but without reloading the whole page! For a great example of Ajax in action, see http://www.w3schools.com/Ajax/ajax_aspphp.asp or http://www.css-resources.com/Ajax-and-PHP-Based-Insult-Auto-Completer.html. Happily, one need not learn XML or even XHTML to use Ajax, although there's a whole ton one can do if one does learn those. But those are not of interest to us currently so let's stay with the problem at hand. Incidentally, Ajax can be on regular HTML or PHP pages—you need not go to XML or XHTML.

On to the code: The HTML code will be followed by the PHP code. In the HTML code, after metatags and CSS styling, we define 3 divs. The div with the id j will be visible and onscreen in this example, but in real Ajax use, it will stay offscreen with a minus 1999 pixel left property. This is the PRE-processing div. When the Ajax routine gets back its xmlhttp.responseText from the PHP script it runs, it stores it in the j div at first, as is indicated by the j.innerHTML=xmlhttp.responseText line, below. Then it gets processed a bit and the results get stuck into the k array. In the other 4 test scripts above there are 2 results gotten from the xmlhttp.responseText, and the first result goes in div k and the second result goes in div l. But in the present script, we keep things simple by only going after a single result. So we stick the arr array in the l div just for the heck of it, although only the result stuck in the k div is relevant in the present script.

Note the var t = new Date().getTime(); line. Then note the fact that when the xmlhttp.open() function runs the PHP script, the URL given includes a query string with the t variable being sent along for the ride. This is because the Ajax routines, since they do not reload pages, tend to get the pages cached by the browsers. If this happens, you will get old results—the page won't change because you'll see only the cached version. Ajax programmers know that getting around this cache curse is as simple as sticking the current time in the query string. The time is always different, so the page will always be seen as new by browsers, since the whole URL is never the same twice. Problem solved. The time never gets used for anything in the PHP script it goes to. It's just an anti-cache trick. Cool, huh?

After defining arrays and variables, we use the document.getElementById() method to get a shorter way of referencing the divs by sticking the document properties into an object variable like j, k, or l. Then we make the XMLHttpRequest, and it depends on your browser which code is used—IE5 and IE6 do it differently than newer browsers. Next we get our xmlhttp.responseText but only when the server is in the proper readiness state. This xmlhttp.responseText gets stuck right into the j div using the innerHTML property. We now process the returned data (offscreen in real use, but onscreen in our test script for clarity). Think of it as offscreen, okay? The first column of the test page has a box representing the j div's contents. The other 2 columns are meant to be seen, although the rightmost div, l, isn't really relevant in the present script.

Note that the xmlhttp.responseText that goes into the j div next gets put in the a variable and then uses the JavaScript split() function to get the array from this variable. The reason there's an array in the response text that is sent by the PHP script is because the PHP script put it there using the implode() function and the | character as the delimiter between array elements and it echoed this back to our Ajax routine as xmlhttp.responseText. Anyway, once the array has been reconstituted, it gets line break tags stuck to each element, for display purposes. All these appended array elements get stuck into the variable v, then by use of innerHTML this gets put into the k div. The l div gets the raw array but that is irrelevant for our purposes. The xmlhttp.open() and xmlhttp.send() functions make the xmlhttp magic do its thing.

The PHP script is quite simple. We get the u variable from the Ajax script's query string via GET. We define an array. We concatenate the u variable with each element in the array. Then we implode the array into a string to be echoed back to the Ajax routine that called it, utilizing the | character as the delimiter between array elements.

This file is called: test-1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>AJAX - Return Array in Xmlhttp.responseText: Test</TITLE>
<meta name="description" content="AJAX - Return Array in Xmlhttp.responseText: Test">
<meta name="keywords" content="AJAX,AJAX: Return Array in Xmlhttp.responseText,Return Array,Return Array in Xmlhttp.responseText,javascript,php,ajax, dhtml, DHTML,javascript,php,ajax, dhtml, DHTML">
<style type="text/css">
BODY {margin-left:0; margin-right:0; margin-top:0;text-align:left;background-color:#fff;}
.j {position:absolute;top:40px;left:0px;width:200px;border:1px solid blue;padding:6px;background-color:#ddd}
.k {position:absolute;top:40px;left:300px;width:200px;border:1px solid blue;padding:6px;background-color:#ccc}
.l {position:absolute;top:40px;left:600px;width:200px;border:1px solid blue;padding:6px;background-color:#ccc}
</style>
</head>
<body>
<center><b><h2>AJAX - Return Array in Xmlhttp.responseText: Test</h2></b></center>
<div class='j' id='j'></div>
<div class='k' id='k'></div>
<div class='l' id='l'></div>

<SCRIPT LANGUAGE="JavaScript">
var t = new Date().getTime();
var arr = new Array();
var u = "Animal: "; var i = 0; var v = "";
var k=document.getElementById("k");
var j=document.getElementById("j");
var l=document.getElementById("l");
if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
j.innerHTML=xmlhttp.responseText;
var a=j.innerHTML;
arr=a.split("|");
for (i=0;i<arr.length;i++){v=v+arr[i]+"<BR>";}
k.innerHTML=v;
l.innerHTML=arr;}}
xmlhttp.open("GET","test-1.php?u="+u+"&t="+t,true);
xmlhttp.send();
</script>

</body>
</html>

This file is called: test-1.php

<?php

$u=$_GET['u'];

$a=array("Dog","Cat","Horse","Bee","Fly","Pig","Monkey","Worm","Slug");
for ($i=0;$i<count($a);$i++) {$a[$i]=$u.$a[$i];}
echo implode("|",$a);
?>

Free Personal Status Boards (PSB™)

AJAX - Return Array in Xmlhttp.responseText: Test