Greg Extreme - AJAX Thoughts, Suggestions and Examples Part II

General Windows

Error installing .NET Framework
VPN Setup with Microsoft CMAK

Windows Server 2003

ASP.NET on 64 bit version

Web Programming

AJAX Thoughts and Suggestions I
AJAX Thoughts and Suggestions II
AJAX Thoughts and Suggestions III

AJAX Thoughts, Suggestions and Examples Part II

Suggestion: Create a ajax.js file which will contain classes of which instances can be created. This serves a few benefits including code reusability, saved network bandwidth due to reused code, request queueing and allowing multiple connections. An viable implementation would be to have two classes, a request class and a queue class. By creating a new instance of the queue class, a queue is created in which requests can be added. As a request or requests are added to the queue, they are processed synchronously in order. To process multiple requests at the same time, multiple queues can be created and requests added to them as appropriate. Here is an example, note this is currently used to connect to Microsoft IIS, it however should work for other web servers:

function AJAXRequest() {
    this.url = null;
    this.data = null;
    this.callback = null;
    this.callerror = null;
    
    var headerNames = new Array();
    var headerValues = new Array();
    
    this.addHeader = function(name, value) {
        headerNames.push(name);
        headerValues.push(value);
    }
    
    this.getHeaderNames = function() {
        return headerNames;
    }
    
    this.getHeaderValues = function() {
        return headerValues;
    }
}

function AJAXQueue() {
    var queue = new Array();
    var pointer = 0;
    var req = null;
    var running = false;
    var time = null;
    var nextID = 0;
       
    var currentRequest = new AJAXRequest();
        
    this.isRunning = function() {
        if (pointer + 1 < queue.length) {
            return running;
        } else {
            return false;
        }
    }
    
    this.add = function(request) {
        if (request && request.url && request.data) {
            var id = nextID++;
            queue[id] = request;
            if (!running) {next();}
            return id;
        }
        return -1;
    }
    
    function next() {
        running = false;
        if (pointer < nextID) {
            var request = queue[pointer];
            delete queue[pointer];
            pointer++;
            if (request) {
                loadXMLDoc(request);
            } else {
                next();
            }
        } 
        
    }
    
    function loadXMLDoc(request) {
        time = (new Date()).getTime();
        running = true;
        currentRequest = request;
	    req = false;
	    
        if(window.XMLHttpRequest) {
    	    try {
			    req = new XMLHttpRequest();
            } catch(e) {
			    req = false;
            }
        } else if(window.ActiveXObject) {
       	    try {
        	    req = new ActiveXObject("Msxml2.XMLHTTP60");
      	    } catch(e) {
        	    try {
        	        try {
        	            req = new ActiveXObject("Msxml2.XMLHTTP");
          		    } catch (e) {
          		        req = new ActiveXObject("Microsoft.XMLHTTP");
          		    }
        	    } catch(e) {
          		    req = false;
        	    }
		    }
        }
	    if(req) {
		    req.onreadystatechange = readystatechange;
		    var headerNames = currentRequest.getHeaderNames();
		    var headerValues = currentRequest.getHeaderValues();
		    req.open("POST", currentRequest.url, true);
		    for (var iii=0;iii<headerNames.length;iii++) {
		        req.setRequestHeader(headerNames[iii],headerValues[iii]);
		    }
		    req.send(currentRequest.data);
	    }
    }
    
    function readystatechange() {
        if (req.readyState == 4) {
            time = (new Date()).getTime() - time;
            if (req.status == 200) {
                var x
                if (!req.responseXML.firstChild) {
                    x = new ActiveXObject("Msxml2.DOMDocument")
                    x.loadXML(req.responseText)
                } else {
                    x=req.responseXML
                }
                if (currentRequest.callback) {currentRequest.callback(pointer,x,req.responseText,time,currentRequest);}
                next();
            } else {
                var x
                if (!req.responseXML.firstChild) {
                    x = new ActiveXObject("Msxml2.DOMDocument")
                    x.loadXML(req.responseText)
                } else {
                    x=req.responseXML
                }
                if (currentRequest.callerror) {currentRequest.callerror(pointer,x,req.responseText,time,currentRequest);}
                next();
            }
        }
    }
}

This function can also be used for code reusability.

Now we just need to instantiate our classes and make a request. This can now be done by a few lines of code. Below is an example. The first function makes the request. The second function is called back from our AJAXQueue after the reply from the web server has been returned.

Explore more in AJAX Thoughts, Suggestions and Examples Part III here

Go Back to Part I here

Copyright 2024, Greg Thums, not for unauthorized reproduction