Step-by-step guide

1. Down this simple ajax demo
2. unzip it the netbeans folder being careful to preserve paths within the archive
3. Open the project in netbeans - it is called simpleAjaxApp
4. In the project browser (left pane) expand the project and Web Pages folders
5. Open the file called index.jsp
6. At line 22 note the value of the id attribute of the <div> element
7. At line 23 note the value of the id attribute of the <select> element, 
   1. also note the javascript function that is being called when onlick event is triggered - you will find this function in the myajax.js file, open it
8. You should have the file myajax.js open!  Look at line 8: The function populateStateFromJS() calls another function called populateStateWithHardCodes()
9. Goto to line 11: there is function called populateStateWithHardCodes(), this is what it does
   1. it creates a variable called html and places into it the literal html text that you can see

      1. "<select>\n\
               <option value=\"NJ\">NJ</option>\n\
               <option value=\"NY\">NY</option>\n\
         </select>"

   2. do you remember the ids we told you to note down above ("state" and "stateDummy")?  Using javascript it manipulates those html elements.  Firstly by hiding the html element whose id was "stateDummy" and then overwrites the actual html that was present for the element whose id was "state".  
   3. So 
      1. <div id="state" style="display:none"></div>
   4. Is changed to

      1. "<select>\n\
               <option value=\"NJ\">NJ</option>\n\
               <option value=\"NY\">NY</option>\n\
         </select>"

   5. It then completes by making the <div> visible
10. So function populateStateWithHardCodes() demonstrates how to manipulate the contents of a web page through what is called the DOM (Document Object Model).  This is pretty much what javascript is doing and can be used to do.
11. We need to make a small change the the file to see this function execute, copy the function name at line 11: populateStateWithHardCodes() and overwrite the called function at line 8:
    1. so line 8: should now read populateStateWithHardCodes();
12. To see this execute, right click on the simpleAjaxApp icon/text in the netbeans project browser and select "Run".  Netbeans will start and application server and web server, deploy the application to the webserver and bring up the default web browser for your machine with the web page whose URL is http://localhost:8080/simpleAjaxApp.  This may take a minute or two the first time you run this stuff...
13. On the web page you will see a drop down box "Click to select the State", click it and the options that were in the html above will apear.  No magic here, except that the code changed the html on the fly!!!

...