how can i do jquery's $.get in pure javascript? (without wanting to return anything)

Question

I want the mobile version of my site to be as snappy as possible, however i still want some basic analytics.

I want to ping a php file (hit counter) after the mobile page has loaded to count the amount of hits from javascript enabled browsers.

Jquery's a bit overkill for 1 ajax function so i'm keen to learn how to do the following in pure javascript:

<script type="text/javascript">
    Window.onload(function(){
       $.get('mvc/assets/ajax/analytics/event_increment.php?id='+id');
    })    
</script>

Answer 1

Just specify your file as the src attribute for the script tag.

Answer 2

You can use an img tag and put that in the src, and have your script return a transparent image.

Or as someone else pointed out, have it be the src of a script tag.

EDIT

If you don't want it to load if a bot accesses the page, you could use an img tag still

<img src="transparent.gif" width="1" height="1" />

Then, use javascript to change the src of the image to your php script. Most bots won't execute the javascript and therefor will never access your php script.

You may want to obfuscate the javascript a little though, so they don't see a url in it and try and access it.

Answer 3

While it is possible to create an image tag with that url as the src if you want to do it via AJAX as jQuery does there you could do this:

<script type="text/javascript">   
   function report(){
     if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.open("GET",'mvc/assets/ajax/analytics/event_increment.php?id='+id',true);
}
window.onload = report;
</script>

Answer 4

@Mike is suggesting a great method. If you would like to get into AJAX, though, it's not that difficult.

Code c/o bobince

var xhr= new XMLHttpRequest();
xhr.open('GET', 'x.html', true);
xhr.onreadystatechange= function() {
    if (this.readyState!==4) return;
    if (this.status!==200) return; // or whatever error handling you want
    document.getElementById('y').innerHTML= this.responseText;
};
xhr.send();

// FOR <IE8 Compatibility do this first: 
if (!window.XMLHttpRequest && 'ActiveXObject' in window) {
    window.XMLHttpRequest= function() {
        return new ActiveXObject('MSXML2.XMLHttp');
    };
}

replace x.html with your php file

Answer 5

Create a utility function that will return to you a browser-specific Ajax object:

 function ajax(url, method, callback, params = null) {
     var obj;
     try {   
      obj = new XMLHttpRequest();  
     } catch(e){   
       try {     
         obj = new ActiveXObject("Msxml2.XMLHTTP");     
       } catch(e) {     
         try { 
           obj = new ActiveXObject("Microsoft.XMLHTTP");       
         } catch(e) {       
           alert("Your browser does not support Ajax.");       
           return false;       
         }     
       }   
     }
     obj.onreadystatechange = function() {
      if(obj.readyState == 4) {
         callback(obj);
      } 
     }
     obj.open(method, url, true);
     obj.send(params);
     return obj; 
 }

You could then call that function like this:

var ajax = ajax('someurl', 'get',  function(obj) { alert(obj.responseText); })

Answer 6

<script type="text/javascript">
    Window.onload(function(){
     var id = "", xmlhttp = null;
     if (window.XMLHttpRequest)
     {// code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
     }
     else
     {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }


     if (xmlhttp) {
       xmlhttp.open("GET","mvc/assets/ajax/analytics/event_increment.php?id=" + id,true);
       xmlhttp.send();
     }
})    
</script>

Answer 7

Something simplistic:

<div id="hidden"></div>
<script type="text/javascript">
    window.onload = function(){
        var div = document.getElementById("hidden");
        div.innerHTML = "<img src='tracking.php' />";
    };
</script>

Answer 8

there existed image preloaders in the early days of webpages, when internet connections were still slow, which created image objects to be used for rollover effects. this should still work and load the image:

<script type="text/javascript">
  var img = new Image('http://url.to/your/image/or/script');
</script>