AJAX and XMLHTTPREQUEST (IE -vs- FF)

I have discovered a good deal regarding the use of the ajax critical xmlhttprequest object. It is central to ajaxing. As the wiki pedia artical points out, it is how the client communicated with the server. The ajax frameworks that are abound, help to bridge the gap for developers who are not real strong in javascript. That would be me, but i am getting a real baptizing in javascript and the xmlhttprequest object.

Iwrested for about a day getting my existing ajax code that is using this object to work in both FF and IE. I implemented some ajax code in a utility about a 2 years ago, that never worked in IE. I was not too worried, since the utility is for admin users, a small audience, so i said "use only in FF". That was ok for initial success, but now that i am wanting to use ajax in another utility and probably in our main application, i knew it was time to get a better handle on some of this stuff.

I was digging into some frameworks and getting a little confused, this lead me into other jscript libraries and code, like JSON and JQuery - which i think will matter more when i am actually returning pure XML or WDDX formatted data and dealing with it in javascript. Anyway - i decided that i would solve first the code that was out there and get it to work across both browsers. This lead me into the issue of IE and FF having different implementations. IE tends to treat the W3C standards as recommendations.

Eventually i was able to solve the problem with IE, which was a caching problem. Once i added code like this;

function showQuestions(AID, flag){ xmlHttp = GetXmlHttpObject();
var url="views/filterQuestions.cfm?&assessmentID=" + AID + "&showAllQuestions=" + flag ; xmlHttp.open("POST", url , true); xmlHttp.onreadystatechange=updateQuestionList; xmlHttp.send(null);}

 Putting the open statement before the onreadystate call was the main reason it was caching.  Once i moved the statement, it worked for the first request, but was still caching after that (in IE).   I added a line to the end of the query string to solve this problem.

var url="assets/filterQuestions.cfm?&assessmentID=" + AID + "&showAllQuestions=" + flag + "?RandomKey=" + Math.random() * Date.parse(new Date());

I found this workaround posted here

The IE  problem was complicated because i was using the onClick event on the items in my select box, which was fine for FF, but was not for IE.  Eventually, using alerts() in the code, i was able to trace the problem to the select controls not firing in IE.

This is what the initial html looked like that worked in FF, but not IE.

<select name="subject"> <option value="ela" onclick="showAssessments(this.value)">ELA</option> <option value="math" onclick="showAssessments(this.value)">Math</option> <option value="science" onclick="showAssessments(this.value)">Science</option> <option value="socialStudies" onclick="showAssessments(this.value)">Social Studies</option> <option value="allSubjects" onclick="showAssessments(this.value)">All</option></select>

This is the corrected version.

<select name="subject" onchange="showAssessments(this.value)"> <option value="ela" >ELA</option> <option value="math" >Math</option> <option value="science" >Science</option> <option value="socialStudies" >Social</option> <option value="allSubjects" >All</option></select>

Once both of these issues where resolved, i was really about to focus on the xmlhttprequest code. This is the function i ended up using that i liked the best. It is cross broswer compatible and clean.

function GetXmlHttpObject () { var xmlHttp = null; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); // alert('success'); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp;}

A final AHA, for today.

By using ajax this way, storing the result of a file that is speaking to the db and doing the formatting and passing the result to a html element on a page, its effiecient, BUT, does not allow you to encapsulate db code into CFCs or other objects. I suppose you could, but you would not use a CFC and a DAO function that had html output in it. I