Not really a question, but....

Wombaticus

Why does anyone use jQuery for AJAX calls? In fact, for a lot of things? OK, there's no point in reinventing the wheel, and people have built some nice things with it, notably photo sliders/ carousels etc, but for so many things - and AJAX is a case in point - good ol' vanilla JavaScript is so much easier! A number of times now I've looked at using jQuery for AJAX, and given up in frustration. No more. Sledgehammers and nuts come to mind.

Richard Deeming

Wombaticus wrote:

for so many things - and AJAX is a case in point - good ol' vanilla JavaScript is so much easier!

Really?

if (window.XMLHttpRequest) {
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
var result = httpRequest.responseText;
// Do something with the result
}
};

httpRequest.open("GET", theUrl, true);
httpRequest.send();

vs:

$.ajax({
url: theUrl
// Other options...
}).done(function(result){
// Do something with the result...
});

Also, the jQuery version[^] has a lot of built-in functionality which you would have to reimplement if you wanted to use it in the plain Javascript version.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

F ES Sitecore

One of the nice things about jQuery is that it hides per-browser implementation from the client; you don't need to know the differences between how IE\Chrome\FireFox implements ajax, or even if there are differences in how individual versions work. People also keep jQuery up-to-date again so you don't have to. Add to that the syntax is much easier as Richard has already pointed out, and it has nice features you'd have to code yourself such as making "get" calls non-cached etc. If the only reason you're using jQuery is for ajax then you might have a point, but if I'm honest even if ajax was all I was doing I'd probably still use jQuery as it is lightweight and you'll probably end up using the other features anyway.

Wombaticus

Well, I don't find the syntax (or documentation) clear at all. Maybe I should turn this into a question: how would you, for example, "jQueryify" this?

if (window.XMLHttpRequest) {
rQM = new XMLHttpRequest();
} else if (window.ActiveXObject) {
rQM = new ActiveXObject("Microsoft.XMLHTTP");
}

function getPage(p, tImg, iImg, t, s, h) {
var r = new Date().getTime();
var url = 'pagebox.ashx?p=' + p.toString() + '&r=' + r.toString();
rQM.open("GET", url, true);
rQM.onreadystatechange = function () {
UpdateScreen(p, tImg, iImg, t, s, h);
}
rQM.send(null);
}

(tinyMCE references the tinyMCE HTML editor[^]) To me, that is pretty easy to grok - I've tried over and over to work out how to do it in jQuery and, as I say given up each time in despair... (And, yes, I know it's a little ugly in the return - I should probably return the data as XML or JSON, but it works well enough for my purposes.)

Wombaticus

Well.. see my reply to F-ES Sitecore below.... (if you feel so inclined ...)

Richard Deeming

Something like this should work:

function getPage(p, tImg, iImg, t, s, h) {
$.get({
url: 'pagebox.ashx?p=' + p.toString(),
cache: false
}).done(function(response) {
updateScreen(p, tImg, iImg, t, s, h, response);
});
}

function UpdateScreen(p, tImg, iImg, t, s, h, response) {
if (response != '') {
var params = response.split("|");
document.getElementById(tImg).value = 'userfiles/' + params[0];
document.getElementById(iImg).src = 'userfiles/' + params[0];
document.getElementById(t).value = params[1];
document.getElementById(h).value = params[2];
tinyMCE.get(s).setContent(params[3]);
}
}

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

Wombaticus

As simple as that, huh...? sigh... :-O