After taking a look at this tutorial and a couple others, I was dissapointed at the quality of the code so here’s a quick tutorial to get you jump started with AJAX (Asynchronous JavaScript + XML). I am using object detection and explain some of the caveats for doing what I am doing. 数据挖掘研究院
Simply put, AJAX allows you to make a call to an http server (typically an RSS feed or a webpage), get it’s content and load them into your existing page without having to refresh the whole page. This means that services like email don’t have to reload the whole page everytime you click a message, saving on bandwidth (loading the header/footer all over again) and making things more efficient. 数据挖掘研究院
On to the code:function loadurl(dest) { try { // Moz supports XMLHttpRequest. IE uses ActiveX. // browser detction is bad. object detection works for any browser xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { // browser doesn′t support ajax. handle however you want } // the xmlhttp object triggers an event everytime the status changes // triggered() function handles the events xmlhttp.onreadystatechange = triggered; // open takes in the HTTP method and url. xmlhttp.open("GET", dest); // send the request. if this is a POST request we would have // sent post variables: send("name=aleem&gender=male) // Moz is fine with just send(); but // IE expects a value here, hence we do send(null); xmlhttp.send(null); } function triggered() { // if the readyState code is 4 (Completed) // and http status is 200 (OK) we go ahead and get the responseText // other readyState codes: // 0=Uninitialised 1=Loading 2=Loaded 3=Interactive if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) { // xmlhttp.responseText object contains the response. document.getElementById("output").innerHTML = xmlhttp.responseText; } }
The above code goes between the html <head></head> tags. The corresponding html body would be:
<body> <div id="output" onclick="loadurl(′/resume/resume.txt′)">click here to load my resume into this div</div> </body>
The destination url has to be in the same domain or a security error might be thrown depending on your security settings. 数据挖掘研究院
Here’s a working example (it loads my resume):
