A threadsafe implementation for XMLHTTPRequest
2005-09-05 00:37:06 sillyxone
[Reply]
Thanks a lot for the excellent article, so simple but yet powerful. I took a little freedom to modify your codes for my own use (just added a function called handleResponse(), no xml used to simplify the example).
[ajax.js]
// threadsafe asynchronous XMLHTTPRequest code
function handleResponse(response) {
var sepInd = response.indexOf('|', 0);
if(sepInd != -1) {
updateDiv = response.substring(0, sepInd);
updateCont = response.substring(sepInd + 1);
//update = response.split('|');
document.getElementById(updateDiv).innerHTML = 'Done';
}
}
function ajaxSend(url, callback){
// we use a javascript feature here called "inner functions"
// using these means the local variables retain their values after the outer function
// has returned. this is useful for thread safety, so
// reassigning the onreadystatechange function doesn't stomp over earlier requests.
function ajaxBindCallback() {
if (ajaxRequest.readyState == 4) {
if (ajaxCallback) {
ajaxCallback(ajaxRequest.responseText);
}
else {
alert('no callback defined');
}
}
}
// use a local variable to hold our request and callback until the inner function is called...
var ajaxRequest = null;
var ajaxCallback = callback;
// bind our callback then hit the server...
if (window.XMLHttpRequest) {
// moz et al
ajaxRequest = new XMLHttpRequest();
ajaxRequest.onreadystatechange = ajaxBindCallback;
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
else
if (window.ActiveXObject) {
// ie
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
if (ajaxRequest) {
ajaxRequest.onreadystatechange = ajaxBindCallback;
ajaxRequest.open("GET", url, true);
ajaxRequest.send();
}
}
}
[test.php]
<?php
if (isset($_GET['num'])) {
echo "uDiv{$_GET['num']}|";
for ($i = 0; $i < 999999; $i++) // use big data to create a delay in transfer
echo "$i ";
exit();
}
?>
<html>
<head>
<script language="javascript" src="ajaxs.js"></script>
<script language="javascript">
function updateMe(divNum) {
ajaxSendG('test.php?num=' + divNum, handleResponse);
}
</script>
</head>
<body>
<h2>Testing</h2>
<?php
for ($i = 0; $i < 5; $i++)
print <<< END_BLOCK
<input type="button" onClick="updateMe({$i})" value="Update Div {$i}">
<div id="uDiv{$i}"></div>
END_BLOCK;
?>
</body>
</html>
Previous Message
Up
