PHP/AJAX - advice on replacing iFrame with DIV (combined with AJAX) - php

Question

I currently have a webpage where an iframe contains data that is stored into an invisible form, and I want to replace that iFrame, with a div, where the content is being changed/updated via AJAX.
If you dont feel like reading all this, you can skip to the end and read my main question.
Now, the complicated part is that the form contains all the important and used data in an invisible form, which needs to be send via POST. But, the page also includes a form that can send data via GET. And: I've setup the forms like this, that the php file recieves the form data as an array.
At the moment it works like this:
The iFrame shows the data, and stores it in an invisible form. When you want the page to refresh automatically, every 30 seconds, you click a button, and you get redirected to another page, which recieves the data from the previous page, using POST.
When you're on the auto-refreshing page, I use Javascript to automatically submit the form containing all the important data, to refresh the page.
Resubmitting the page is nessecary because I use PHP to do some important calculations with the data I'm using. Moving all this functionality to Javascript is not an option.
Just to be clear, here is a very brief description of my case:
Main page: 2 forms, 1 POST setup so variables are in 1 array, 1 GET with 6 variables.
The GET form could be modified to an AJAX function, as it only includes 6 variables
Auto update page: 2 forms, same as before. Though this POST form is auto-submitted via Javascript every 30 seconds (to update the PHP
functions output).
So, my main question is:
Can I, and if so how, recieve an array from a POST form in AJAX, and then send it as an array to a php page?
EDIT:
Here is some of the code for submitting the form:
<script type="text/javascript">
function paginarefresh() {
document.forms["updateform"].submit();
}
var paginatimer = setInterval(paginarefresh, 60000);
</script>
and the form is build up like this:
echo '<form action="data-reis-refresh.php" id="updateform" name="update" method="POST" style="width: 100px;">';
echo '<input type="submit" class="submit replaced" value="Volg deze trein" name="submit-search"/>';
if (round($afgelegdpercentage*100,1)==100) {
echo ' <span style="text-align: center;">Deze trein is al aangekomen</span>';
} else {
echo ' <span style="text-align: center;">Ververs gegevens (automatisch elke minuut)</span>';
}
echo '<input type="hidden" name="provincie" value="'.$provincie.'">
<input type="hidden" name="reisdata[Overstap]" value="'.$reisdata["Overstap"].'">
<input type="hidden" name="reisdata[Van]" value="'.$reisdata["Van"].'">
but then longer (a lot longer, and with changing length);
I'm using this for all my AJAX requests: [though I change it for different uses]
// Algemene functie om een xmlHttp object te maken. Via dit object kunnen we later Ajax calls plaatsen
function GetXmlHttpObjectReisData() {
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!");
return false;
}
}
}
return xmlHttp;
}
function CallAjaxReisDataFunction(serverScript,arguments)
{
var xmlHttp = new GetXmlHttpObjectReisData(); // Functie welke wordt uitgevoerd als de call naar de server klaar is State 4)
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4)
{
handleReisDataResult(xmlHttp.responseText);
}
}
// Ajax call (Request naar de server met eventuele parameters (arguments))
xmlHttp.open("POST", serverScript, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", arguments.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(arguments);
}
function callReisDataServer(serverScript,van,naar)
{
CallAjaxReisDataFunction(serverScript,"?&reisdata=" + reisdata);
}
function handleReisDataResult(responseText)
{
document.getElementById('reis').innerHTML = responseText;
}

Answer 1

JS code:
var postdata = {"provincie":"123","reisdata":{"Overstap":"234","Van":"345"}};
var post = "";
var url = "data-reis-refresh.php";
var key, subkey;
for (key in postdata) {
if (typeof(postdata[key]) == object) {
for (subkey in postdata[key]) {
if (post != "") post += "&";
post += key + "%5B" + subkey + "%5D=" + postdata[key][subkey];
}
}
else post += key + "=" + postdata[key];
}
req.open("POST", url, true);
req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.setRequestHeader("Content-length", post.length);
req.setRequestHeader("Connection", "close");
req.send(post);
And to transfer associative array back from PHP to JS:
In PHP script, called from AJAX request:
echo "(".json_encode($hash).")";
In JS code, parsing the result:
var hash = eval(response);

Answer 2

In the end, I ended up using jQuery .post() and .get().
Those are extremely easy to use and a lot faster and more flexible.