Understanding AJAX

Question

Having been primarily a server-side programmer(ASP.NET WebForms) I'm trying to get my mind wrapped around AJAX outside of the "catch-all" approach of using UpdatePanels in the Microsoft AJAX controls. My question has a couple parts:

1. Is JavaScript the only option for client-side scripting that will support server-side communication? If not what are the alternatives.
2. What is the "general" architecture of an AJAX application? Is it simply JavaScript(client-side script) interacting with server-side resources(data/remote functionality exposed through web services)? I know these may seem like simple questions but given JavaScript's "nuances" AJAX still seems a bit like "black magic" to me. Thanks!

Answer 1

Here is the short and sweet version.

1. No, but it is really the only language that is supported across a wide range of browsers. If you only care about IE you could use VBScript, but it is not any extra effort to use JS and get wider support so pretty much everyone uses JS.

2. AJAX isn't as complicated as it seems. In a nutshell it is client side code that runs in the browser to modify the current page's layout or content based on data it queries from the web server using the XMLHttpRequest object.

The most complicated part is dealing with the different syntax/behaviors of the various browsers, which is why most people use a framework that abstracts most of that away.

Here is a simple "Hello World" script using AJAX:

<script type="text/javascript">
var http = createRequestObject();
function createRequestObject() {
    var objAjax;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        objAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        objAjax = new XMLHttpRequest();
    }
    return objAjax;
}

function getNewContent(){
http.open('get','newcontent.txt');
http.onreadystatechange = updateNewContent;
http.send(null);
return false;
}

function updateNewContent(){
if(http.readyState == 4){
document.getElementById('mySentence').innerHTML = http.responseText;
}
}
</script>

Source: http://www.openhosting.co.uk/articles/webdev/5899/

The final complication is parsing what you get back from the server into an appropriate form that the code can deal with. The most common optons are:

• JSON: Easily parses into objects using JavaScript's EVAL function. Nice for pulling back information about a single entity with multiple attributes.

• XML: Somewhat easily parses using the DOM methods built into JS, but more complex than JSON. If you need a lot more control or want to do XSLT transforms, this is a decent option. In theory it could be considered a little safer because it doesn't require passing arbitrary strings into EVAL which could execute malicious code on the client, but this is debatable.

• Unstructured text: If you just want a single value back, the other two methods can be a bit of overkill.