AJAX—Return Two Arrays in One Xmlhttp.responseText: Test

In this test program, we will see Ajax return two arrays in the xmlhttp.responseText with use of the PHP implode() function.

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 divs. In this script, there are 2 results gotten from the xmlhttp.responseText, and the first result, an array, goes in div k and the second result, another array, goes in div l. Both results are 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, and both are 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 mostly concatenation and the ^ character as the delimiter between the two array's elements and it echoed this back to our Ajax routine as xmlhttp.responseText. Note that the | character is used as the delimiter between the both of the arrays' array elements in the PHP script, while the ^ divides the two arrays from one another, so once we're back at the Ajax script this will give us 3 arrays to process. Anyway, once the array has been split using the split() function and a ^ delimiter, the first array element is treated as an array that is needing splitting and the second array element is treated as another array that is also needing splitting. This happens next, and once each is reconstituted, each gets line break tags stuck to each element, for display purposes. All these appended array elements get stuck into the variables w and v respectively, then by use of innerHTML these get put into the k div and the l div respectively. The xmlhttp.open() and xmlhttp.send() functions make the xmlhttp magic do its thing.

The PHP script is quite simple. We get the u and q variables from the Ajax script's query string via GET. We define two arrays. We concatenate the u variable with each element in the first array, and concatenate the q variable with each element in the second array, and we implode the arrays using | as the delimiter between array elements, and then stick all these elements in the two variables $w and $x respectively. Then we echo these two variables back to the Ajax routine that called this PHP script with a ^ character as a delimiter between them.

This file is called: test-4.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 Two Arrays in One Xmlhttp.responseText: Test</TITLE>
<meta name="description" content="AJAX - Return Two Arrays in One Xmlhttp.responseText: Test">
<meta name="keywords" content="AJAX,Return Two Arrays in One Xmlhttp.responseText,AJAX: Return Two Arrays,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 Two Arrays in One 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 ar = new Array();
var u = "Animal: ";var q = "Verb: "; var i = 0; var v = ""; var w = "";
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;
ar=a.split("^");
var first=ar[0];
var second=ar[1];
arry=first.split("|");
for (i=0;i<arry.length;i++){w=w+arry[i]+"<BR>";}
arr=second.split("|");
for (i=0;i<arr.length;i++){v=v+arr[i]+"<BR>";}
k.innerHTML=w;
l.innerHTML=v;}}
xmlhttp.open("GET","test-4.php?u="+u+"&q="+q+"&t="+t,true);
xmlhttp.send();
</script>

</body>
</html>

This file is called: test-4.php

<?php

$u=$_GET['u'];
$q=$_GET['q'];

$w='';$x='';

$a=array("Dog","Cat","Horse","Bee","Fly","Pig","Monkey","Worm","Slug");
$b=array("Dig","Run","Sit","Grow","Fly","Pull","Mount","Wait","Slide");
for ($i=0;$i<count($a);$i++) {$a[$i]=$u.$a[$i];}
for ($i=0;$i<count($b);$i++) {$b[$i]=$q.$b[$i];}
$w=implode("|",$a);
$x=implode("|",$b);
echo $w."^".$x;
?>

Free Personal Status Boards (PSB™)

AJAX—Return Two Arrays in One Xmlhttp.responseText: Test