Date: 2008oct5
Language: javaScript
Keywords: sample, kickstart, tutorial
Keywords: ajax, without, jquery, fetch
Q. Can you do AJAX without jquery?
A.
(This article is basically obsolete, now its better to use fetch()
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API )
Entire books have been written about it but its just not that
hard. Here's some a simple example. It displays a button that when
pressed displays the time on the server.
-------8<------------ file get_time.html -------------------------------
<script src=get_time.js></script>
<button onClick="getServerTimeWithAjax()">Get Time on Server</button>
-------8<------------ file get_time.js -------------------------------
// A browser independent function to get the AJAX object.
// I can't say I made this up.
function getAjax() {
return (!window.XMLHttpRequest)? (new ActiveXObject('Microsoft.XMLHTTP')):(new XMLHttpRequest());
}
// You need a global variable for the request.
let g_req = null;
function stateChange() {
let result, txt;
if (g_req.readyState == 4) {
result = false;
if (g_req.status == 200) {
result = true;
txt = g_req.responseText;
}
g_req = null; // Set your global to null to show the request is done
alert('Time on the server is ' + txt); // Display the result
}
}
function getServerTimeWithAjax() {
const url = 'get_time.php'; // Replace with your URL here
if (g_req != null) {
g_req.abort();
}
// Perhaps set something to show you are working
// setWorking();
g_req = getAjax();
g_req.onreadystatechange = stateChange; // your handler function (above). Do NOT do "stateChange()"
g_req.open('GET', url, true);
g_req.send(null);
}
-------8<------------ file get_time.php -------------------------------
<?
print strftime('%T', time());
?>