0

I need to send an ajax request to a webserver "http://examples.com/ajax" the response will be the html of a <div> and it will be inserted to an existing <div id="holder">. What's the simplest, smallest way to write this in javascript? without using jQuery?

It only needs to support the latest version of chrome.

Rana
  • 4,431
  • 9
  • 32
  • 39

1 Answers1

3
var req = new XMLHttpRequest();

req.onreadystatechange = function() {
  //Is request finished? Does the requested page exist?
  if(req.readyState==4 && req.status==200) {   
    //Your HTML arrives here
    alert(req.responseText);  
  }
}

req.open("GET","http://examples.com/ajax.php",true)  //true indicates ASYNCHRONOUS
req.send(null);

This solution uses get, so you've got to add variables using ? and & to your URL (e.g. http://examples.com/ajax.php?foo=bar&blah=blee.

If you want to do it using post, run a few with get and then this article is useful.

Ben
  • 54,723
  • 49
  • 178
  • 224
  • thanks. how do I insert req.responseText into
    ?
     – Rana Nov 06 '10 at 09:24
  • @rana: `document.getElementById('holder').innerHTML = req.responseText` – Sarfraz Nov 06 '10 at 09:38
  • also for error handling I can just add an else to that if statement right? – Rana Nov 06 '10 at 09:46
  • PHP errors will come across as `responseText` so you can see them directly. HTTP errors (e.g. 404 "can't find page") will be seen in `req.status`. A status of 200 indicates everything went OK with your HTTP request. – Ben Nov 07 '10 at 00:24
  • is this solution cross browser compatible? if not @steve can you modify it – indianwebdevil Sep 21 '11 at 02:08