Using AJAX to mimic iframes

[hgs]

Me again

I know that the documentation could be better, however I hope it is still usefull for some of you out there.


Sometimes there is the need to dynamicaly change or add some of the HTML
on a page without reloading the entire page.

One way, among others, is to load HTML from a server using AJAX.

This works basicaly just like using one or more iframes

The demo page is at http://www.hgsweb.de
From there you can also download a zip-file with all the files needed
to run the demo on your systems.

The code below allows you to request output from a server script and use it as the innerHTML for a DOM object.




function HGS_PFRAME()
/*******************/
{
this.xmlHttp = createXmlHttpRequestObject();
this.async = true;
this.fill_pframe= function(pfid,backend_script){ // you use this funtion
xmlHttp.open("POST", "pframeajax.php", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.onreadystatechange=handleRequestStateChange;
//
// here you POST your parameters to the server
// the 'pfid' is the id of the DOM objcet we will
// later set the innerHTML, that comes back to us
// as the result of the 'backend_script'
//
xmlHttp.send("pfid="+pfid+"&script="+backend_script);
}

var xmlHttp=this.xmlHttp;

function createXmlHttpRequestObject()
/***********************************/
{
var xmlHttp,i;
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
var XmlHttpVersions = ["MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP"];
for (i=0; i<XmlHttpVersions.length && !xmlHttp; i++) {
try {
xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
} catch (e) {}
}
}
if (!xmlHttp){
displayError("Error creating the XMLHttpRequest object.");
} else {
return xmlHttp;
}
}
function displayError($message)
/*****************************/
{
if (showErrors){
showErrors = false;
alert("Error encountered: \n" + $message);
}
}
function handleRequestStateChange()
/**********************************/
{
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
try{
showErrors = true;
readResponse();
}catch(e){
displayError(e.toString());
}
}else{
displayError(xmlHttp.statusText);
}
}
}
function readResponse()
/**********************/
{
var pfid, result,fieldID,xmlDoc;
var response = xmlHttp.responseText;
responseXml = xmlHttp.responseXML;
xmlDoc = responseXml.documentElement;
//
// Here we will get the id of the DOM object back in 'pfid'
// along with the HTML passed as 'result'
//
pfid = xmlDoc.getElementsByTagName("pfid")[0].firstChild.data;
result = xmlDoc.getElementsByTagName("result")[0].firstChild.data;
if(result=="bLaNkbLaNkbLaNkbLaNkbLaNkbLaNk"){
result="";
}
dd=document.getElementById(pfid); // locate the DOM object
dd.innerHTML=result; // set innerHTML
}
}
///////////////////////////////////////////
var pframe = new HGS_PFRAME();
//////////////////////////////////////////


Here is the server side.

It just executes the given script via file_get_contents and passes
back the result along with the received 'pfid', the id of an objcet
on the client side. So the client knows what object will be affected.


<?php
function xmlresponds($pfid,$result)
/********************************/
{

if(strlen(trim($result))==0){
$result="<h1>bLaNkbLaNkbLaNkbLaNkbLaNkbLaNk</h1>";
}
$response =
'<?xml version="1.0" encoding="UTF-8" standalone="yes"?>'.
'<response>'.
'<pfid>'.
$pfid.
'</pfid>' .
'<result>'.
'<![CDATA[ '.$result.' ]]>'.
'</result>'.
'</response>';
// generate the response
if(ob_get_length()) ob_clean();
// headers are sent to prevent browsers from caching
header('Expires: Fri, 25 Dec 1980 00:00:00 GMT'); // time in the past
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Type: text/xml');
echo $response;
}

///////////////////////////////////////////////////
// check if parameters are set ////////
///////////////////////////////////////////////////
if(isset( $_POST['pfid']) && isset( $_POST['script'])){
$result=@file_get_contents($_POST['script']);
xmlresponds($_POST['pfid'],$result);
} else {
xmlresponds($_POST['pfid'],"");
}
?>


And here is some HTML code using all the above


<table border=1><tr><td valign=top>
<ul style="margin:10 30 10 40">
<li> <a href=# onclick=pframe.fill_pframe('div2','div1.html')>Menue 1</a>
<li> <a href=# onclick=pframe.fill_pframe('div2','div2.html')>Menue 2</a>
<li> <a href=# onclick=pframe.fill_pframe('div3','div3.html')>Menue 3</a>
<li> <a href=# onclick=pframe.fill_pframe('div3','div4.html')>Menue 4</a>
</ul>
</td><td valign=top>
<div id=div2 style="margin:30">Here </div>
</td></tr>
<tr><td colspan=2><div id=div3 align=center>and there</div></td></table>


Regards
Heinz