gregdoolittle.com

I bought my text book for my Ajax class (I also bought my book for my Database class, but hey, that’s just not exciting!). I hope to document my experience learning Ajax in this blog. The class doesn’t begin until March 21st, but I’m planning to work through as much of the material as I can before then, so I can apply it to my new job.

Just finished the Chapter 1 tutorial. Some points to remember:

•The main goal of using Ajax: to reduce the need for data transfer within a web page, therefore increasing your site’s ability to react quickly to user activity.
•Ajax should be able to function in every JavaScript-enabled browser.
•The Ajax request object has not been standardized among browsers. In Firefox/Safari/Opera/IE7, you use the XMLHttpRequest object. In IE6 you use ActiveXObject(”Msxm12.XMLHTTP”). And in IE5 and earlier you use ActiveXObject(”Microsoft.XMLHTTP”). You should account for this every time you create an Ajax request object.
•An Ajax-script is usually called by an event handler (onClick, onChange, onMouseOver, onBlur, onKeyUp, etc.).
•The browser keeps track of a request’s “ready state”. When the ready state is equal to “4″, it means the request is done retrieving information. The DOM aspect of the script must wait until this ready state is achieved. Otherwise, the script will finish running before the information is available.

Every Ajax script will require an object to hold the request, followed a bit of browser-sniffing to apply the appropriate type of Ajax object:

var request = null;
 try {
  request = new XMLHttpRequest();
 } catch (trymicrosoft) {
  try {
   request = new ActiveXObject("Msxml12.XMLHTTP");
   } catch (othermicrosoft) {
    try {
     request = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (failed) {
      request = null;
     }
   }
 }
 if (request == null)
  alert("Error creating request object!");

Usually followed by these lines of code:

var url = "example.php";
request.open("GET", url, true); // true means this is an asynchronous request
request.onreadystatechange = updatePage; /* updatePage() is a function that will use DOM
methods to alter the page hierarchy */
request.send(null); // the request.

If you’d like to see my first, and very dorky, Ajax “application”, you can get to it here (update 01/21/07: just added a random parameter to the URL of the request object, which fixes a bug in IE and Opera). In this case the amount of data transfer saved by using Ajax (as opposed to requesting an entire HTML file) is so minimal that it hardly justifies the time spent constructing the Ajax script. But imagine that this feature was part of a page that did have a lot of elements (say, a couple of 8MB image objects). In that case, using Ajax for such a minute section of a page would be worthwhile, because it would avoid reloading the large amounts of data sitting around elsewhere on the page.

part of my new job is maintaining websites for conferences centered around VoIP as well as the Mobile Web. yesterday i was looking for info on apple’s new iphone, and i found a great reference blog that covers exactly these two topics. only today did i see apple’s website which officially introduces the iphone. if anyone reading this has other good references for VoIP or mobile phone technology, please let me know.

given apple’s success with the ipod, i’m sure they’ll do just fine stepping into the mobile hardware market. the question will be how well they can integrate their product with the current MVNO’s, and whether they’ll find a solid way to leverage their product over Samsung, HP, and other other rivals’ equivalents. regardless of how slick an phone-ported version of OSX looks, plenty of people will go for it only because they’re hooked on apple, not because of how well it integrates with the current GSM networks (another good mobile phone resource: gsmworld.com). if i was looking for a phone right now, i would be very tempted to hold out for the iphone. The google phone doesn’t really seem relevant… because if you can download the gmail client into apple’s iphone, there’s really no advantage of using a “google phone”.

must… get… iphone…

i just added new javascript/ajax interface to my photo gallery, which you can see here. it’s written by Lokesh Dhakar at huddletogether.com, i just downloaded the scripts and installed them. you can get them right here. the reason i give them the forsaken buzz-word term “ajax”, is that the gallery only loads each image as it’s needed, instead of loading them all at once. it’s not really ajax because there’s no xml, no innerHTML, and no XMLHttpRequest/ActiveXObject classes, but it’s a step in the right direction.

while i have no ajax experience myself, i hope to learn a little before my first day at my new job, as a PHP/JavaScript/XML Developer. hopefully i can catalog my findings closely enough in this blog to teach anybody reading this what i learn.