Cross browser AJAX function to dynamically load HTML

Question

I'm looking for an AJAX function to dynamically request an HTML page. I already found the following:

function ajaxinclude(url) 
{
   var page_request = false

   if (window.XMLHttpRequest) // if Mozilla, Safari etc
      page_request = new XMLHttpRequest()
   else if (window.ActiveXObject) // if IE
   { 

     try {
       page_request = new ActiveXObject("Msxml2.XMLHTTP")
     } 
     catch (e){
       try{
         page_request = new ActiveXObject("Microsoft.XMLHTTP")
       }
       catch (e){}
     }
   }
   else
     return false

   page_request.open('GET', url, false) //get page synchronously 
   page_request.send(null)
   return page_request.responseText;
 }

It works fine in Firefox and Chrome, but it fails in IE on the following line:

page_request.open('GET', url, false)

Is there a better available function that is guaranteed to be completely cross browser compatible?

Edit: Thanks for all the great suggestions... in the end, I decided not to reinvent the wheel here. And one of the things I forgot to mention was that I also need it to update at an interval... though I had already figure that out so I didn't think it made a difference. But then I found the great Ajax.PeriodicUpdater() Method in prototype and vastly changed my mind. I just went from a 50 LOC solution to about 4 lines :)

Answer 1

I would suggest using any of a number of different javascript frameworks for this functionality instead of reinventing it. There's jQuery, Prototype/Scriptaculous, MooTools, Dojo, and many others. All of these offer cross-browser support for what you are doing.

Answer 2

If I were you, I'd use a toolkit like JQuery in order to make sure that it is as compatible as possible. No matter what, however, you're going to have to deal with the cases where it doesn't work. Don't forget that there are plenty of people who browse without javascript support.

Answer 3

Or you can try this if you don't need an entire framework: http://www.hunlock.com/blogs/The_Ultimate_Ajax_Object

Answer 4

I would have to agree, don't go reinventing the wheel, or in this case, AJAX.

JQuery and Prototype do an excellent job of letting you NOT have to deal with cross-browser support, and greatly simplifying Javascript type programming. I fell into JQuery first so I'm biased towards it, and from what I've seen the library is a little smaller (read: faster in the browser), but Prototype I believe has been around longer and has TONS of plugins and examples out there. Ruby on Rails also by default uses Prototype. Funny enough, the code in both looks very similar and takes little rewriting to change libraries.

JQuery Tutorials <-- Just head on down to the AJAX section

Answer 5

You might use an IE version which your script does not support. Try it again with this code snippet added before your function. ajaxinclude() can then be shortened to

function ajaxinclude(url)  {
    var req = new XMLHttpRequest;
    if(!req)
        return null;

    req.open('GET', url, false); // get page synchronously 
    req.send();
    return req.responseText;
}

As an aside: I generally dislike using frameworks - there's too much magic happening behind the scenes for me to feel comfortable...

Answer 6

I recommend jQuery, but there is also a very lightweight solution: XHConn