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

Cross-browser anything is tricky. Use a Javascript framework like jQuery. It only has a 30k footprint and will solve this and so many other problems for you. — cletus, Jan 11 '09 at 02:03
`It only has a 30k footprint` *only* having a 30k footprint is absurd. — Qix - MONICA WAS MISTREATED, Jul 28 '14 at 18:08

score 14 · Accepted Answer · answered Jan 11 '09 at 02:55

14

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

answered Jan 11 '09 at 02:55

Adam

7,800
2
25
24

14

There are perfectly valid situations where one cannot/want not to use a framework, no down vote from me but its worth taking into account mobile websites and phonegap apps where one may want only the very thing that is needed. – Purefan May 05 '13 at 10:04
2

I'd give Purefan a million upvotes if I could do so without stalking him around stackoverflow. Jquery is nice for cross browser stuff for sure, but sometimes it's best to pack light and work on a lower level. – Dom Ramirez Jul 23 '13 at 21:23

score 8 · Answer 2 · answered Jan 11 '09 at 02:34

8

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

answered Jan 11 '09 at 02:34

Luca Matteis

29,161
19
114
169

score 6 · Answer 3 · answered Jan 11 '09 at 01:53

6

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.

answered Jan 11 '09 at 01:53

tvanfosson

524,688
99
697
795

Despite not really wanting an entire framework for one simple little function, after looking around at the frameworks available I agree, this is the best route...no point recreating work that's already been done. – Adam Haile Jan 11 '09 at 14:21

score 3 · Answer 4 · answered Jan 12 '09 at 03:56

3

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

answered Jan 12 '09 at 03:56

Vadim Ferderer

911
7
11

3

XHConn hasn't been updated since april 2005 if anyone's curious. – Zach Lysobey Apr 01 '13 at 21:00

score 2 · Answer 5 · answered Jan 11 '09 at 01:54

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.

score 2 · Answer 6 · edited May 23 '17 at 10:33

2

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...

edited May 23 '17 at 10:33

Community

1
1

answered Jan 11 '09 at 10:33

Christoph

164,997
36
182
240

2

Agreed on feeling uncomfortable with behind the scenes magic... I knew the frameworks existed, but I just didn't think I need a whole huge framework when I really only need one simple function. – Adam Haile Jan 11 '09 at 14:19
@Adam: Did you try my suggestion? – Christoph Jan 11 '09 at 14:58
1

yes...I did, and it worked better. I just went with the framework in the end because the resulting code was much cleaner. – Adam Haile Jan 11 '09 at 16:14
I would feel more uncomfortable reinventing the wheel. Millions of people use jQuery, and thus millions have debugged it. And it's not magic. It's JavaScript. Open source, so you can look at the source code. If you have a fix, you can contribute back. – Aaron Apr 30 '13 at 16:47

Cross browser AJAX function to dynamically load HTML

6 Answers6

Linked