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!!!

Now you have basic understanding of what javascript does and how it manipulates the DOM we will see how ajax makes use of the DOM and and set of API calls to fetch some data from a remote and inject this data into the DOM

1. You should still have the myajax.js file open in netbeans, type ctrl-z, this should undo the change at line 8:
   1. so line 8: should now read populateStateWithAjax();
   2. as it did when you first opened the file
2. Goto line 26: there is a function called populateStateWithAjax().  You will see the following statement at line 28:
   1. var url = "populateState.jsp"
3. So this would point to a web page or a service on a webserver somewhere that is capable of generating some html, XML or JSON, unlike the function populateStateWithHardCodes() that has html values hard coded into it
4. Lines 29 to 40: create a javascript object of type Request that makes a XHTMLHTTPRequest (not HTTP) called "get" on the server for the resource populateState.jsp.  If you examine that page (it can be found in the project browser, you will see that it contains a simple set of html instructions

   1. <select>
            <option vale="WM">West Midlands</option>
            <option vale="GM">Greater Manchester</option>
            <option vale="WS">Wiltshire</option> 
      </select>

5. The javascript Request object has an event handler associated with it called "onSuccess" that invokes an (anonymous) function whose body can be seen from lines 33 to 38:
6. Notice that lines 34, 35, 36 and 37 replicate lines 13, 17, 18 and 19 respectively
7. So essentially ajax is capable of fetching remote html or data in XML or JSON format and injecting into a web page on a browser by manipulating the DOM
8. Execute the page by right clicking on simpleAjaxApp in the project tree and selecting "Run", when the page comes up select "Click to select a State"
   1. if you get the same options as before, from within netbeans, right lick on the project simpleAjaxApp and select "Deploy", wait till you see it has been in deployed in the messages window, then refresh the browser window
9. You should notice that the back button in your browser is still disabled after you have selected "Click to select State" (remember clicking this will make a call to the server which under normal circumstances would cause the back button to be activated (bread crumbs)), why is it still disabled?

Related articles

• Page:
  3 - Ajax at work