Friday, May 8, 2009

Basic AJAX Script

<script language = "javascript">

var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
}

else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function getData(dataSource, divID) {
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>

At the HTML just add this line :
onClick="getData('my_write.php?type=kingston','contentalt')"

  • onClick is an event handler
  • my_write.php is a processing page
  • type=kingston is a parameter passed to my_write.php, named "type" and valued "kingston"
  • contentalt is div id where the result from my_write.php will appears

No comments:

Post a Comment