Ajax: Asynchronous JavaScript and XML 
by Eric J. Bruno

Listing One

if (window.addEventListener)
{
    window.addEventListener("load", init, false);
}
else if (window.attachEvent)
{
    window.attachEvent("onload", init);
}
else
{
    window.onload = init;
}
function init()
{
    DWREngine.setErrorHandler(function(message) { alert(message); });
    DWREngine.setWarningHandler(function(message) { alert(message); });
    DWRUtil.useLoadingMessage();
    update();
}


Listing Two

<p>Choose magazine:
  <select id="maglist" 
          onclick="populateYearList();" 
          style="vertical-align:top;"> </select></p>
<p>Choose year:
  <select id="yearlist" 
          onclick="populateMonthList();" 
          style="vertical-align:top;"> </select></p>
<p>Choose month:
  <select id="monthlist" 
          onclick="populateArticleList();" 
          style="vertical-align:top;"> </select></p>
<p>Choose article to read:
  <select id="articlelist" 
          onclick="displayArticle();" 
          style="vertical-align:top;"> </select></p>
<p>Article contents:
  <br><TEXTAREA name="articletext" 
                id="articletext" 
                rows="40" cols="81"> </TEXTAREA></p>


Listing Three

function populateYearList()
{
    <!-- onYearData will be called with the data -->
    MagViewer.getPublicationYears(onYearData, maglist.value);
}
<!-- This is an Ajax callback method -->
function onYearData(data)
{
    DWRUtil.removeAllOptions("yearlist");
    DWRUtil.addOptions("yearlist", data);
}
function populateMonthList()
{
    <!-- onMonthData will be called with the data -->
    MagViewer.getYearTopics(onMonthData, maglist.value, yearlist.value);
}
<!-- This is an Ajax callback method -->
function onMonthData(data)
{
    DWRUtil.removeAllOptions("monthlist");
    DWRUtil.addOptions("monthlist", data);
}
function populateArticleList()
{
    <!-- onArticleData will be called with the data -->
    var month = 99;
    for ( var intLoop = 0; intLoop < monthlist.length; intLoop++)
    {
        if ( monthlist[intLoop].selected )
            month = intLoop;
    }
    MagViewer.getIssueDetails(onArticleList, maglist.value,
                              yearlist.value, month);
}
<!-- This is an Ajax callback method -->
function onArticleList(data)
{
    DWRUtil.removeAllOptions("articlelist");
    DWRUtil.addOptions("articlelist", data);
}
function displayArticle()
{
    var month = 99;
    for ( var intLoop = 0; intLoop < monthlist.length; intLoop++)
    {
        if ( monthlist[intLoop].selected )
            month = intLoop;
    }
    var article = 99;
    for ( var intLoop = 0; intLoop < articlelist.length; intLoop++)
    {
        if ( articlelist[intLoop].selected )
            article = intLoop;
    }
    MagViewer.getArticle(onArticleData, maglist.value, 
                         yearlist.value, month, article);
}
<!-- This is an Ajax callback method -->
function onArticleData(data)
{
    articletext.value = data;
}


2


