Skip to main content

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

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) {

                // save the state so we can process it later

currentState = newstate; 

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.

Labels:

Popular posts from this blog

ChatGPT is a new, and faster, way to do programming!

Currently ChatGPT is in a free “initial research preview” . One of its well known use cases at this point is generating software code. I’ve also just used it to write most of this article… Well, actually a future article about cleaning up SRT subtitle files of their metadata faster than I have been by hand with Notepad++ and its replace functionality. Update: I recorded a screencast of writing the SRT subtitle cleaner application loading and processing portion. I relied heavily on ChatGPT for code. It was a fun process! https://youtu.be/TkEW39OloUA ChatGPT, developed by OpenAI, is a powerful language model that can assist developers in a variety of tasks, including natural language processing and text generation. One such task that ChatGPT can help with is creating an SRT cleaner program. SRT, or SubRip Subtitle, files are commonly used to add subtitles to video files. However, these files can become cluttered with unnecessary information, such as timing lines or blank spaces. To clean...
Read more

Theme error in 2010s Android App after AppCompat Migration

I plan on releasing a lot of my old work as GPL open source, but most of it has aged to the point that it no longer functions, or if it does work it’s running in compatibility mode. Basically it’s no longer best practices. Not a good way to start off any new public GPL projects, in my opinion. The current project I’m working on is an Android app that calculates star trails meant to help photographers get or avoid that in their night time photos. For now I’m going to skip some of the import process because I didn’t document it exactly. It’s been mostly trial and error as I poke around Android Studio post import. The Android Studio import process… Removing Admob Google Play code before the project would run at all. After removing dependencies, it kind of worked, but when running it in the emulator it shows a pop-up message saying that the app was developed for an old version of Android. Going through the process of updating code to match current best practices… I had the IDE convert the ...
Read more

Blogger Notable theme pop-up header issue fix (thanks to Gemini Pro)

I've made a few half hearted attempts over the years to to fix Blogger's Notable theme's rendering of the pop-up header that shows up when you scroll down the page a decent amount and then pull back to reveal that secondary header. On Chrome mobile I noticed a gray box that forms next to the magnifying glass icon. I never looked in detail on  Chrome desktop, but it had an issue as well which I'll detail below.  If you are looking for a solution and don't want all of the extra talk about how I was able to find it, here it is:  .centered-top-container .sticky .main_header_elements { overflow : hidden !important ; } I decided to try using Gemini Pro 2.5 to see if it was capable of finding the issue and giving me a fix. Turns out that it was able, but it took a bit of collaboration back and forth to find the actual problem.  Here is a modified article I asked it to give me based on our debugging chat (it was very colorful in the article which I scaled back a lot, ...
Read more