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

AJAX is generally the interchange, the runner if you like, of data between client-side and server-side, and of course visa-versa.

The advance of AJAX has come hand in hand with the rise of Open Source, the "Social" Web and a rapidly expanding network of developers both amateur and professional. This in turn has sparked the development of many JavaScript Frameworks (jQuery, Prototype, Mootools, Glow etc) which essentially remove, or at least mask very well, those "nuances" you mentioned.

AJAX isn't simply a client-side script interacting with a server-side script, though. XHTML and CSS for presentation, the Document Object Model for dynamic display of and interaction with data, XML and XSLT (and more recently, JSON) for the interchange, and manipulation and display, of data, respectively, the XMLHttpRequest object for asynchronous communication and then finally JavaScript to bring these technologies together (wikipedia).

AJAX/JavaScript isn't the only client side solution, other established solutions such as Java and Flash for example still have their place. But JavaScript is, for the best part, widely support by all modern browsers, and indeed the JavaScript Engines of these browsers is rapidly picking up speed, opening up many more possibilities for seamless interaction between the front-end and the back-end.

Hope I didn't waffle too much, you asked ;)

Answer 2

JavaScript alternative VbScript ( if I have to name one and beware it is MS technology and works only with IE ), But practically speaking JavaScript is universally accepted solution for client side scripting.

For Ajax Please refer below SO discussions :

• ajax-books-and-tutorial
• ajax-tutorial
• ajax-and-asp-net-tutorials

Answer 3

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.

Answer 4

Is JavaScript the only option for client-side scripting that will support server-side communication? If not what are the alternatives.

Yes, Javascript is what you will use. While there may be other options availabe such as VBScript, you will want to use Javascript because it is the most widely adopted.

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)?

That's exactly correct. Web services or generic handlers serve up the necessary data in either JSON or XML format, both of which can easily be processed with Javascript.

In my opinion, the thing about AJAX that slips up most ASP.NET web form developers is the asynchronous aspect.

Answer 5

All the current answers are good but they neglect one point. AJAX is not a script or language or technology as such, you cannot write something 'in' AJAX. AJAX is just a bundling term.

This is from Wikipedia:

Like DHTML and LAMP, AJAX is not a technology in itself, but a group of technologies. AJAX uses a combination of:

• HTML and CSS for marking up and styling information.
• The DOM accessed with JavaScript to dynamically display and interact with the information presented.
• A method for exchanging data asynchronously between browser and server, thereby avoiding page reloads. The XMLHttpRequest (XHR) object is usually used, but sometimes an IFrame object or a dynamically added tag is used instead.
• A format for the data sent to the browser. Common formats include XML, pre-formatted HTML, plain text, and JavaScript Object Notation (JSON). This data could be created dynamically by some form of server-side scripting.