topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

professional-ria-04-HelloWorldv6.htm / htm



  <!--
  Sixth version of HelloWorld.html
     
  This version adds:
    - handleCountryChange includes Call to xml based php
      script for the asynchronous request.
    - helloCallback includes handling of XML encoded response to
      asynchronous request.
    - Sender label.
  -->
  <html>
    <head>
      <script type="text/javascript">
        var xmlRequest = new XMLHttpRequest();
  
        function handleCountryChange() {
          var countryValue = document.getElementById("country").value;
          var uri = "helloResponsev2.php?country=" + countryValue;
          xmlRequest.open("GET", uri, true);
          xmlRequest.onreadystatechange = helloCallback;
          xmlRequest.send(null);
        }
  
        function helloCallback() {
          if (xmlRequest.readyState == 4) {
            var messageL = document.getElementById("messageLabel")
            var senderL = document.getElementById("senderLabel")        
            if (xmlRequest.status == 200) {
              var responseDoc = xmlRequest.responseXML;
          
              var messageElt = responseDoc.getElementsByTagName("message")[0];
              var messageTxt = messageElt.childNodes[0].nodeValue;
              messageL.innerHTML = messageTxt;
          
              var senderElt = responseDoc.getElementsByTagName("sender")[0];
              var senderTxt = senderElt.childNodes[0].nodeValue +
              " says ";
              senderL.innerHTML = senderTxt;
            } else {
              messageL.innerHTML = "Page Not Found"
            }
          }
        }
      </script>
    </head>
    <body>
      <form id="helloForm"><label>Say Hello: </label>
        <select id="country" onkeyup="handleCountryChange()" 
          onchange="handleCountryChange()">
          <option>France</option>
          <option>Germany</option>
          <option>Spain</option>
          <option>USA</option>
        </select>
      </form>
      <p/>
      <label id="senderLabel"></label>
      <label id="messageLabel" style="border: thin solid"></label>
    </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(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.