Update portion of page using Ajax without jQuery

Question

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 not very experienced with Ajax. jQuery's method was to use the page's URL with "#sectionid" after it.

You probably don't want to hear it, but just use jQuery. If you're worried about page weight, just use a CDN'ed copy of jQuery. The likelihood, if you do, is that your clients will already have jQuery cached. — moribvndvs
– moribvndvs, Commented May 21, 2012 at 0:03
Jquery is javascript. It's nothing more than javascript libraries, so you aren't breaking your rules by using it. — CD Smith
– CD Smith, Commented May 21, 2012 at 0:12
I know that jQuery is JavaScript. I only need one very small piece of it, and thus do not want to load superfluous libraries. — Rhyono
– Rhyono, Commented May 21, 2012 at 0:14
@HackedByChinese is right, it will most likely take less time to for the user's browser to retrieve a 304 Not Modified answer from Google or Microsoft's CDN and running your JQuery code than loading your non-jquery code. Regardless of that, if you still want to do it the hard way, you should take a read on a good AJAX tutorial, then all you have to do is use the html response text inside of the callback function if (xmlhttp.readyState==4 && xmlhttp.status==200), which will be demonstrated a couple pages after the tutorial's introduction. — Fabrício Matté
– Fabrício Matté, Commented May 21, 2012 at 0:19
Seeing as most people will try to crucify me for linking to W3S, I'll recommend this tutorial which is linked from Mozilla, faster and more direct to the point as well. — Fabrício Matté
– Fabrício Matté, Commented May 21, 2012 at 0:25

Matt Wonlaw · Accepted Answer · 2012-05-22 02:41:04Z

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, Opera
  window.xmlhttp = new XMLHttpRequest();
} else {// IE6, 5
  window.xmlhttp = new ActiveXObject("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();

Collectives™ on Stack Overflow

Update portion of page using Ajax without jQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related