Ajax Continued

Example

In this example we have a webpage that displays the most recent videos added to our website. We want to allow the user to select a category from a drop down list and view the videos under that category.

There are a few preliminaries that we need to discuss before we look at how to do this with my ajax library. First, we will need a drop down list that displays the names of the categories having the value attributes set to the category id from our database. Second, we need to create a page that accepts a posted guid (cateogry id) and returns an xml serialized document of a list of videos based on that category.

Our ajax code will send a request along with the category id to our page "GetVideosByCateogryId.aspx". Next we will need to capture this xml using
the responseXML property and parse it using DOM to dynamically display a new grid
of videos. Note: I am using the querystring library to construct the post data.

Code

<script type="text/javascript" 
        language="javascript" 
        src="codeapedia.ajax.js" >
</script>
<script type="text/javascript" 
        language="javascript" 
        src="codeapedia.queryString.js" >
</script>

<script type="text/javascript" language="javascript" >
    var req = new webRequest();
    req.method = "POST";
    req.async = true;
    req.url = "GetVideosByCategoryId.aspx";
    req.onError = function() {
       // do something...
       
       // write code to dynamically display or

       // dynamically create an ajax not supported 
       // panel or

       // degrade gracefully and redirect to a
       // ajax independent page 
    }
    req.create();
    var ajax = new xmlHttp(req);
    ajax.postData = new querystring();
    ajax.postData.add(
            "categoryId",
            "{3F2504E0-4F89-11D3-9A0C-0305E82C3301}"
    );
    ajax.onError = function(e) {
       // do something...
       
       // dynamically display an error message
    }
    ajax.onPreRequestComplete = function(sender) {
       // do something...
       
       // dynamically load an animated gif
       // that lets the user know that the
       // request is being sent and the data
       // is loading 
    }
    ajax.onRequestComplete = function(sender) {
       if(sender.status == 200)
       {
          // do something...
          
          // parse out the xml of the videos
          // returned and dynamically display
          // the information using sender.responseXML 
          
       }
       else
       {
          // do something...
       }
    }
    ajax.getResponse();
</script>

If you have not yet seen the querystring library, click here to view codeapedia.querystring.js