Update Portion Of Page Using Ajax Without Jquery

The page is mostly in PHP and only lightly uses any JavaScript, so I do not wish to use jQuery when it must be possible without it. I want to update a portion of a page, but I'm no

Solution 1:

All the information you'd need to know to hand-roll your own is here:

https://developer.mozilla.org/en/XMLHttpRequest

You'll be interested in the send, open, response, readyState and onreadystatechange sections of the documentation.

onreadystatechange will fire whenever the readyState of your request changes. Once your readyState has changed to done you can check the response you received.

Make sure when you open you open in async mode. You don't want to freeze your page by making synchronous http requests.

if you need it running on older versions of I.E. wikipedia has some good information: http://en.wikipedia.org/wiki/XMLHttpRequest#Support_in_Internet_Explorer_versions_5.2C_5.5_and_6

I assume you know how to use document.getElementById and element.innerHTML to set the content of your element.

---

EDIT Went ahead and added a basic implementation:

if (window.XMLHttpRequest) {// IE7+, Firefox, Webkit, Operawindow.xmlhttp = newXMLHttpRequest();
} else {// IE6, 5window.xmlhttp = newActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
     document.getElementById("someId").innerHTML = xmlhttp.responseText;
  }
}

xmlhttp.open("GET", "pageUrl", true);
xmlhttp.send();