simpleajaxexample.js

Introduce AJAX, can learn more thing.

var itemList, itemQuantityDisplay, progressDisplay;

function itemList_OnChange(){
    if (!itemList.value) {
        itemQuantityDisplay.style.display = "none";
    }
    
    var xr = new XMLHttpRequest();
    xr.open("GET", "WarehouseService.asmx/GetItemQuantity?itemID=" + itemList.value, true);
    xr.onreadystatechange = function() {
        if (xr.readyState == 4) {
            if (xr.status == 200) {
                var doc = xr.responseXML;
                var qty;
                
                if (doc.evaluate) {
                    qty = doc.evaluate("//text()", doc,
                                null,
                                XPathResult.STRING_TYPE, null).stringValue;
                }
                else {
                   qty = doc.selectSingleNode("//text()").data;
                }
                
                itemQuantityDisplay.innerHTML = qty + " in stock";
                itemQuantityDisplay.className = "";
            } else {
                itemQuantityDisplay.innerHTML = "Error retrieving quantity";
                itemQuantityDisplay.className = "Error";
            }
        
            itemQuantityDisplay.style.display = "";
            progressDisplay.style.display = "none";
        }
    }
    xr.send(null);
    progressDisplay.style.display = "";
    itemQuantityDisplay.style.display = "none";
}

window.onload = function() {
    itemList = document.getElementById("ItemList");
    itemQuantityDisplay = document.getElementById("ItemQuantityDisplay");
    progressDisplay = document.getElementById("ProgressDisplay");

    if (!window.XMLHttpRequest){
        window.XMLHttpRequest = function(){
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }    
    
    if (itemList.attachEvent) {
        itemList.attachEvent("onchange", itemList_OnChange);
    }
    else {
        itemList.addEventListener("change", itemList_OnChange, false);
    }
}