Scripts
Ajax Class

Door Martijn Wieringa -30-11-2006 00:00 -5.891 views
Een class om gebruik te maken van AJAX. Dit voorbeeld laad url, en geeft het resultaat terug in het scherm. Merk op dat om beveiligheidsreden je alleen url's mag laden op hetzelfde domein als waar het script draait. Todo: Een scriptje dat het resultaat automatisch parsed naar een 2d array om de gegevens nóg makklijker te kunnen verwerken?!
Download alle bestanden als ZIP
ajax-class
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>AJAX</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript">

			function AjaxObject()
			{
				// Init the HTTPREQUEST
				function funcInitHttpRequest()
				{
					if(window.XMLHttpRequest) // Mozilla, Safari, etc
					{
						try
						{
							oHttpRequest = new XMLHttpRequest();
							if(oHttpRequest.overrideMimeType)
							{
								oHttpRequest.overrideMimeType('text/xml');
							}
						}
						catch(e)
						{
							oHttpRequest = null;
						}
					}
					else if(window.ActiveXObject) // Internet Explorer
					{
						try
						{
							oHttpRequest = new ActiveXObject('Msxml2.XMLHTTP');
						}
						catch(e)
						{
							try
							{
								oHttpRequest = new ActiveXObject('Microsoft.XMLHTTP');
							}
							catch(e)
							{
								oHttpRequest = null;
							}
						}
					}
				}

				// See if AJAX is available
				function funcIsAjaxEnabled()
				{
					if(oHttpRequest == null)
					{
						return false;
					}

					return true;
				}

				// See if an error occured
				function funcIsErrorResponse()
				{
					if(funcIsAjaxEnabled())
					{
						if(oHttpRequest.readyState == 4)
						{
							if((oHttpRequest.status != 200))
							{
								return true;
							}
						}
					}

					return false;
				}

				// See if a valid response was recieved
				function funcIsValidResponse()
				{
					if(funcIsAjaxEnabled())
					{
						if(oHttpRequest.readyState == 4)
						{
							if((oHttpRequest.status == 200))
							{
								return true;
							}
						}
					}

					return false;
				}

				// Return the response as a string
				function funcGetResponseAsText()
				{
					if(funcIsValidResponse()) // A valid responce was recieved.
					{
						return oHttpRequest.responseText;
					}

					return '';
				}

				// Get the current state of the AJAX object
				function funcGetState()
				{
					if(funcIsAjaxEnabled())
					{
						return oHttpRequest.readyState;
					}

					return 0;
				}

				// Get the current status of the AJAX object
				function funcGetStatus()
				{
					if(funcIsAjaxEnabled())
					{
						return oHttpRequest.status;
					}

					return 0; 
				}

				// Try to send a new request (url + return function)
				function funcSendRequest(sUrl, sFunction)
				{
					if(funcIsAjaxEnabled())
					{
						try
						{
							oHttpRequest.onreadystatechange = sFunction;
							oHttpRequest.open('GET', sUrl, true);
							oHttpRequest.send(null);

							return true;
						}
						catch(e)
						{
							alert('Cannot open URL: ' + sUrl);
						}
					}
					else
					{
						alert('AJAX not available.');
					}

					return false;
				}

				// A reference to the HttpRequest object
				var oHttpRequest = null;

				// Define class methods
				this.enabled = funcIsAjaxEnabled;
				this.error = funcIsErrorResponse;
				this.request = funcSendRequest;
				this.response = funcIsValidResponse;
				this.state = funcGetState;
				this.status = funcGetStatus;
				this.text = funcGetResponseAsText;

				// Init oHttpRequest
				funcInitHttpRequest();
			}

			// My function to catch the ajax response
			function catchAjaxResponse()
			{
				if(oAjax.response()) // See if a valid response was returned
				{
					document.getElementById('ajax_result_text').innerHTML = escapeHtml(oAjax.text());
				}
				else if(oAjax.error()) // An error then?
				{
					alert('An error occured while retrieving data. Please ensure that the requested url is valid.');
				}
			}

			// Function to escape HTML chars: &, <, >, "
			function escapeHtml(string)
			{
				string = string.replace(/[&]/g, '&amp;');
				string = string.replace(/[<]/g, '&lt;');
				string = string.replace(/[>]/g, '&gt;');
				string = string.replace(/[\"]/g, '&quot;');

				return string;
			}

			// Function to load a new URL
			function loadUrl()
			{
				var url = document.getElementById('url').value;
				oAjax.request(url, catchAjaxResponse);
			}

			var oAjax = new AjaxObject();

		</script>
	</head>
	<body>

		<p>Laad een URL met AJAX</p>
		<table border="0" cellpadding="5" cellspacing="0"><tr><td align="left" valign="top">Url</td><td align="left" valign="top"><input id="url" name="url" size="60" value="http://"></td><td align="left" valign="top"><input onclick="javascript: loadUrl();" type="button" value="load"></td></tr></table>
		<hr>
		<pre id="ajax_result_text">
			&nbsp;
		</pre>

	</body>
</html>
[/code]