Posts Tagged ‘ajax’

A few mishaps while getting the site ready

Tuesday, December 12th, 2006

The ajax/json site is fully functional now. I had a few problems though that I’ll discuss here.

First off, the simple hosting that is provided my my isp isn’t working correctly, so I had to look for an alternative host to do testing on. I found 50webs.com which provides 60mb of free bannerless hosting. They even allow you to use domain names with their free service, which is great. I got that setup and now my sister’s site (while slow) is on there and directly uses the domain name.

Today I showed the site to a friend, who in turn said that it didn’t work. He was using IE7. I use Firefox usually and had not gotten around to trying the completed site on different browsers… Anyways I figured out the problem and the site now works on Firefox2/Opera9/IE6/IE7.

What caused IE6 and 7 to not display the site? It seems that IE requires a new AJAX object for every request. I had it setup initially to define one AJAX object when the page loaded and reuse it. I also had an extra comma character in one of the json files that completely stopped IE from working (actually a good thing).

Now I can start working on the client application. I’ve decided to use VB.net instead of C# this time, so I can get more practice with it.

Tags: , , , , , , ,
Comments Off

No, but there is more…much more thanks to my new friend ajax.

Saturday, December 9th, 2006

As I mentioned in the previous post, I made a static website in html, css, javascript, and json. It works pretty good and that’s great. The problem is my sister is the one who should be adding/editing content because it is her site. So the question is, how can I make an easily update-able site that is on a server without any server-side coding functionality?

I had figured out pretty much how I wanted it to work even before I finished coding the first version of the site. Sure, I could just write a client application that spits out html\css code and uploads it to the server, but no, that isn’t cool enough.

I wanted to break up the site data and formatting. That way the client application would only need to create json files and upload them along with any new content.

That means the json data needs to be removed from the html files and the html page now needs to allow fetching of the data whenever the person using the site needs it. What does this mean? It means that I now have a site that is comprised of: index.htm, a css file, and a javascript file. This is pretty much the whole website (not including the json files)! How can this be possible? Thank our new friend ajax (Asynchronous JavaScript and XML). What that does is allow javascript code to fetch data from the server (in my case text files containing json data) when the user does some type of action.

Lets get on to a few examples, shall we!

The whole index page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <link rel="stylesheet" type="text/css" href="sapphirearts.css" />
 <script src="sapphirearts.js" type="text/javascript"></script>
</head>

<body onload="getJsonFromServer('links.json', 'init');">
<div id="divcontainer">
 <div id="divbanner"></div>

 <div id="divlinks"></div>

 <div id="divbody">
   <div id="divbodycontent"></div>
 </div>

 <div id="divfooter"></div>
</div>
</body>
</html>

What happens when this page is loaded on to a client computer? The javascript function getJsonFromServer() is called. This function downloads a block of json data that defines the main links for the site. Pretty cool, eh? When you click one of these main links, they call getJsonFromServer() again, but with different parameters and ends up filling the content area of the page.


function getJsonFromServer(filename, newstate)
{
 xmlHttp = getXmlHttpObject();

 if (xmlHttp != null){
   currentState = newstate; // save the state so we can process it later
   xmlHttp.onreadystatechange = stateChanged;
   xmlHttp.open("GET", filename, true);
   xmlHttp.send(null);
 }
}

Which relies on the function:

function getXmlHttpObject(){
 var objXMLHttp = null;

 if(window.XMLHttpRequest){
   objXMLHttp = new XMLHttpRequest();
 } else if(window.ActiveXObject){
   objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }

 return objXMLHttp;
}

The getXmlHttpObject() function needs to execute different functions based on what bowser the user is using. Just one of the multitude of problems getting cross browser compatibility.

Tags: , , , , , , , ,
Comments Off




The Way Of Coding



 
Scott J. Waldron Photography
Stock Photo Website
Tech Learning Site
Follow me on Twitter

Popular Article Tags

Archives

Pages