Computer
Javascript Ajax/XMLHttpRequest
A simple implementation to use Ajax.
ajax.js
// v.1 - 2016-08-29
var ajax = function (method, url, post, callback, data) {
var xhr = null;
if(xhr == null) { try { xhr = new XMLHttpRequest(); } catch(e) { } }
if(xhr == null) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch(e) { } }
if(xhr == null) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch(e) { } }
if(xhr == null) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { } }
if(xhr == null) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { } }
if(xhr != null) {
try {
if(typeof(callback) == "function") xhr.onreadystatechange = function() {
console.log("[AJAX] xhr.readyState = " + xhr.readyState + " / xhr.status = " + xhr.status);
if(xhr.readyState == 4) {
try {
callback(xhr, data);
} catch(e) {
console.log("[AJAX] Callback error: " + e.message);
}
delete xhr;
xhr = null;
}
};
console.log("[AJAX] Request: " + url);
xhr.open(method, url, true);
if(post) {
// WebService: application/soap+xml; charset=utf-8
// Form: application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type", "application/soap+xml; charset=utf-8");
}
xhr.send(post);
} catch(e) {
console.log("[AJAX] Ajax error: " + e.message);
delete xhr;
xhr = null;
}
}
return (xhr == null);
};
example.html
// v.1 - 2016-08-29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<table border="0">
<tr><td>URL:</td> <td><input type="text" id="url" value="http://www.example.com/script.php" size="54" /></td></tr>
<tr><td>Vars:</td> <td><input type="text" id="vars" value='{ foo: "bar" }' size="54" /></td></tr>
<tr><td>File name:</td> <td><input type="text" id="filename" value="filename.ext" size="54" /></td></tr>
<tr><td>File content:</td><td><textarea id="filecontent" cols="40" rows="10">File content...</textarea></td></tr>
</table>
<br />
<code id="cmd"></code><br />
<button onclick="document.getElementById('resultStatus').innerText = document.getElementById('resultText').innerText = ''; eval(document.getElementById('cmd').innerText);">Send</button><br />
<br />
<fieldset>
<legend>result</legend>
<div id="resultStatus"></div>
<div id="resultText"></div>
</fieldset>
<script type="text/javascript">
var url = document.getElementById("url");
var vars = document.getElementById("vars");
var filename = document.getElementById("filename");
var filecontent = document.getElementById("filecontent");
function update()
{
var url = document.getElementById("url");
var vars = document.getElementById("vars");
var filename = document.getElementById("filename");
var filecontent = document.getElementById("filecontent");
var cmd = document.getElementById("cmd");
cmd.innerText = 'send(\n' +
' "' + url.value + '",\n' +
' ' + vars.value + ',\n' +
' "' + filename.value + '",\n' +
' "' + filecontent.value + '",\n' +
' function(xhr) {\n' +
' document.getElementById("resultStatus").innerText = xhr.status;\n' +
' document.getElementById("resultText" ).innerText = xhr.responseText;\n' +
' }\n' +
');'
;
}
url.onkeyup = vars.onkeyup = filename.onkeyup = filecontent.onkeyup = update;
update();
</script>
</body>
</html>
USE IT AT YOUR OWN RISK!
