Contents
			========

. JavaScript
. AJAX
. DHTML
. CSS
. XML
. PHP
. HTML


			JavaScript
			==========
			
* All functions in JavaScript are also objects.

<div></div>		- A block element. Starts a new line.
<span></span>	- Embedded in the same line.

document.getElementById('targetId').innerHTML = "some text";
	
	Note:
	The element id can be send to a callback function:
	function displayText(id)
	{
		document.getElementById(id).innerHTML = "some text";		
	}


// The JavaScript escape function will encode data for appending to the end of the URL
var urlReadyText = escape(textField.value);

// The callback will be called after 1/2sec
setTimeout(callback, 500);

	
			AJAX (Asynchronous Java Script And XML)
			====

// A script global object. One per request.
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
	// For Firefox
	XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
	// For IE
	XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}


Request
-------

var dataSource = 'whatever you send to the server';

// GET request (when getting data from the server)
XMLHttpRequestObject.open("GET", dataSource); 
XMLHttpRequestObject.send(null); 


// POST request (when sending data to the server - more secure than GET)
XMLHttpRequestObject.open("POST", url); 
	// as text
XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
	// as XML
XMLHttpRequestObject.setRequestHeader('Content-Type', 'text/xml'); 
XMLHttpRequestObject.send(dataSource); 


// HEAD request (headers)
XMLHttpRequestObject.open("HEAD", dataSource); 
XMLHttpRequestObject.send(null); 


Response
--------

// For text content
var textDocument = XMLHttpRequestObject.responseText;

// For XML content
var xmlDocument = XMLHttpRequestObject.responseXML;
var options = xmlDocument.getElementsByTagName('option');
var selectControl = document.getElementById('optionList');
for (var i = 0; i < options.length; i++ )
{
	selectControl.options[i] = new Option(options[i].firstChild.data);
}

// HEAD response
	// All headers
var headers = XMLHttpRequestObject.getAllResponseHeaders(); 
	// Last modified data (etc)
XMLHttpRequestObject.getResponseHeader("Last-Modified");


Does a URL Exist
----------------
* Could be used to check whether the server is down

XMLHttpRequestObject.onreadystatechange = function() 
{ 
	if (XMLHttpRequestObject.readyState == 4) { 
		if (XMLHttpRequestObject.status == 200) { 
			// Exists
		} 
		else if (XMLHttpRequestObject.status == 404) {
			// URL does not exist
		}
	} 
} 


Returning JavaScript From Server
--------------------------------
eval(XMLHttpRequestObject.responseText);


Returning JavaScript Object
---------------------------
// var text = XMLHttpRequestObject.responseText;
var text = "{method: 'adder', operand1: 2, operand2: 3};";
var jSObject;
eval('jSObject = ' + text); 
eval(jSObject.method + '(' + jSObject.operand1 + ',' + jSObject.operand2 + ');');


Calling Different Domain
------------------------
Q: When called by the client browser, causes a warning message to pop-up.
A: Call it from your server, and return the results to the client.


Debugging
---------
Install GreaseMonkey and XMLHttpRequest debugger script.


Turning Off Caching
-------------------

In the HTML header:

	header("Cache-Control", "no-cache");
	header("Pragma", "no-cache");
	header("Expires", "-1");

Alter the URL the application is requesting from the server:

	var myUrl = "data.php?name=steve" + "&t=" + new Date().getTime();


			DHTML
			=====

// Makes the event browser independant (Firefox/IE)
// Call it at the beginning of every function that handles mouse events
function MouseEvent(e) 
{
	if(e) {
		this.e = e; 
	} else {
		this.e = window.event; 
	}
	if(e.pageX) {
		this.x = e.pageX; 
	} else {
		this.x = e.clientX; 
	}
	if(e.pageY) {
		this.y = e.pageY; 
	} else {
		this.y = e.clientY; 
	}
	if(e.target) {
		this.target = e.target; 
	} else {
		this.target = e.srcElement;
	}
}


// Adds a listener. Browser independant (Firefox/IE)
function addListener(type, callback) 
{
	if (document.addEventListener) {
		document.addEventListener(type, callback, false);
	} else if (document.attachEvent) {
		document.attachEvent("on" + type, callback, false);
	}
}

// Removes a listener. Browser independant (Firefox/IE)
function removeListener (type, callback) 
{
	if (document.removeEventListener) {
		document.removeEventListener(type, callback, false);
	} else if (document.detachEvent) {
		document.detachEvent("on" + type, callback, false);
	}
}


			CSS (Cascading Style Sheets)
			===

<style type="text/css">
#idname {
	z-index:200;
}
* Use a high z-index to make sure the element stays visible on top of other elements.

// Changes the targer object color
var obj = document.getElementById("targetDiv"); 
obj.style.color = "#FF0000";
style = "background-color: rgb(0, 255, 0)"

// Relative VS absolute positioning
style = "position:absolute; left:200; top:90; z-index:200"
style = "position:relative; top:-5"


			XML
			===
			
* Checking to make sure an XML document was created correctly by the server-side software is a useful thing to do in Ajax applications.
	DTD (Document Type Definition) and XML schema are two ways to validate XML. Both of them supported by Java 1.4 and above.

Property 			What It Finds
--------------------------------------------
attributes 			Attributes by this node
childNodes 			Array of child nodes
documentElement 	The document element
firstChild 			First child node
lastChild 			Last child node
localName 			Local name of the node
name 				Name of the node
nextSibling 		Next sibling node
nodeName 			Name of the node
nodeType 			Node type
nodeValue 			Value of the node
previousSibling 	Previous sibling node


// Shows the response XML in an alert box
alert(XMLHttpRequestObject.responseXML.xml);


// Removes the white spaces from the XML
// In Firefox, this function should be called prior to parsing the XML
function removeWhitespace(xml) 
{
	var loopIndex;
	for (loopIndex = 0; loopIndex < xml.childNodes.length; 
	loopIndex++) {
		var currentNode = xml.childNodes[loopIndex];
		if (currentNode.nodeType == 1) {
			removeWhitespace(currentNode);
		}
		if (((/^\s+$/.test(currentNode.nodeValue))) &&   
				(currentNode.nodeType == 3)) {
			xml.removeChild(xml.childNodes[loopIndex--]);
		}
	}
}


// Get an array of all the first names wrapped by the <first_name></first_name> tags
var firstNameNodes = xml.getElementsByTagName("first_name");
var firstName = firstnamenodes[1].firstChild.nodeValue;

// Get the attendance attribute
var attributes = personNode.attributes
var attendancePerson = attributes.getNamedItem("attendance");
var attendance = attendancePerson.nodeValue;


			PHP
			===

// Building and sending an XML back to the browser
<?
header('Content-Type: text/xml');
$data = array('This', 'is', 'XML.');
echo '<?xml version="1.0" ?>';
echo '<document>';
foreach ($data as $value)
{
	echo '<data>';
	echo $value;
	echo '</data>';
}
echo '</document>';
?>

// The XML output from the previous code
<?xml version="1.0" ?>
<document>
  <data>This</data>
  <data>is</data>
  <data>XML.</data>
</document>


// Sending request to a PHP server using "scheme"
// AJAX (client)
...
var url = "options2.php?scheme=" + scheme;
...
// PHP (server)
<?
if(isset($_GET["scheme"])){
	header("Content-type: text/xml");
	if ($_GET["scheme"] == "1")
	$options = array('red', 'green', 'blue');
	if ($_GET["scheme"] == "2")
	$options = array('black', 'white', 'orange');
	echo '<?xml version="1.0"?>';
	echo '<options>';
	foreach ($options as $value)
	{
		echo '<option>';
		echo $value;
		echo '</option>';
	}
	echo '</options>';
}
?>


			HTML
			====
		
HTML Form
---------

<html>
  <head>
  </head>
  <body>
    <form method="post" action="phptext.php">
      Enter your nickname: 
	  <input type="text" name="nickname">

	  <input type="checkbox" name="Status" value="Single">

	  <input name="radios" type="RADIO" value="Yes"> Yes
	  <input name="radios" type="RADIO" value="No"> No

      <input type="submit" value="Submit">
    </form>
  </body>
</html>


Input Elements
--------------
<input id="searchtext" type="text" size="20" value="slipknot" onKeyUp="ifEnter(event, 'searchbutton');" />			
<input id="searchbutton" type="button" value="Search" onClick="executeSearch()" />