Sunday, April 23, 2006

AJAX Getting Started

Let’s begin

Creating a request object is different depending on the users browser version. The code below checks for browsers and uses the proper request.


Next we create the AJAX request and how we want to handle the response. The sendRequest() function below will send a HTTP GET request to the server for the XML document. The handleResponse() function checks to see if the request is finished and if so returns the response.

AJAX readyState Status Codes:

0 - uninitialized 1 - loading 2 - loaded 3 - interactive 4 - complete



var req = createXMLHttpRequest();

The following can be your connect function


function AJAXRequest( method, url, data, process, async, dosend) {
// self = this; creates a pointer to the current function
// the pointer will be used to create a "closure". A closure
// allows a subordinate function to contain an object reference to the
// calling function. We can't just use "this" because in our anonymous
// function later, "this" will refer to the object that calls the function
// during runtime, not the AJAXRequest function that is declaring the function
// clear as mud, right?
// Java this ain't

var self = this;

// check the dom to see if this is IE or not
if (window.XMLHttpRequest) {
// Not IE
self.AJAX = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// Hello IE!
// Instantiate the latest MS ActiveX Objects
if (_ms_XMLHttpRequest_ActiveX) {
self.AJAX = new ActiveXObject(_ms_XMLHttpRequest_ActiveX);
} else {
// loops through the various versions of XMLHTTP to ensure we're using the latest
var versions = ["Msxml2.XMLHTTP.7.0", "Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
"Microsoft.XMLHTTP"];

for (var i = 0; i < versions.length ; i++) {
try {
// try to create the object
// if it doesn't work, we'll try again
// if it does work, we'll save a reference to the proper one to speed up future instantiations
self.AJAX = new ActiveXObject(versions[i]);

if (self.AJAX) {
_ms_XMLHttpRequest_ActiveX = versions[i];
break;
}
}
catch (objException) {
// trap; try next one
} ;
}

;
}
}

// if no callback process is specified, then assing a default which executes the code returned by the server
if (typeof process == 'undefined' || process == null) {
process = executeReturn;
}

self.process = process;

// create an anonymous function to log state changes
self.AJAX.onreadystatechange = function( ) {
//logger("AJAXRequest Handler: State = " + self.AJAX.readyState);
self.process(self.AJAX);
}

// if no method specified, then default to POST
if (!method) {
method = "POST";
}

method = method.toUpperCase();

if (typeof async == 'undefined' || async == null) {
async = true;
}

logger("----------------------------------------------------------------------");
logger("AJAX Request: " + ((async) ? "Async" : "Sync") + " " + method + ": URL: " + url + ", Data: " + data);

self.AJAX.open(method, url, async);

if (method == "POST") {
self.AJAX.setRequestHeader("Connection", "close");
self.AJAX.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
self.AJAX.setRequestHeader("Method", "POST " + url + "HTTP/1.1");
}

// if dosend is true or undefined, send the request
// only fails is dosend is false
// you'd do this to set special request headers
if ( dosend || typeof dosend == 'undefined' ) {
if ( !data ) data="";
self.AJAX.send(data);
}
return self.AJAX;
}






function sendRequest(id) {
}

function handleResponse() {

if(req.readyState == 4){
var response = req.responseText;

}

alert("loading" + req.readyState);

}


On to the HTML

Now we need to link to the javascript sendRequest() function.

No comments: