Load a file via AJAX, *without* jQuery?

[youradds]

Hi guys,

I've been using AJAX via jQuery for a while now. However, I'm working on a site where I wanna load a "banner" using async. This works fine with jQuery:

<script>function load_side_ad() {
	var aa = jQuery.ajax({
	  url: '/cgi-bin/ban.pl',
	  async: false
	 }).responseText;
	jQuery('#banner_ad_side').html(aa);
}</script>

However, it seems a bit OTT to have ALL of jQuery (even minified its a large file )

How easy would it be to do this without jQuery?

I had a look on google - but it seems all the tutorials use jQuery now

TIA

Andy

 

[jmeckley]

why does it seem over the top? jquery solves a number of problems elegantly, decreasing development time and improving the user experience. the productivity gain is invaluable. referencing jquery from a CDN (google for example) means it's a near zero cost.

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[BillyRayPreachersSon]

When all else fails, Wikipedia is your friend

http://en.wikipedia.org/wiki/XMLHttpRequest

Shout if you need further help - the above at least shows you how to get started without any libraries whatsoever.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[youradds]

jmeckley - we literally ONLY need to use AJAX to grab the banner - nothing else =)

Billy - thanks

I managed to get this put together:

<script>
function HttpRequest(url){
var pageRequest = false //variable to hold ajax object
/*@cc_on
   @if (@_jscript_version >= 5)
      try {
      pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
      }
      catch (e){
         try {
         pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
         }
         catch (e2){
         pageRequest = false
         }
      }
   @end
@*/

}


if (!pageRequest && typeof XMLHttpRequest != 'undefined') {
   pageRequest = new XMLHttpRequest()
}

if (pageRequest){ //if pageRequest is not false
   pageRequest.open('GET', url, false) //get page synchronously 
   pageRequest.send(null)
   embedpage(pageRequest)
}




function load_side_ad() {


var the_html = HttpRequest("/cgi-bin/ban.pl") //include "external.htm" onto current page
alert(the_html);

}</script>

However, instead of showing me the content- it seems to re-load the page, with the contents form that script. What am I doing wrong?

TIA!

Andy

 

[youradds]

Hi,

I managed to get this working - but it doesn't seem to wanna work as aSync

var rootdomain="[URL unfurl="true"]http://"+window.location.hostname[/URL]

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)
    writecontent(page_request)
}

function writecontent(page_request){
    if (window.location.href.indexOf("http")==-1 || page_request.status==200) {
        /*alert("FOO "  + page_request.responseText);*/
        document.getElementById('banner_ad_side').innerHTML = page_request.responseText;  
    }

    /*return (page_request.responseText);*/
}



function load_side_ad() {
    ajaxinclude("cgi-bin/ban.pl");
}

Any suggestions?

TIA!

Andy

 

[BillyRayPreachersSon]

For asynchronous behaviour, you'll need to set an onreadystatechange handler before calling open. In this handler, you need to test the readyState property of your XHR object to see if it is equal to 4 or not. If it is, your content has been loaded and is ready to use. Something like this:

page_request.onreadystatechange = statechanged;
page_request.open('GET', url, false);
page_request.send(null);

...

function statechanged() {
   if (page_request.readyState == 4) {
      writecontent(page_request);
   }
}

Check out the part of that Wikipedia article titled 'The onreadystatechange event listener' for more on these codes.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[youradds]

Wow, that was simple! Thanks

For anyone who may be having a similar issue - here is the code I ended up using:

var rootdomain="[URL unfurl="true"]http://"+window.location.hostname[/URL]

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.onreadystatechange = statechanged;
    page_request.open('GET', url, true) //get page asynchronously
    page_request.send(null)
    function statechanged() {
        if (page_request.readyState == 4) {
            writecontent(page_request);
        }
    }
}
function writecontent(page_request){
    if (window.location.href.indexOf("http")==-1 || page_request.status==200) {
        document.getElementById('banner_ad_side').innerHTML = page_request.responseText;
    }
}
function load_side_ad() {
    ajaxinclude("cgi-bin/ban.pl");
}

Thanks again

Andy

 

[BillyRayPreachersSon]

Incidentally, you could merge your statechanged and writecontent functions in to one. For example, removing statechanged altogether, and updating writecontent to be something like this:

function writecontent(page_request) {
    if ((page_request.status == 200 && page_request.readyState == 4) || window.location.protocol == 'file:') {
        document.getElementById('banner_ad_side').innerHTML = page_request.responseText;
    }
}

I assume you were testing location.href to know whether you were using the file protocol or not, so included another way of testing for this which you might find handy. You'd also need to point onreadystatechange to the new function.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[youradds]

Hi,

Cool thanks - will have a play with that

Cheers

Andy