§ 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
- 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!
- humour on "Simpler validate form fields are filled in (no additional class names)" - thanks for the script !
- Slashback on "Simpler validate form fields are filled in (no additional class names)" - Thank you. I'm glad it helped!
- buy site on "Javascript function to add css" - Well, i have faced this problem a lot of times and now i got how to add CSS to my java script. I bookmarked your page and will come…
