AJAX—Return String and Array in One Xmlhttp.responseText with Implode: Test

In this test program, we will see Ajax return a string and an array 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, a string, goes in div k and the second result, an 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 string and the array elements and it echoed this back to our Ajax routine as xmlhttp.responseText. Note that the | character is used as the delimiter between the array elements in the PHP script, while the ^ divides the string from the array, so once we're back at the Ajax script this will give us 2 arrays to process. Anyway, once the array has been split using the split() function and a ^ delimiter, the first array element is treated as a string and the second as an array that is also needing splitting. This happens next, and once it's 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 l div. The k div gets the string only. 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 a string and an array. We concatenate the u variable with each element in the array, and implode the array using | as the delimiter between array elements, and then stick all these elements in the single variable $v. Then we prepend the variable $v with the string and the ^ character as a delimiter, all to be echoed back to the Ajax routine that called it.

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

</body>
</html>

This file is called: test-3.php

<?php

$u=$_GET['u'];

$coolstring="cool";

$v='';

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

Free Personal Status Boards (PSB™)

AJAX—Return String and Array in One Xmlhttp.responseText with Implode: Test