Personal Computing and Development by Dag J. Nedrelid

AJAX basics in javascript

First the javascript function.

function ajaxFunction() {
var xmlHttp;

if(window.XMLHttpRequest) {
  xmlHttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} else {
  alert("Your browser does not support AJAX!");
  return false;
}

xmlHttp.open("GET","links.txt",true);
xmlHttp.onreadystatechange=function() {
  if(xmlHttp.readyState==4) {
    document.getElementById('relatedLinks').innerHTML = xmlHttp.responseText;
  }
}
xmlHttp.send(null);
}

The HTML.

<div id="relatedLinks">This will be filled with the link in links.txt.</div>
<a href="#" onclick="ajaxFunction()">Click me to change div content</a>

And the links.txt.

<a href="http://www.domain.com/">The Domain!</a>

Sending GET data example

xmlHttp.open("GET","getreceiver.php?foo=bar",true);
xmlHttp.send(null);

Sending POST data example

xmlHttp.open("POST","postreceiver.php",true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send('foo=bar');


One thing I had a problem with when playing around in the beginning was that you can’t call data sources outside of the domain of the file calling it, this is a safety measure in some browsers. There are some ways to get outside this. Absolutely nice to know in advance to save some headache.

Deeper details of AJAX can be found through an online search engine very easily.

Microsoft.XMLHTTP might be worth checking for as well if the browser check above fails. There are many ways and means of checking validation of browsers, the one illustrated is just one of them.