Category Archives: Javascript

Ajax notes

Ajax stands for asynchronous javascript and xml.

From the w3schools website:

The XMLHttpRequest object is used to exchange data with a server behind the scenes.This means that it is possible to update parts of a web page, without reloading the whole page.

To handle all modern browsers, including IE5 and IE6, check if the browser supports the XMLHttpRequest object. If it does, create an XMLHttpRequest object, if not, create an ActiveXObject.

When the XMLHttpRequest object has been created – use the open and send methods to send a request to the server.

xmlhttp.open(“GET”,”ajax_info.txt”,true);

xmlhttp.send()

Example:

<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","text_response.txt",true);
xmlhttp.send();
}
</script>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

 

To POST data like an HTML form, add an HTTP header with setRequestHeader(). Specify the data you want to send in the send() method.

Use the responseText or responseXML methods to display the data from the server.In the onreadystatechange event, we specify what will happen when the server response is ready to be processed.

When readyState is 4 and status is 200, the response is ready