JSEXT

Server Side Javascript, jsx extension

JSEXT

Some popular Ajax Toolkits

 Some popular Ajax Toolkits

Name	Client/Server	High/Low-level	Comments
Prototype (http://prototypejs.org)	Client	Low	Remodels and extends JavaScript following the Ruby scripting language. Many features for arrays, functions, XHR, DOM and forms.
Scriptaculous (http://script.aculo.us)	Client	High	Special effects, drag and drop, and widgets built on top of prototype.
dojo (http://dojotoolkit.org)	Client	Low-high	Comprehensive set of libraries covering everything from packaging & language features through Ajax to UI widgets.
Yahoo User Interface (YUI) (http://developer.yahoo.com/yui/)	Client	Low-high	Another comprehensive set of libraries covering many aspects of Ajax development.
Ext (http://extjs.com)	Client	High	Widget-based set of user interface components with Ajax support.
sarissa (http://sarissa.sf.net)	Client	Low	Rich library for working with XML, providing cross-browser XPath and XSLT.
Mochikit (http://mochikit.com)	Client	Low-high	General-purpose Ajax and DHTML library, inspired by Python.
jQuery (http://jquery.com)	Client	Low	Small, concise Ajax and DOM helper library.
MooTools (http://mootools.net)	Client	Low-high	Modular library covering everything from core classes to special effects. A promising newcomer.
Ruby on Rails (http://www.rubyonrails.org)	Server	Low-high	Primarily a server-side toolkit, but has first-rate support for Ajax, using Prototype and Scriptaculous. Allows large parts of the client tier to be written on the server, in Ruby.
GWT (http://code.google.com/webtoolkit)	Client	High	Java framework that allows Ajax client tier to be written in Java.
JSF (various vendors)	Server	High	Various JSF vendors have Ajax-enabled some of their components, again allowing some Ajax functionality without hand-writing JavaScript.

 

AJAX - Get Started

The standard way to do Ajax is to use the XMLHttpRequest object, known as XHR by its friends. Use XHR directly, or via one of the helpful Ajax libraries such as Prototype or jQuery. How do we use XHR “by hand”? To start with, we need to get a reference to it:

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

} else if (window.ActiveXObject) {

xhr = new ActiveXObject(“Microsoft.XMLHTTP”);

}

We can then open a connection to a URL:

Specify a callback function to receive the response:

and then send the request:

The server may be busy, or the network may be slow. We don’t want to sit around doing nothing until the response arrives, and because we’ve assigned the callback function, we don’t have to. That’s the five-minute guide for the impatient. For those who like to know the details, we’ve listed the fuller details of the XHR object below.

xhr.open(

“GET”,

“my-dynamic-content.jsp?id=”

+encodeURI(myId),

true

);

xhr.onreadystatechange = function(){

processReqChange(req);

}

xhr.send(null);

 

Method Name	Parameters and Descriptions
open(method, url, async)	open a connection to a URL method = HTTP verb (GET, POST, etc.) url = url to open, may include querystring async = whether to make asynchronous request
onreadystatechange	assign a function object as callback (similar to onclick, onload, etc. in browser event model)
setRequestHeader(namevalue)	add a header to the HTTP request
send(body)	send the request body = string to be used as request body
abort()	stop the XHR from listening for the response
readyState	stage in lifecycle of response (only populated after send() is called)
httpStatus	The HTTP return code (integer, only populated after response reaches the loaded state)
responseText	body of response as a JavaScript string (only set after response reaches the interactive readyState)
responseXML	body of the response as a XML document object (only set after response reaches the interactive readyState)
getResponseHeader(name)	read a response header by name
getAllResponseHeaders()	Get an array of all response header names