I didn’t find the AJAX frameworks much use while I was working on my current project. I’m sure they are well thought out and designed, but after going through two or three, I was more lost than when I started. I decided then that I should learn how this whole AJAX thing works from the ground up. Turns out XMLHttpRequest isn’t all that difficult, once you get past a few JavaScript cross browser hiccups.

The PHP Back-end

You have three methods for how you can display the information. Each one has its benefits and issues that you’ll need to address in JavaScript.

1. XML

This is perhaps, the most used way. There are debates of the benefits of using XML, but JavaScript can be used to parse the XML. The speed in doing so, is up to how well you write the JavaScript code. I thought it was fun using this.

Benefits:

• Using XML does allow you to send all of the information back to JavaScript on the first request.
• You can also request the same page using PHP or another language, so you aren’t limited to just JavaScript.
2. HTML

You can send HTML to JS, but if you need multiple elements, then you will have to page them. For some reason, when I was sending multiple elements, it couldn’t ‘sense’ the other elements. I think it needed a wrapper, such as a div around all of the elements. If not, then it will recognize the first element ID, but not any other.

It is quicker than XML parsing, so if you only need it to display, then this method works great.

3. JSON

There is a debate over using JSON over XML, but there are pros and cons for both sides. I don’t care about the debate, but for myself, I would rather like to use this method to save from parsing XML, but still receive an array of data. In PHP 5.2, they are adding a function that will make this an simple task, which is much needed. The PHP function should save a lot of time researching and testing.

It is really quite simple using PHP. The XMLHttpRequest object GETs or POSTs to the page just like the browser would, so you just code the page like you would if the browser was going to take a look out it, except you only need the information you are going to use.

XMLHttpRequest Quirks

Or what I like to call, “What you should know before you bash your head in to the wall causing brain damage.”

Don’t Create an Instance of the Same Object For multiple Tasks

Do so and it will throw an exception at you. The way to get around this is to create multiple objects that extend the original XMLHttpRequest Object or the one that you created for cross-browser development, like below.

Don’t:

function myObject { }

myObject.prototype = new xmlTransport();

var object1 = new myObject;
var object2 = new myObject;

Do:

function myObject1 { }

myObject1.prototype = new xmlTransport();

function myObject2 { }

myObject2.prototype = new xmlTransport();

Actually, the better method would be to use the same object and resend the requests getting what you need in the same object instead of creating multiple objects for the task.

Always Call XMLHttpRequest Object First

Once upon a time, before IE 7, you called the ActiveX first and then called the JavaScript object. This is not the case any longer. If you continue to do so for IE 7, you will still use the ActiveX component, which may not work if they disabled or blocked ActiveX. If you look for the object first, the request will still work.

if(window.XMLHttpRequest)
{
	this.xmlhttp = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
	try {
		this.xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
	}
	catch(e)
	{
		try {
			this.xmlhttp = new ActiveXObject("Msxml2.XMLHttp");
		}
		catch(e2) { }
	}
}

Note, if this code looks familiar like the hundreds of other tutorials out there, then yeah. I did ‘borrow’ it from another site. I don’t know JS enough to write it myself. However, I did modify it so that it looks for the XMLHttpRequest object first and the ActiveX Object last.

Full Code:

function xmlTransport()
{
	this.xmlhttp = null;

	this._GetTransport();
}

xmlTransport.prototype._GetTransport = function()
{
	if(window.XMLHttpRequest)
	{
		this.xmlhttp = new XMLHttpRequest();
	}
	else if(window.ActiveXObject)
	{
		try {
			this.xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
		}
		catch(e)
		{
			try {
				this.xmlhttp = new ActiveXObject("Msxml2.XMLHttp");
			}
			catch(e2) { }
		}
	}

	if(this.xmlhttp == null)
	{
		alert("Constructor called and xmlhttp not Object");
	}
}

xmlTransport.prototype.isLoading = function()
{
	if(this.xmlhttp.readyState == 4)
	{
		return false;
	}

	return true;
}

I have the isLoading method in there, but I don’t ever use it. Which is funny, now that I think about it. I put the method in there so that I wouldn’t have to test readyState all of the time, but I found out that calling it is easier than trying to remember that there is a method that does that job for me. The method was suppose to display a loading message and what not, but I never got around to adding that feature.

Possibly Related Posts:

• Game Engine Development and Open Source
• Plans for Base CMS
• Bullet: E-Book Library Management and Content Server
• Using ZendFramework 2 beta1 For Directory Project
• Project Plans

XMLHTTPRequest Saved My Life

Development with AJAX is pretty easy after you learn the quirks and test which ways it can be used and abused. Designing it so that it loads the page instantly instead of waiting 3 or more seconds is great. It also didn’t take any more than an hour to complete. The only issue now, is that the viewer needs to have enabled JavaScript.

There are still ‘technically educated’ users that have JS disabled for popups, cookies, or some other half-baked excused that was only valid before Firefox. I mean, you would go to some porn sites back in the day and would have to disable JavaScript or you would spend 30 minutes exiting out of the popups.

I digress, I did create a Non-JavaScript page, but it still takes 3 seconds to load. I’m not going to do any optimizations for it. People without JS are going to be punished for their lack of enabling it or for not even using a browser that supports it. Only other user is for bots, which should look for the non JS version.

MVC

The main page is handled with Mod Rewrite and a single page to handle all of the pages. It lets me know what is finished and what still needs to be finished. The old version had sort of the same set up but all of the text was on the same page, so it made it somewhat difficult to find the parts. The new site splits the textual parts into their own files.

Possibly Related Posts:

• Game Engine Development and Open Source
• Plans for Base CMS
• Bullet: E-Book Library Management and Content Server
• Using ZendFramework 2 beta1 For Directory Project
• Project Plans

JavaScript is a Bitch

More so, if you like spent most of your time avoiding it like some annoying friend. I mean, it is a lovable puppy, but sometimes it craps on your shoe and you want to kick it (Please don’t kick your pets). I know enough about programming in general to work my way around to solve some problems, it just takes hours of research and development and days of testing and debugging.

It is interesting as a hobby to learn how to get past the gotchas that are involved in developing in JavaScript. The parts that I don’t like are that you have to test for one thing for IE and another for Mozilla. I don’t code for Opera, which has less than one percent market share and even less than that are users to the sites I develop for. Nothing wrong with Opera, I just don’t care enough about it to want to support it. I have enough problems supporting IE and Mozilla.

xmlHTTPRequest

Oh yeah! One thing that I noticed is that you either have to close out of your connections if you want to use the same class to open multiple connections to pages, or extend it to different classes. It’ll throw an exception and spit out garbage otherwise.

It is fun, I mean. It is a lot easier than I thought it would be. The other stuff that comes with it, drag and drop elements and cool effects and transitions are the hard parts.

The only other issue is getting people to enable JavaScript. Most organizations and businesses disable it because they use IE and have issues. Unless their own intranet site uses it.

setInterval vs setTimeOut

I’ve had problems with using object oriented code in JavaScript and Timers. I’m going to try it again and see if I can get something working.

What I mean was that setTimeOut worked perfectly, until I tried to add another timer, then it just didn’t do anything. The project calls for four transitions. Fade In, Linear (left to right), Linear (bottom to top with probably a fade in also), and Fade Out.

I told the guy, “Is it okay if I just have it to where it just waits and then changes the content?” While it said it would be “Okay” it seemed that he didn’t want something that was already done in Flash. What I mean is that he didn’t want something that was Worse than what he had currently. Even if it would be dynamic over the currently static Flash movie.

New Tests

I think I have what the problem was with the old JavaScript code, so I’m going to try to test out a new implementation and see if it works. Wish me luck.

Possibly Related Posts:

• Calibre Improvements
• DragonU Bug Tracker Dev – Milestone 1
• Dragon MVC
• Why I Contributed to WordPress
• DragonU DB Component

A.K.A: Why I hate myself

I spent a good portion of time (about 4 hours) fixing a obsure (to me) JavaScript onload bug. I was like, why doesn’t this work and tried many different tests to make it work. Now that it does work, I can finally move on to other problems to which I’ll spend another day or two trying to fix. I’m getting more deeply into JavaScript and the research and tests will help me learn JavaScript and keep me from making the same mistakes down the road.

The Problem

I was doing the body onload=”” with the function, but then I decided that it would be better if I used an event handler. The reason behind that was when I moved the code to an external file, the function stopped working. It was a way for me to debug and fix the problem. I’m going to try to move the code back to an external file, so that it can be used again elsewhere.

The Solution

After a great deal of research I realized that the example I was using was just puesdo code and found the right event handling functions for both Mozilla and IE.

Possibly Related Posts:

• Game Engine Development and Open Source
• Plans for Base CMS
• Bullet: E-Book Library Management and Content Server
• Using ZendFramework 2 beta1 For Directory Project
• Project Plans

There seems to be a problem with using PHP and JavaScript in Firefox, it doesn’t like running External JavaScript files or running inline JavaScript. It also has some problems with CSS Expression.


function resize()
{
var Middle = 0, Left = 0, Right = 0;

if(typeof(document.getElementById(“ContentMiddle”).offsetHeight) == ‘number’)
{
Middle = document.getElementById(“ContentMiddle”).offsetHeight;
Left = document.getElementById(“NavLeft”).offsetHeight;
Right = document.getElementById(“NavRight”).offsetHeight;
}

var Side = 0;
if(Left > Right) {
Side = Left;
} else {
Side = Right;
}

if(Middle > Side) {
document.getElementById(“NavLeft”).style.height = Middle;
document.getElementById(“NavRight”).style.height = Middle;
return Middle;
} else {
document.getElementById(“NavLeft”).style.height = Side;
document.getElementById(“NavRight”).style.height = Side;
document.getElementById(“ContentMiddle”).style.height = Side;
return Side;
}
}

Will run on Firefox along with body.onload, but won’t run when including with PHP and outputting. It could be my lack of JavaScript Skillz, but I’m doing research on fixes and what not. Surpisingly, it works fine in IE but has some Design problems in IE that I need to also fix.

Trying to call the function with the CSS expression also fails.


expression(resize());


I also could be doing this wrong and I will need to figure out a workaround or just go to using Tables within Tables, which does suck.

Fixed

It seemed that I needed to include +’px’ to the value. Once I did that, it worked perfectly on Firefox. I need to remember that later on. I still don’t know if the expression would work instead but I’m going to do a quick test to see.

Expression Test: Didn’t work.

Possibly Related Posts:

• Game Engine Development and Open Source
• Plans for Base CMS
• Bullet: E-Book Library Management and Content Server
• Using ZendFramework 2 beta1 For Directory Project
• Project Plans

JavaScript adds to the development time and since I’m not as skilled it adds even more time as I have to research and test what I write for both Firefox and IE. Firefox (Mozilla) usually doesn’t give me any problems, but adding support for IE is what drives the development time even further. It would be easier to say I’m not going to support IE, but then I lose a great deal of my base for that feature, depending on what it is. A lot of the time, I don’t use JavaScript because I have no real need for it. Why do I need to spend the time learning something that I won’t use but 10% of the time. When I do need it, I have to learn how to do what I need to use it for. I was greatly interested in how they do a lot of the advanced stuff, but I realized that it was only high novice to low intermediate coding and I was the novice who didn’t understand.

When you spend over eight years learning HTML and only then know about 90% and then teach yourself how to use PHP for three years, you don’t really have time for a lot of other stuff. If I ever sat down and read a book and did the examples in the book, then I could try some experiments. My problem is that I want to do stuff now and learning stuff from examples and from the ground up wasn’t very interesting. If I had actually taken the time to learn all I could, then I could probably create something that was moderately complex without having to do a lot of research.

I may finally break down and learn JavaScript 2.0 or 1.5, if JS 2.0 takes too long to be implemented in IE. I mean from the ground up, reading almost every detail and getting to be intimate with almost every aspect with the language. I must also say that I never really learned DOM 1.0 spec or the DOM 2.0 spec. It is part my difficultly with JavaScript is not the language, but the browser DOM support. If I can find a complete JS 1.5 or 2.0 language book that gives the complete DOM 1.0 and/or 2.0 spec, then maybe I would have an easier chance finally learning the complete language and creating something that is truely useful instead of tiny helper snippets for simple projects.

One of the things that I’m going to do that is going to be extremely difficult for me is getting my hands dirtly with an advanced part of JS and DOM and a lot of what I code won’t be mine, but pieced together from examples. I will also be trying to learn JS 1.5 from online examples and reference guides. That has almost never worked out well, since I can’t really learn without a book in my hand and forced to read the contents. It gets boring and I move on to other parts of the Web when I finally get bored.

Possibly Related Posts:

• Game Engine Development and Open Source
• Plans for Base CMS
• Bullet: E-Book Library Management and Content Server
• Using ZendFramework 2 beta1 For Directory Project
• Project Plans

I need to create a way to create an AJAX toolkit that works with all modern browsers and keeps a lot of the work of testing out of the way for the developer using it. It is going to involve research, which I’m doing, and testing, which I haven’t yet started. I’m going to look at other toolkits and see how they do things and develop my own methods and see how well I can do things against the other one.

I also need to focus a little bit more on security to make sure that a person can’t take control using my methods and PHP Scripts against me. A lot of testing will be required, but I think it will have an awesome effect.

Possibly Related Posts:

• Game Engine Development and Open Source
• Plans for Base CMS
• Bullet: E-Book Library Management and Content Server
• Using ZendFramework 2 beta1 For Directory Project
• Project Plans