Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
      #Name
      {
        width: 10em;
      }
      #Message
      {
        height: 73px;
        width: 421px;
      }
      #mainTitle
      {
        font-family: Verdana;
        font-size: larger;
        color: #800000;
      }
      .formTable {
        width: 70%;
      }
      td
      {
        font-family: Verdana;
      }
    </style>
</head>

<script language="javascript" type="text/javascript">
// <!CDATA[
var xhr;
var xmldom;


function CreateXMLDOM() {
    try //Internet Explorer
      {
      xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
      }
    catch(e)
      {
      try //Firefox, Mozilla, Opera, etc.
      {
        xmlDoc=document.implementation.createDocument("","",null);
      }
      catch(e) {
        alert(e.message);
        return null;
      }
    }
      return xmlDoc;
}


function CreateXHR() {
  var xmlHttp;
  try {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
  }
  catch (e) {
    // Internet Explorer
    try {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      try {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e) {
        alert("Your browser does not support AJAX!");
        return false;
      }
    }
  }
  return xmlHttp;
}

function init() {
  xhr = CreateXHR();
  xhr.onreadystatechange = ProcessXML;
  xhr.open("GET", "messages.xml", true);
  xhr.send(null);
}

function ProcessXML() {
  if (xhr.readyState == 4) {
    xmldom = xhr.responseXML;
  }
}

function ProcessResponse() { // wait for async transfer to finish
  if (xhr.readyState == 4) {
    var text = xhr.responseText;
    if (text.indexOf("OK") == 0) { //all is well - clear message form
      document.getElementById("Name").value = "";
      document.getElementById("Message").value = "";
    } else { //flag error
      alert(text); // text contains error message
    }
  }
}

function WriteXML() { // async write XML DOM to named XML file
    xhr.onreadystatechange = ProcessResponse;
    xhr.open("POST", "set.php", true);

   // var data = "foo=bar&data=hello world";
    var data = xmldom;
   // alert(data);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Content-length", data.length);
    xhr.setRequestHeader("Connection", "close");
    xhr.send(data);
}

function SaveMessage() { // add new <message> tag to XML DOM
  var messagesTag = xmldom.getElementsByTagName("messages")[0];
  var messages = xmldom.getElementsByTagName("message");
  var newMessageNode = messages[0].cloneNode(true);  // deep clone of first message
  newMessageNode.getElementsByTagName("user")[0].firstChild.nodeValue = document.getElementById("Name").value;
  // changing value of CDATA node, one level deeper in the XML DOM
  newMessageNode.getElementsByTagName("text")[0].childNodes[1].nodeValue = document.getElementById("Message").value;
  newMessageNode.getElementsByTagName("date")[0].firstChild.nodeValue = new Date();
  messagesTag.appendChild(newMessageNode);  // append new message node to messages
}

function UpdateButton_onclick() { // click event handler
  SaveMessage();
  WriteXML();
  return false; // don't submit form data
}

// ]]>
</script>
<body onload="init();">

  <p id="mainTitle">
    Send and Save Message</p>

  <table align="left" cellpadding="4" class="formTable">
    <tr>
      <td>
        User Name:</td>
      <td>
        <input id="Name" type="text" value="mrbig" /></td>
    </tr>
    <tr>
      <td valign="top">
        Message:</td>
      <td>
        <textarea id="Message" cols="50" name="S1" rows="3">The message text
appears here.</textarea></td>
    </tr>
    <tr>
      <td>&nbsp;
        </td>
      <td>
        <input id="UpdateButton" type="submit" value="Update" onclick="return UpdateButton_onclick()" /></td>
    </tr>
  </table>
<div id="mymessages"></div>
</body>
</html>