§ 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
- Walid on "Adventures with Ubuntu 9.10 on G4 Yikes!" - I am in the same process as you. Although I still dual-boot to Windows for my ganimg leisure. My first contact with Ubuntu was way…
- Slashback on "Simpler adding & removing element classnames" - Actually, the addClassName function does what you want, pretty much the same way you suggest.
- angie on "Simpler adding & removing element classnames" - And what if I want to add a class, but keeping the csseals the element already has?I mean, I have an element with a class, let's name…
- backlinks on "Adjust iframe height to contents" - Definitely helped me.
- Slashback on "Simpler validate form fields are filled in (no additional class names)" - You are welcome!
