§ Simple AJAX request
Almost all of my AJAXing is to simply grab the output of a source and stuff it in in a div. In previous posts you can see what I've been using for a long time, but I wanted to make a function I wouldn't have to edit every time I used it in a project.
Here's what I've got right now, but I haven't actually used in a project yet. As far as I can tell, it works fine in IE6, IE8beta, FF2, FF3, Chrome, Safari...
Update: This function is now used for reloading the CAPTCHA in this blog.
function doAjaxSrc2Id(ajaxsrc,ajaxtargetid) {
var xmlHttp = null;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp == null) {
alert ("Browser does not support HTTP Request");
return;
}
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
document.getElementById(ajaxtargetid).innerHTML = xmlHttp.responseText;
}
}
xmlHttp.open("GET",ajaxsrc,true);
xmlHttp.send(null);
}
This is what I've been using for a long time:
var xmlHttp;
function doRequest() {
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert ("Browser does not support HTTP Request");
return;
}
var url = <souce url I have to edit every time I want to use this thing>;
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}//end doRequest()
function stateChanged() {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
document.getElementById(<target id I have to edit every time I want to use this thing>).innerHTML = xmlHttp.responseText;
}
}//end stateChanged()
function GetXmlHttpObject() {
var objXMLHttp = null;
if (window.XMLHttpRequest) {
objXMLHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return objXMLHttp;
}//end GetXmlHttpObject()
By the way, I looked into the "Microsoft.XMLHTTP" as opposed to more modern ways. Yes, another big, boring waste of research time. So far, this is supported up to the latest versions of IE (or rather, the latest msxmlxx.dll; at least, I think they're all named that), but from IE7 on there is native support for the window.XMLHttpRequest, so it's unlikely the ActiveXObject would be used in anything newer than IE6 anyway.
Also by the way, I don't think I've ever seen xmlHttp.readyState to return "complete" instead of a number. But, along with the KISS principle, "if it ain't broke, don't fix it!"
last edited on February 16th, 2009 at 1:36 AM
- Slashback on "window.onload via double delegate function" - The makeDoubleDelegate() function is rather simple and straightforward, so I find it quite odd that Chrome can't handle it. I do…
- Joaquin Serra on "window.onload via double delegate function" - Hello, i'm using this function one year but i realized now that in Google chrome doesn't work. Have you got some solution?
- tadd on "Javascript function to add css" - thanks for the post
- Slashback on "window.onload via double delegate function" - The makeDoubleDelegate function just needs to be available, so include it once somewhere in your html file or an included javascript…
- Neil Haskins on "window.onload via double delegate function" - I don't understand exactly how this is to be used; I've just used javascript in a cut and paste manner really. Does the whole code go…
