topical media & game development

talk show tell print

professional-ajax-02-XMLHttp-Examples-XMLHttpExample2.htm / htm



  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  
  <html>
  <head>
      <title>XMLHttp Example 2</title>
      <script type="text/javascript"src="zxml.js"></script>
      <script type="text/javascript">
          
          function sendRequest() {
              var oForm = document.forms[0];
              var sBody = getRequestBody(oForm);
          
              var oXmlHttp = zXmlHttp.createRequest();
              oXmlHttp.open("post", oForm.action, true);
              oXmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
              
              oXmlHttp.onreadystatechange = function () {
                  if (oXmlHttp.readyState == 4) {
                      if (oXmlHttp.status == 200) {
                          saveResult(oXmlHttp.responseText);
                      } else {
                          saveResult("An error occurred: " + oXmlHttp.statusText);
                      }
                  }            
              };
              oXmlHttp.send(sBody);        
          }
          
          function getRequestBody(oForm) {
              var aParams = new Array();
              
              for (var i=0 ; i < oForm.elements.length; i++) {
                  var sParam = encodeURIComponent(oForm.elements[i].name);
                  sParam += "=";
                  sParam += encodeURIComponent(oForm.elements[i].value);
                  aParams.push(sParam);
              } 
              
              return aParams.join("&");        
          }
          
          function saveResult(sMessage) {
              var divStatus = document.getElementById("divStatus");
              divStatus.innerHTML = "Request completed: " + sMessage;            
          }
  
      </script>
  </head>
  <body>
      <form method="post" action=<SaveCustomer.php> onsubmit="sendRequest(); return false">
      <p>Enter customer information to be saved:</p>
      <p>Customer Name: <input type="text" name="txtName" value="" /><br />
      Address: <input type="text" name="txtAddress" value="" /><br />
      City: <input type="text" name="txtCity" value="" /><br />
      State: <input type="text" name="txtState" value="" /><br />
      Zip Code: <input type="text" name="txtZipCode" value="" /><br />
      Phone: <input type="text" name="txtPhone" value="" /><br />
      E-mail: <input type="text" name="txtEmail" value="" /></p>
      <p><input type="submit" value="Save Customer Info" /></p>
      </form>
      <div id="divStatus"></div>
  </body>
  </html>
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.