ajaxcallobject.js

一个较小的采购系统,一些比较实际的代码,可以用来参考

			this.CreateTracingWindow();
			this.TraceSentData(theData);		
		}

		if( this.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0 )
		{
			if ( ! ajaxCallType || ajaxCallType.toLowerCase() != "sync")
			{
				// Asynchronous
				this.XmlHttp.open("POST", thePage, true);
				this.XmlHttp.onreadystatechange = function(){ oThis.ReadyStateChange(); };
				this.XmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
				this.XmlHttp.send(theData);
			}
			else
			{
				// Synchronous
				// Use a timeout so that the screen refreshes before getting stack waiting the AjaxCall.
				window.setTimeout(
					function()
					{
						oThis.XmlHttp.open("POST", thePage, false);
						oThis.XmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
						oThis.XmlHttp.send(theData);

						if( oThis.XmlHttp.status == 200 && oThis.XmlHttp.statusText == "OK" )
							oThis.OnComplete(oThis.XmlHttp.responseText, oThis.XmlHttp.responseXML);
						else
							oThis.OnError(oThis.XmlHttp.status, oThis.XmlHttp.statusText, oThis.XmlHttp.responseText);
					}, 1);
			}			
		}
	}
	return true;
}

AjaxCallObject.prototype.OnLoading = function()
{
  // Loading
}

AjaxCallObject.prototype.OnLoaded = function()
{
  // Loaded
}

AjaxCallObject.prototype.OnInteractive = function()
{
  // Interactive
}

AjaxCallObject.prototype.OnComplete = function(responseText, responseXml)
{
	if (__bTracing)
	{
		this.TraceReceivedData(responseText);		
	}

	if (waitElement)		
		waitElement.style.visibility = 'hidden'; 

	// Checking if the data were fully loaded, without being aborted
	var flag = "'AJAX_LOADING_OK';";
	if (responseText.substr(responseText.length - flag.length) != flag)
		return false;

	eval(responseText);
	
	// Remove validators whose controltovalidate have been removed
	if (typeof(Page_Validators)!="undefined")
	{
	    for (i=0; i<Page_Validators.length; i++)
	    {
	        if (Page_Validators[i] && Page_Validators[i].controltovalidate
	            && document.getElementById(Page_Validators[i].controltovalidate)==null)
	        {
	            Page_Validators.splice(i,1);
	            i--;
	        }
	    }
	}

	return true;
}

AjaxCallObject.prototype.OnAbort = function()
{
	if (__bTracing)
	{
		this.WriteTrace("<b>!!! AjaxCall was aborted !!!</b>");
		this.CloseTrace();
	}

	if (waitElement)		
		waitElement.style.visibility = 'hidden'; 	
}

AjaxCallObject.prototype.OnError = function(status, statusText, responseText)
{
	if (status==200)
	{
		// a weird bug of Opera sometimes invokes OnError when there's no error
		this.OnComplete(responseText);
		return;
	}

	if (__bTracing)
	{
		this.WriteTrace("<b>!!! Server reported an Error !!!</b>");
		this.CloseTrace();
	}

	if (waitElement)
		waitElement.style.visibility = 'hidden';

	document.close();	// for IE
	document.write(responseText);
	document.close();	// for Firefox
}

AjaxCallObject.prototype.ReadyStateChange = function()
{
  if( this.XmlHttp.readyState == 1 )
  {
    this.OnLoading();
  }
  else if( this.XmlHttp.readyState == 2 )
  {
    this.OnLoaded();
  }
  else if( this.XmlHttp.readyState == 3 )
  {
    this.OnInteractive();
  }
  else if( this.XmlHttp.readyState == 4 )
  {
    if( this.XmlHttp.status == 0 )
      this.OnAbort();
    else if( this.XmlHttp.status == 200 )
      this.OnComplete(this.XmlHttp.responseText, this.XmlHttp.responseXML);
    else
      this.OnError(this.XmlHttp.status, this.XmlHttp.statusText, this.XmlHttp.responseText);   

	// Remove this AJAXCbo from the list
	for (var i=0; i < __AJAXCboList.length; i++)
		if (__AJAXCboList[i] == this)
		{
			__AJAXCboList[i].XmlHttp = null;
			__AJAXCboList.splice(i, 1);
			break;
		}
  }
}

AjaxCallObject.prototype.TraceWindow = null;

AjaxCallObject.prototype.SetIntervalForAjaxCall = function(milliSec)
{
	if (__ClockID != 0)
		this.ClearIntervalForAjaxCall();
	__ClockID = window.setInterval("AJAXCbo.DoAjaxCall('__AJAX_AJAXCALLTIMER','','async')", milliSec);
}

AjaxCallObject.prototype.ClearIntervalForAjaxCall = function()
{
	window.clearInterval(__ClockID);
	__ClockID = 0;
}

AjaxCallObject.prototype.CreateTracingWindow = function()
{
	for (var i=0; i < __TraceWindows.length; i++)
	{
		if (__TraceWindows[i].closed)
		{
			__TraceWindows.splice(i, 1);
			i--;
		}		
	}

	this.TraceWindow = null;
	for (var i=0; i < __TraceWindows.length; i++)
	{
		if (__TraceWindows[i].TraceFinished)
		{
			this.TraceWindow = __TraceWindows[i];
		}		
	}
	
	if (this.TraceWindow == null)
	{
		this.TraceWindow = window.open("","_blank","location=no,resizable=yes,scrollbars=yes");
		__TraceWindows.push(this.TraceWindow);
	}
	this.TraceWindow.TraceFinished = false;
}

AjaxCallObject.prototype.ClearTracingWindows = function()
{
	for (var i=0; i < __TraceWindows.length; i++)
	{
		__TraceWindows[i].close();
		__TraceWindows.splice(i, 1);
		i--;
	}
}

AjaxCallObject.prototype.TraceSentData = function(data)
{
	this.WriteTrace("<b>Ajax Call invoked at " + new Date().toLocaleTimeString() + "<br>");
	if (__bPageIsStored)
		this.WriteTrace("Page Store Mode: Stored (Session or Cache)<br>");
	else
		this.WriteTrace("Page Store Mode: NoStore<br>");
	this.WriteTrace("Form Data sent to server (" + data.length + " characters):<br>");
	this.WriteTrace("------------------------------</b><br>");

	var fields = data.split("&");
	for (var i=0; i < fields.length; i++)
	{
		var parts = fields[i].split("=");
		this.WriteTrace("<b>" + parts[0] + "=</b>");
		this.WriteTrace(this.EncodeTraceData(parts[1]) + "<br>");
	}
		
	this.WriteTrace("<b>------------------------------</b><br>");
	this.WriteTrace("Waiting response from server.....<br>");
}

AjaxCallObject.prototype.TraceReceivedData = function(data)
{
	this.WriteTrace("<b>Server responsed at " + new Date().toLocaleTimeString() + "<br>");
	this.WriteTrace("Javascript code received from server (" + data.length + " characters):<br>");
	this.WriteTrace("------------------------------</b><br>");
	this.WriteTrace(this.EncodeTraceData(data) + "<br>");
	this.WriteTrace("<b>------------------------------</b><br>");
	this.CloseTrace();
}

AjaxCallObject.prototype.WriteTrace = function(text)
{
	this.TraceWindow.document.write(text);
}

AjaxCallObject.prototype.CloseTrace = function()
{
	this.TraceWindow.document.close();
	this.TraceWindow.TraceFinished = true;
}

AjaxCallObject.prototype.EncodeTraceData = function(data)
{
	return data.split("<").join("&lt;").split(" ").join("&nbsp;").split("\n").join("<br>");
}

AjaxCallObject.prototype.EncodePostData = function(data)
{
	return data.split("%").join("%25").split("=").join("%3d").split("&").join("%26").split("+").join("%2b");
}

AjaxCallObject.prototype.SetAttributesOfControl = function(clientID, attributes)
{
	var place = document.getElementById(clientID);
	if (place != null && attributes != "")
	{
		var attribs = attributes.split("|");
		for (var i=0; i < attribs.length; i++)
		{
			var parts = attribs[i].split("=");
			place.setAttribute(parts[0], parts[1])
		}
	}
}

AjaxCallObject.prototype.AddElement = function(parentID, tagName, elementID, html, beforeElemID)
{
	var place = document.getElementById(parentID);
	var child = (elementID != "") ? document.getElementById(elementID) : null;
	if (place != null && child == null)
	{
		child = document.createElement(tagName);
		child.id = elementID;
		var before = (beforeElemID != null) ? document.getElementById(beforeElemID) : null;
		place.insertBefore(child, before);
		child.innerHTML = html;
	}
	else
		this.SetHtmlOfElement(html, elementID);
}

AjaxCallObject.prototype.AddScript = function(scriptText, scriptAttributes)
{
	var scriptHolder = document.createElement('script');
	scriptHolder.text = scriptText;

	if (scriptAttributes != null)
		for (i=0; i < scriptAttributes.length; i+=2)
			scriptHolder.setAttribute(scriptAttributes[i], scriptAttributes[i+1]);

	__PageForm.appendChild(scriptHolder);
}

AjaxCallObject.prototype.AddHiddenField = function(elementName, elementValue)
{
	var hiddenField = document.createElement('input');
	hiddenField.type = "hidden";
	hiddenField.name = elementName;
	hiddenField.id = elementName;
	hiddenField.value = elementValue;
	
	__PageForm.appendChild(hiddenField);
}

AjaxCallObject.prototype.RemoveElement = function(parentID, elementID)
{
	var place = document.getElementById(parentID);
	var child = document.getElementById(elementID);
	if (place != null && child != null)
		place.removeChild(child);
}

AjaxCallObject.prototype.SetField = function(fieldName, fieldValue)
{
	var field;
	if (__PageForm)
		field = __PageForm[fieldName];
	else
		field = document.all[fieldName];

	if (field != null)
		field.value = fieldValue;
}

AjaxCallObject.prototype.AddHeaderElement = function(tagName, innerText, attributes)
{	
	switch (tagName)
	{
		case "link": 
			var link = document.getElementsByTagName("head")[0].appendChild(document.createElement("link"));
			for (i=0; i < attributes.length; i+=2)
				link.setAttribute(attributes[i], attributes[i+1]);
			break;
		case "title":
			document.title = innerText;
			break;
		case "style":
			if (document.styleSheets && innerText != null)
			{
				// based on http://www.bobbyvandersluis.com/articles/dynamicCSS.php
				if (document.styleSheets.length == 0)
				{
					//no stylesheets yet, so create empty one
					var head = document.getElementsByTagName("head")[0];
					var style = document.createElement("style");
					style.type = "text/css";
					head.appendChild(style);
				}

				//add style rule to last stylesheet (forces proper cascading)
				var lastStyle = document.styleSheets[document.styleSheets.length - 1];
				var ieNewRule = typeof lastStyle.addRule == "object";
				var ffNewRule = typeof lastStyle.insertRule == "function";
				if (ieNewRule || ffNewRule)
				{
					var splitRules = innerText.split('}');
					for (i=0; i<splitRules.length-1; i++)
					{
						if (ffNewRule)
						{
							//Mozilla
							lastStyle.insertRule(splitRules[i] + "}", lastStyle.cssRules.length);
						}
						else
						{
							//IE
							var splitNameValue = splitRules[i].split('{');
							lastStyle.addRule(splitNameValue[0], splitNameValue[1]);
						}
					}
				}
			}
			break;
	}
}

AjaxCallObject.prototype.SetFieldIfEmpty = function(fieldName, fieldValue)
{
	var field;
	if (__PageForm)
		field = __PageForm[fieldName];
	else
		field = document.all[fieldName];
	
	if (field != null && field.value == '')
		field.value = fieldValue;
}

AjaxCallObject.prototype.SetHtmlOfElement = function(html, elementID)
{
	var place = document.getElementById(elementID);
	if (place != null)
		place.innerHTML=html;
}

AjaxCallObject.prototype.SetHtmlOfPage = function(html)
{
	document.close();	// for IE
	document.write(html);
	document.close();	// for Firefox
}

AjaxCallObject.prototype.SetVisibilityOfElement = function(elementID, visible)
{
	var place = document.getElementById(elementID);
	if (place != null)
		place.style.display = (visible) ? "" : "none";
}

AjaxCallObject.prototype.Alert = function(message)
{
	window.alert(message);
}

// It's used by AjaxPanel
AjaxCallObject.prototype.ExtendedSetHtmlOfElement = function(html, elementID)
{
	var place=document.getElementById(elementID);
	if (place != null)
	{
		var store = document.createElement(place.tagName);
		store.innerHTML = html;
		var markers = store.getElementsByTagName("span");
		for (var i=markers.length-1; i >= 0; i--)
		{
			var elem = markers[i];
			if (elem.getAttribute("name") == "__ajaxmark")
			{
				var elemOnPage = document.getElementById(elem.id);
				if (elemOnPage != null)
					elem.parentNode.replaceChild(elemOnPage, elem);
			}
		}
		
		if ("mergeAttributes" in store)
		{
			store.mergeAttributes(place, false);
		}
		else
		{
			for (var i=place.attributes.length-1; i >= 0; i--)
			{
				var attr = place.attributes[i];
				store.setAttribute(attr.name, attr.value);
			}
		}
		
		if (__IsIE)
			place.parentNode.replaceChild(store, place);
	    else
		{
			//Netscape/Firefox has a problem using replaceChild when replaced child contains a table
			place.parentNode.insertBefore(store, place);
			place.parentNode.removeChild(place);
		}
		
		place = null; //cleanup
	}
}

var AJAXCbo = new AjaxCallObject();

// wait element 
CreateWaitElement();
if (window.addEventListener) {
	window.addEventListener('scroll', MoveWaitElement, false);
	window.addEventListener('resize', MoveWaitElement, false);
}
else if (window.attachEvent) {
	window.attachEvent('onscroll', MoveWaitElement);
	window.attachEvent('onresize', MoveWaitElement);
}
var waitElement;
var scrollX, scrollY = -1;
function MoveWaitElement() {
	var scrollYT, scrollXT;
	if (!waitElement)
		CreateWaitElement();
	if (typeof(window.pageYOffset) == "number") { 
		scrollYT = window.pageYOffset; 
		scrollXT = window.pageXOffset; 
	} 
	else if (document.body && document.documentElement && document.documentElement.scrollTop) { 
		scrollYT = document.documentElement.scrollTop; 
		scrollXT = document.body.scrollLeft;
	}
	else if (document.body && typeof(document.body.scrollTop) == "number") { 
		scrollYT = document.body.scrollTop; 
		scrollXT = document.body.scrollLeft; 
	} 
	if (scrollX != scrollXT || scrollY != scrollYT) {
		scrollX = scrollXT;
		scrollY = scrollYT;
		var width = document.body.clientWidth;
		waitElement.style.top = scrollYT + "px";
		waitElement.style.right = -scrollXT +  "px";
	}
}
function CreateWaitElement() {
    var elem = document.getElementById('__AjaxCall_Wait');
    if (!elem) {
        elem = document.createElement("div");
        elem.id = '__AjaxCall_Wait';
        elem.style.position = 'absolute';
        elem.style.height = 17;
        elem.style.paddingLeft = "3px";
        elem.style.paddingRight = "3px";
        elem.style.fontSize = "11px";
        elem.style.fontFamily = 'Arial, Verdana, Tahoma';
        elem.style.border = "#000000 1px solid";
        elem.style.backgroundColor = "DimGray";
        elem.style.color = "#ffffff";
        elem.innerHTML = 'Loading ...';
        elem.style.visibility = 'hidden';
        document.body.insertBefore(elem, document.body.firstChild);
    }
    waitElement = elem;
}
// end wait element