Archive for the ‘ Building ajax website with back button ’ Category

Welcome to this blog

I have stated this blog to share whatever i learned building website http://dskvishwa.co.cc/

I have made an attempt to build fully ajax website using

  • RSH0.6 you can read more here
  • XML you can read more here
  • PHP you can read more here
  • MYSQL you can read more here
  • FCK EDITOR you can read more here

If you try navigating this website you will find that for each request entire page will not be loaded instead only dynamic part is loaded, this is achived with the help of xml responce

My Xml Responce contains n nodes

Its DTD is as follows

<!ELEMENT node (eval
(location,( data error ))) >

<!ELEMENT location
(#PCDATA)
>

<!ELEMENT error (#PCDATA)
>

Each node is responsible one of three things

  • Changing innerHTML of one of the elements
  • Raises error using javascript alert
  • Evaluating javascript statements

Example of first type is

<![CDATA[
some formated data
]]>

id_of_some_element_in_html

This node will be responsible for changing innerHTML of element having id id_of_some_element_in_html.

Example of second type is

<![CDATA[

some
error occured on server
side

]]>

some_id_of_element_where_error_message_to_be_printed

This node will be responsible for producing alert statement using javascript

And finally example of third type is

<![CDATA[
some
evaluation
javascript statement
]]>

This node is responsible for evaluating statement on client side

After receiving this responce via ajax you can hand it over to javascript function which will do the parsing

The javascript function i have written is

the one that i have written is

function parseXMLResponce(text){

var

temp=text;

/*

Chopping the advertisement code emited by some free hosts

*/

text=text.substring(text.indexOf(“”),text.lastIndexOf”)+14);


/*Obtaining DomDocument depending on browser*/

var xmlDoc;

var browser=navigator.appName;

if(browser!=’Netscape’) {

xmlDoc=new

ActiveXObject(“Microsoft.XMLDOM”);

xmlDoc.async=”false”;

xmlDoc.loadXML(text);

} else {

try //Firefox, Mozilla,
Opera,etc.

{

parser=new

DOMParser();

xmlDoc=parser.parseFromString(text,”text/xml”);

}

catch(e)

{

alert(e.message);

return;

}

}

var nodeArray;

try

{

//Taking all nodes
in array

nodeArray=xmlDoc.documentElement.childNodes;

}

catch(e){

/*

logging javascript error on server using ajax
request

this will let us know how website is performing

you can
also send browser information in function “logJavascriptError”

temp
contains responce received e.message is general way to get error
message

*/

logJavascriptError(temp,e.message);

alert(‘parse error, please try again’);

return;

}

//collecting the first node

var node=nodeArray[0];

var
loop=nodeArray.length;

for(var
i=0;i<loop;i++){<LOOP;I++)

if(node.nodeName==”node”)

{

var info=node.childNodes;

var info_no=info.length;

var location=””;

var data=””;

var error=””;

var
html_elements=””;

var statement=”;

for(j=0;j<info_no;j++){<INFO_NO;J++)

if(info[j].nodeName==”location”)
{

location=info[j].firstChild.nodeValue;

}

if(info[j].nodeName==”data”) {

data=info[j].firstChild.nodeValue;

}

if(info[j].nodeName==”error” &&

info[j].hasChildNodes()==true) {

error=info[j].firstChild.nodeValue;

}

if(info[j].nodeName==”eval” &&

info[j].hasChildNodes()==true) {

statement=info[j].firstChild.nodeValue;

}

}

if(error==””)

{

//printing the node value in
location

if(location!=”)

{

document.getElementByI(location).innerHTML=data;

}

}

else if(error!=”)

{

//alerting and displaying error in
location

alert(error);

if(document.getElementById(location))

{

document.getElementById(location).innerHTML=error;

}

}

else if(statement!=””)

{

//evaluating
javascript statement

try

{

eval(statement);

}

catch(e)

{

alert(e.message);

}

}

}

//moving on to next sibling

node=node.nextSibling;

}

}

Advertisements