国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

                        -- This file is part of the End-to-End Ajax development article in                        -- the IBM developerWorks. This file contains a simple DB script to                        -- create a database and populate it with the data.                        --                        -- Last Modified: May/10/2007                        --                        -- To execute the following statements in MySQL, do the following steps.                        -- 1) Start MySQL command line client.                        -- 2) Enter your MySQL admin password.                        -- 3) Type the following line by substituting <YOUR_SQL_FILE_DIR> with the                        --    directory name where the file is stored.                        --    source <YOUR_SQL_FILE_DIR>\bankdb.sql                        --                        -- Table structure for table ‘BankDB‘                        --                        DROP DATABASE BankDB;                        CREATE DATABASE BankDB;                        USE BankDB;                        CREATE TABLE account (                        AccountHolderName VARCHAR(20) NOT NULL,                        AccountNumber INTEGER NOT NULL,                        CheckingBalance DOUBLE NOT NULL,                        StockName VARCHAR(6),                        StockQuantity INTEGER,                        StockValue DOUBLE,                        PRIMARY KEY(AccountHolderName, AccountNumber)                        );                        --                        -- Populating data for table ‘a(chǎn)ccount‘                        --                        insert into ACCOUNT values (‘Frodo‘, 435245, 2344.45, ‘GOOG‘, 100, 3453.32);                        insert into ACCOUNT values (‘Sam‘, 928462, 7583.32, ‘CSCO‘, 200, 5323.43);                        insert into ACCOUNT values (‘Pippin‘, 234233, 3444.62, ‘INTC‘, 300, 4213.76);                        insert into ACCOUNT values (‘Merry‘, 642445, 1005.32, ‘MSFT‘, 250, 1353.32);                        insert into ACCOUNT values (‘Aragorn‘, 972321, 6424.24, ‘HPQ‘, 525, 12043.94);                        insert into ACCOUNT values (‘Gandalf‘, 432134, 5392.23, ‘IBM‘, 400, 10043.78);                        insert into ACCOUNT values (‘Legolas‘, 590134, 4313.82, ‘DELL‘, 325, 5926.62);                        

$link = mysqli_connect("hostname", "user", "password", "dbname");                        

$result = mysqli_close($link);                        

$stateCapital = $row[‘capital‘];                        

$nationalPark = $row->park;                        

                        <?php                        /*                        ============================================================                        Project: End-to-End-Ajax application development                        Purpose: This is an example scenario to be used in                        an IBM developerWorks article.                        Last modified: May/11/2007.                        This PHP module provides the core bank teller logic                        required to access the customer related data from the                        database. These functions can be called by other PHP                        modules present in the Bank scenario. All the logic                        involved in bank teller actions are divided into these                        three core functions.                        a) Get all account information                        b) Process Transaction (deposit or debit)                        c) Compute stock portfolio value                        It uses direct mysqli functions to access the database as                        opposed to the PHP PDO functions.                        ============================================================                        */                        // These globals will be used to hold the following values:                        // 1) $link is for storing the database connection object.                        // 2) $dbResult is for storing the db query result object.                        // 3) $finalResult is an associative array where the results                        //    from individual bank teller actions are packaged and                        //    returned to the caller.                        global $link, $dbResult, $finalResult;                        /*                        ============================================================                        Function: connect_to_db                        Last modified: May/11/2007.                        This function connects to the BankDB MySQL database.                        If the connection attempt is successful, it stores the                        connection object in a global scoped variable and                        returns true.                        If the connection attempt is not successful, then it                        returns false.                        ============================================================                        */                        function connect_to_db() {                        // We will use these global scoped variables here.                        global $link, $dbResult, $finalResult;                        // Initialize the variables.                        $link = null;                        $dbResult = null;                        $finalResult = null;                        // Do a mysqli connect to the local BankDB database using                        // proper credentials.                        $link = mysqli_connect("localhost", "root", "webtech", "bankdb");                        // Check if DB connection worked.                        if (mysqli_connect_errno()) {                        // It looks like there is some problem.                        // Get the MySQL error number and the error string.                        $resultMsg = "DB connection error: " . mysqli_connect_errno() .                        " [" . mysqli_connect_error() . "]";                        // Store the results in an associative array.                        // Set the result of the operation as not a successful one.                        $finalResult["ResultCode"] = 1;                        // Set the result message.                        $finalResult["ResultMsg"] = $resultMsg;                        // Return false to indicate the DB connection failure.                        return (false);                        } else {                        // DB connection is good.                        return(true);                        } // End of if (mysqli_connect_errno())                        } // End of function connect_to_db                        /*                        ============================================================                        Function: close_connection_to_db                        Last modified: May/11/2007.                        This function closes the connection made earlier to the                        BankDB database.                        ============================================================                        */                        function close_connection_to_db() {                        // We will use these globally scoped variables.                        global $link, $dbResult;                        // Close the connection if we have an active                        // DB connection object.                        if ($link != null) {                        if (($dbResult != null) && (is_object($dbResult))) {                        // If the DB result contains query data object, free it now.                        mysqli_free_result($dbResult);                        $dbResult = null;                        } // End of if ($dbResult != null)                        // Time to close the DB connection.                        mysqli_close($link);                        // Set the connection object variable to null.                        $link = null;                        } // End of if ($link != null)                        } // End of function close_connection_to_db                        /*                        ============================================================                        Function: getAllAccountInformation                        Last modified: May/11/2007.                        This function reads all the account information stored in                        the BankDB and returns them in an associative array.                        ============================================================                        */                        function getAllAccountInformation() {                        // We will use these globally scoped variables.                        global $link, $finalResult, $dbResult;                        // Get a connection to the BankDB.                        $result = connect_to_db();                        // If db connection failed, return now.                        if ($result == false) {                        return ($finalResult);                        } // End of if ($result == false)                        // Make an SQL statement to query all rows in the account table.                        $queryStr = "Select * from account";                        // Make the SQL query.                        $dbResult = mysqli_query($link, $queryStr);                        // Process if there are any query errors.                        if (mysqli_errno($link)) {                        // Close the connection first.                        close_connection_to_db();                        // Set the error message in the final result assoc. array.                        $resultMsg = "DB read error: " . mysqli_errno($link) .                        " [" . mysqli_error($link) . "]";                        // Set the application specific return code as FAILURE.                        $finalResult["ResultCode"] = 1;                        $finalResult["ResultMsg"] = $resultMsg;                        // Return the final result.                        return ($finalResult);                        } // End of if (mysqli_errno($link))                        // Get the number of rows queried.                        $rowCount = mysqli_num_rows($dbResult);                        // If the database is empty, return now.                        if ($rowCount <= 0) {                        // Close the connection first.                        close_connection_to_db();                        // Set the return code and return message.                        $finalResult["ResultCode"] = 1;                        $finalResult["ResultMsg"] = "No accounts were found in BankDB.";                        // Return the final result.                        return ($finalResult);                        } // End of if ($rowCount <= 0)                        // Set the counter to 0.                        $cnt = 0;                        // Create an array to hold all the fields from each row.                        $accountInfo = array();                        // From the query result set, fetch data fields from each row.                        while($row = mysqli_fetch_assoc($dbResult)) {                        // Initialize it to null.                        $data = null;                        // Create an associative array on the fly and store the                        // individual data fields read from the current database row.                        $data["AccountHolderName"] = $row["AccountHolderName"];                        $data["AccountNumber"] = $row["AccountNumber"];                        $data["CheckingBalance"] = doubleval($row["CheckingBalance"]);                        $data["StockName"] = $row["StockName"];                        $data["StockQuantity"] = intval($row["StockQuantity"]);                        $data["StockValue"] = doubleval($row["StockValue"]);                        // Now, store the entire associative array in to a regular array.                        $accountInfo[$cnt++] = $data;                        } // End of while($row = mysqli_fetch_assoc($dbResult))                        // We finished reading all the account information from the database.                        // Set the final result code as success.                        $finalResult["ResultCode"] = 0;                        // Set the final result message as success.                        $finalResult["ResultMsg"] = "ReadAllAccountsInfoFromDB successful";                        // Make the entire array holding all the account information into the                        // final result associative array.                        // $finalResult is an associative array containing an                        // regular array which in turn contains several associative arrays as                        // its elements.                        $finalResult["AccountInfo"] = $accountInfo;                        // Close the DB connection.                        close_connection_to_db();                        // Return the final result array now.                        return($finalResult);                        } // End of function getAllAccountInformation                        /*                        ============================================================                        Function: accountTransaction                        Last modified: May/11/2007.                        This function performs the bank teller account transaction.                        This function takes the account holder name, an amount and                        the transaction type as function parameter.                        The transaction type is 1 for deposit into checking account.                        The transaction type is 2 for debit from a checking account.                        After the transaction is done, it returns the snapshot of                        the account before this transaction and another snapshot of                        the account after this transaction.                        ============================================================                        */                        function accountTransaction($accountHolderName, $amount, $transactionType) {                        // We will use these globally scoped variables.                        global $link, $finalResult, $dbResult;                        // Get a database connection.                        $result = connect_to_db();                        // If the connection failed, return now.                        if ($result == false) {                        return ($finalResult);                        } // End of if ($result == false)                        // Make an SQL statement to read a particular account data for a                        // given account holder name.                        $queryStr = "Select * from account where AccountHolderName=‘$accountHolderName‘";                        // Perform the SQL query.                        $dbResult = mysqli_query($link, $queryStr);                        // Did you encounter a DB error?                        if (mysqli_errno($link)) {                        // Close the connection now.                        close_connection_to_db();                        // Set the DB error message.                        $resultMsg = "DB read error: " . mysqli_errno($link) .                        " [" . mysqli_error($link) . "]";                        // Set the application-specific result code.                        $finalResult["ResultCode"] = 1;                        // Set the result message.                        $finalResult["ResultMsg"] = $resultMsg;                        // Return the associative array with the error result.                        return ($finalResult);                        } // End of if (mysqli_errno($link))                        // How many rows were read from the DB?                        $rowCount = mysqli_num_rows($dbResult);                        // If no rows are obtained from DB, return now.                        if ($rowCount <= 0) {                        // Close the connection now.                        close_connection_to_db();                        // Setup the return value as not a successful one.                        $finalResult["ResultCode"] = 1;                        $finalResult["ResultMsg"] = "No accounts were found in BankDB.";                        // Return the final result.                        return ($finalResult);                        } // End of if ($rowCount <= 0)                        // Store a record with the current checking balance.                        // Create an array to hold the pre-transaction and                        // post-transaction account snapshots.                        $accountInfo = array();                        // Fetch the query result as an associative array.                        $row = mysqli_fetch_assoc($dbResult);                        $data = null;                        // Record the filed values from the database row into                        // a new associative array.                        $data["AccountHolderName"] = $row["AccountHolderName"];                        $data["AccountNumber"] = $row["AccountNumber"];                        $data["PreviousCheckingBalance"] = doubleVal($row["CheckingBalance"]);                        $data["StockName"] = $row["StockName"];                        $data["StockQuantity"] = intval($row["StockQuantity"]);                        $data["StockValue"] = doubleVal($row["StockValue"]);                        // Store the pre-transaction account snapshot into a regular array.                        $accountInfo[0] = $data;                        // Initialize the variables.                        $newBalance = 0.0;                        // Since we are doing a transaction that changes the                        // checking balance, we need to update the DB later.                        $updateDB = true;                        if ($transactionType == 1) {                        // It is deposit.                        // Ensure that user wants to deposit an amount greater than 0.                        if ($amount > 0) {                        $newBalance = doubleval($data["PreviousCheckingBalance"]) + $amount;                        } else {                        // Deposit amount is 0. There is no need to do a database update.                        $updateDB = false;                        $newBalance = doubleval($data["PreviousCheckingBalance"]);                        } // End of if ($amount > 0)                        } else if ($transactionType == 2) {                        // It is debit.                        // Ensure that the user wants to debit an amount greater than 0 and                        // the amount is less than the money available in the checking account.                        if (($amount > 0) &&                        ($amount < doubleval($data["PreviousCheckingBalance"]))) {                        $newBalance = doubleval($data["PreviousCheckingBalance"]) - $amount;                        } else {                        // Debit amount is either 0 or it is bigger than a allowed value.                        $updateDB = false;                        $newBalance = doubleval($data["PreviousCheckingBalance"]);                        }                        } // End of if ($transactionType == 1)                        // Bank teller transaction is completed now.                        // Life is good. Send the result back.                        $finalResult["ResultCode"] = 0;                        $finalResult["ResultMsg"] = "AccountTransaction successful.";                        // If we modified the current checking balance because of a                        // deposited or debited amount, then update the database.                        if ($updateDB == true) {                        // Prepare an SQL Update statement.                        $updateStr = "update account set CheckingBalance=$newBalance " .                        "where AccountHolderName=‘$accountHolderName‘";                        // Execute the update query.                        $dbResult = mysqli_query($link, $updateStr);                        // See if there are any DB errors?                        if (mysqli_errno($link)) {                        // Close the connection to the database.                        close_connection_to_db();                        // Prepare the error message to be returned.                        $resultMsg = "DB write error: " . mysqli_errno($link) .                        " [" . mysqli_error($link) . "]";                        $finalResult["ResultCode"] = 1;                        $finalResult["ResultMsg"] = $resultMsg;                        // Return the error message.                        return ($finalResult);                        }                        if ($dbResult == true) {                        // All fine.                        // Prepare to send back the result of this operation.                        $finalResult["ResultCode"] = 0;                        $finalResult["ResultMsg"] =                        "New balance for $accountHolderName has been stored in DB.";                        } else {                        $finalResult["ResultCode"] = 1;                        $finalResult["ResultMsg"] =                        "New balance for $accountHolderName could not be stored in DB.";                        // Return the final result that has an error.                        return($finalResult);                        } // End of if ($dbResult == true)                        } // End of if ($updateDB == true)                        // We already stored the pre-transaction account snapshot in an                        // array at the top of this function.                        // Store a second record that will have the updated checking balance.                        $data = null;                        $data["AccountHolderName"] = $row["AccountHolderName"];                        $data["TransactionAmount"] = $amount;                        $data["AccountNumber"] = $row["AccountNumber"];                        $data["NewCheckingBalance"] = $newBalance;                        $data["StockName"] = $row["StockName"];                        $data["StockQuantity"] = intval($row["StockQuantity"]);                        $data["StockValue"] = doubleval($row["StockValue"]);                        $accountInfo[1] = $data;                        $finalResult["AccountInfo"] = $accountInfo;                        // Close the DB connection.                        close_connection_to_db();                        // Return the final result.                        return($finalResult);                        } // End of function accountTransaction.                        /*                        ============================================================                        Function: portfolioValue                        Last modified: May/11/2007.                        This function stores the current portfolio value of a                        given account holder to the database. It takes the                        account holder name and the current stock price as input                        arguments. It reads the currently held position (in the                        Bank scenario, every account holder owns only a single                        company‘s stock. It is done to make the task simpler.)                        and computes the current market value. Then it updates                        the database with the new total stock value.                        ============================================================                        */                        function portfolioValue($accountHolderName, $stockPrice) {                        // We will use the globally scoped variables.                        global $link, $finalResult, $dbResult;                        // Connect to the MySQL BankDB database.                        $result = connect_to_db();                        // If error in connecting to the DB, return now.                        if ($result == false) {                        return ($finalResult);                        } // End of if ($result == false)                        // Prepare the query string to get account info for a given account holder.                        $queryStr = "Select * from account where AccountHolderName=‘$accountHolderName‘";                        // Execute the MySQL query.                        $dbResult = mysqli_query($link, $queryStr);                        // Are there any errors?                        if (mysqli_errno($link)) {                        // Error there. Close the db connection.                        close_connection_to_db();                        // Prepare error message to be returned.                        $resultMsg = "DB read error: " . mysqli_errno($link) .                        " [" . mysqli_error($link) . "]";                        $finalResult["ResultCode"] = 1;                        $finalResult["ResultMsg"] = $resultMsg;                        // Return the error.                        return ($finalResult);                        } // End of if (mysqli_errno($link))                        // Did we read any rows from the DB?                        $rowCount = mysqli_num_rows($dbResult);                        // If there are no matching rows in DB, return now.                        if ($rowCount <= 0) {                        // Close the DB connection.                        close_connection_to_db();                        $finalResult["ResultCode"] = 1;                        $finalResult["ResultMsg"] = "No accounts were found in BankDB.";                        // Return the final result.                        return ($finalResult);                        } // End of if ($rowCount <= 0)                        // Store a record with the current portfolio value.                        // Allocate an array to store the pre-transaction and the                        // post-transaction account snapshots.                        $accountInfo = array();                        // Do a database fetch to get the results as an associative array.                        $row = mysqli_fetch_assoc($dbResult);                        // Store the data fields of a row to an associative array.                        $data = null;                        $data["AccountHolderName"] = $row["AccountHolderName"];                        $data["AccountNumber"] = $row["AccountNumber"];                        $data["CheckingBalance"] = doubleval($row["CheckingBalance"]);                        $data["StockName"] = $row["StockName"];                        $data["StockQuantity"] = intval($row["StockQuantity"]);                        $data["PreviousPortfolioValue"] = doubleval($row["StockValue"]);                        // Store the associative array in a regular array.                        $accountInfo[0] = $data;                        // Calculate the portfolio value.                        $finalResult["ResultCode"] = 0;                        $finalResult["ResultMsg"] = "PortfolioValue successfully calculated.";                        $newPortfolioValue = intval($row["StockQuantity"]) * doubleval($stockPrice);                        // Since the stock portfolio value has changed, update it in DB.                        $updateStr = "update account set StockValue=$newPortfolioValue " .                        "where AccountHolderName=‘$accountHolderName‘";                        // Perform an SQL update.                        $dbResult = mysqli_query($link, $updateStr);                        // Check if there are any DB errors.                        if (mysqli_errno($link)) {                        // Close the connection to DB.                        close_connection_to_db();                        // Prepare the error message to returned.                        $resultMsg = "DB write error: " . mysqli_errno($link) .                        " [" . mysqli_error($link) . "]";                        $finalResult["ResultCode"] = 1;                        $finalResult["ResultMsg"] = $resultMsg;                        // Return the error message.                        return ($finalResult);                        } // End of if (mysqli_errno($link))                        if ($dbResult == true) {                        // All fine.                        // Prepare the success message to be returned.                        $finalResult["ResultCode"] = 0;                        $finalResult["ResultMsg"] =                        "New stock value for $accountHolderName has been stored in DB.";                        } else {                        $finalResult["ResultCode"] = 1;                        $finalResult["ResultMsg"] =                        "New stock value for $accountHolderName could not be stored in DB.";                        // Update failed. Hence return the error result.                        return($finalResult);                        } // End of else in if ($dbResult == true)                        // Store a second record that will have the updated portfolio value.                        // We have already stored the pre-transaction account snapshot in an array.                        // Let us store the post-transaction account snapshot also there.                        $data = null;                        $data["AccountHolderName"] = $row["AccountHolderName"];                        $data["AccountNumber"] = $row["AccountNumber"];                        $data["CheckingBalance"] = doubleval($row["CheckingBalance"]);                        $data["StockName"] = $row["StockName"];                        $data["CurrentStockPrice"] = doubleval($stockPrice);                        $data["StockQuantity"] = intval($row["StockQuantity"]);                        $data["NewPortfolioValue"] = $newPortfolioValue;                        // Store the associative array in a regular array.                        $accountInfo[1] = $data;                        $finalResult["AccountInfo"] = $accountInfo;                        // Close the DB connection and return the result.                        close_connection_to_db();                        return($finalResult);                        } // End of function portfolioValue.                        ?>                        

                        body {                        color: maroon;                        font-size: medium;                        text-align: center;                        background:green;                        }                        

                        <!--                        ============================================================                        Project: End-to-End-Ajax application development                        Purpose: This is an example scenario to be used in                        an IBM developerWorks article.                        Last modified: May/12/2007.                        This HTML file provides the required user-interface elements                        for the bank teller browser application. This is a                        single-page based Ajax browser application. It simply                        means that this application doesn‘t do any page fetches                        at all from the server other than the initial download                        of this single HTML file.                        This file liberally makes use of <DIV>, <SPAN> and                        <TABLE> tags to do some of the well-known Ajax tricks.                        It is a self-contained file that contains all the                        HTML markup required by the bank teller application.                        ============================================================                        -->                        <!DOCTYPE HTML PUBLIC                        "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">                        <html>                        <!--                        HTML document header describes the various properties of the document including                        its title and relationship with other documents such as CSS and JavaScript files.                        In the Bank Teller single-page application, the following documents will be used:                        1) json.js (It is an open-source JSON parser developed by Douglas Crockford.                        2) xhr.js (It is a generic utility that provides XHR related functions.                        3) BankTeller.js (All the client-side logic in this JavaScript file)                        4) BankTeller.css (All the styling needed for the browser application is here)                        -->                        <head>                        <title>Ajax Bank Teller Application</title>                        <script language"JavaScript" type="text/javascript" src="json.js"></script>                        <script language"JavaScript" type="text/javascript" src="xhr.js"></script>                        <script language"JavaScript" type="text/javascript" src="BankTeller.js"></script>                        <link rel="stylesheet" style="text/css" href="BankTeller.css" media="all" />                        </head>                        <!--                        Set an event handler to initialize the application-specific stuff.                        This event handler will be triggered during page load time.                        In this event handler, initial screen for the bank teller application will be                        set and the other screens will be hidden.                        -->                        <body onload="initOnPageLoad();">                        <!--                        This application has seven different sections that are divided                        using the <DIV> elements. Those sections are:                        1) Main section                        2) Teller Options (Menu) section                        3) Deposit section                        4) Debit section                        5) Stock portfolio section                        6) Bank teller action result section                        7) Page footer section                        All these sections will be shown selectively depending the application                        context where the user is in at a given time. This is done in the                        client side logic coded in JavaScript. This technique provides the                        dynamism and rich response to user actions. It elevates the user                        experience level drastically as compared to the traditional Web applications                        developed using the click and wait page refresh model.                        -->                        <!--                        The following the main DIV container for the entire application.                        All the other sections are children of this. They all hang on to                        this DIV container node in DOM.                        -->                        <div id="mainPage"                        title="This is an Ajax based single-page browser application.                        No browser Back button please. HTML download from server occurs ONLY ONCE.                        From then on, back-end server is contacted asynchronously ONLY                        for data exchanges.">                        <h1 title="This web application provides Bank teller services.">                        Bank Teller Operations                        </h1>                        <!--                        The tellerOptions DIV element holds the table that will provide the                        user with available teller options to select from. This container                        holds the menu choices for the entire bank teller application.                        -->                        <div id="tellerOptions" title="You can perform these teller operations.">                        <center><font color="Olive">                        <u>Click an operation below</u>                        </font></center>                        <!--                        Each menu option is a HTML text that is embedded within a                        SPAN tag. That will enable us to set the mouseover and mouseout                        events for that text element. We can combine those events with                        CSS styling to emulate a desktop-like menu behavior. When the user                        clicks on that menu, then the corresponding application logic can be                        performed.                        These different menu option are laid out inside a TABLE tag                        as individual rows.                        -->                        <table class="tellerOptionsTable" align="center">                        <tr>                        <!--                        Note that we are using class attribute in span to style                        the td value so that we can dynamically assign style classes                        (in JavaScript) as the user moves the mouse over different                        teller operation names. If we use the id attribute to                        CSS style, we can‘t dynamically assign styles in JavaScript.                        -->                        <!--                        The event handler functions are called with a                        function parameter that indicates the menu option number.                        i.e. 1, 2 or 3.                        -->                        <!-- Deposit menu option -->                        <td>                        <span id="tellerOptionsLink1" class="tellerOptionsLink"                        title="Deposit to an account."                        onmouseover="changeOptionsLinkStyleForSelection(1);"                        onmouseout="changeOptionsLinkStyleToDefault(1);"                        onclick="processTellerOperation(1);">                        1) Deposit to an account                        </span>                        </td>                        </tr>                        <tr>                        <!-- Debit menu option -->                        <td>                        <span id="tellerOptionsLink2" class="tellerOptionsLink"                        title="Debit from an account."                        onmouseover="changeOptionsLinkStyleForSelection(2);"                        onmouseout="changeOptionsLinkStyleToDefault(2);"                        onclick="processTellerOperation(2);">                        2) Debit from an account                        </span>                        </td>                        </tr>                        <tr>                        <!-- Get stock portfolio value menu option -->                        <td>                        <span id="tellerOptionsLink3" class="tellerOptionsLink"                        title="Get Stock portfolio value."                        onmouseover="changeOptionsLinkStyleForSelection(3);"                        onmouseout="changeOptionsLinkStyleToDefault(3);"                        onclick="processTellerOperation(3);">                        3) Current portfolio value                        </span>                        </td>                        </tr>                        </table>                        </div> <!-- End of <div id="tellerOptions"> -->                        <!--                        The tellerOptions DIV element holds a HTML form required for                        depositing money to an account.                        -->                        <div id="depositAction" title="Deposit to an account" class="depositAction">                        <!-- This HTML form provides the UI elements for deposit action -->                        <form name="depositActionForm">                        <span id="depositActionFormTitle" class="depositActionFormTitle">                        Deposit to an account                        </span>                        <!--                        This table provides a drop-down selection box and an                        input control to enter the deposit amount.                        -->                        <table class="depositActionTable" align="center">                        <tr>                        <td>Select Account Owner:</td>                        <td>                        <select id="depositAccountOwner" size=7                        name="depositAccountOwner">                        </select>                        </td>                        </tr>                        <tr>                        <td>Amount:</td>                        <td><input type="text" name="depositAmount"                        id="depositAmount" maxlength="15" size="15"                        title="e-g: 100"/></td>                        </tr>                        </table>                        <!--                        This table provides an action button. When pressed, it will                        trigger an onclick event handler that will perform the                        required client-side logic.                        -->                        <table align="center" class="depositAmountButtonTable">                        <tr>                        <td>                        <input id="depositAmountActionButton"                        value="Deposit" type="button"                        title="Click here to deposit to an account."                        onclick="depositAmountAction_Async();"/>                        </td>                        </tr>                        </table>                        </form>                        </div> <!-- End of <div id="depositAction"> -->                        <!--                        The tellerOptions DIV element holds a HTML form required for                        debiting money from an account.                        -->                        <div id="debitAction" title="Debit from an account" class="debitAction">                        <form name="debitActionForm">                        <span id="debitActionFormTitle" class="debitActionFormTitle">                        Debit from an account                        </span>                        <table class="debitActionTable" align="center">                        <tr>                        <td>Select Account Owner:</td>                        <td>                        <select id="debitAccountOwner" size=7                        name="debitAccountOwner">                        </select>                        </td>                        </tr>                        <tr>                        <td>Amount:</td>                        <td><input type="text" name="debitAmount" id="debitAmount"                        maxlength="15" size="15" title="e-g: 100"/></td>                        </tr>                        </table>                        <!--                        This table provides an action button. When pressed, it will                        trigger an onclick event handler that will perform the                        required client-side logic.                        -->                        <table align="center" class="debitAmountButtonTable">                        <tr>                        <td>                        <input id="debitAmountActionButton" value="Debit"                        type="button"                        title="Click here to debit from an account."                        onclick="debitAmountAction_Async();"/>                        </td>                        </tr>                        </table>                        </form>                        </div> <!-- End of <div id="depositAction"> -->                        <!--                        The portfolioOption DIV element holds the form for                        updating the current portfolio value.                        -->                        <div id="portfolioAction" title="Update portfolio value"                        class="portfolioAction">                        <form name="portfolioActionForm">                        <span id="portfolioActionFormTitle" class="portfolioActionFormTitle">                        Get portfolio value                        </span>                        <table class="portfolioActionTable" align="center">                        <tr>                        <td>Select Account Owner:</td>                        <td>                        <select id="portfolioAccountOwner" size=7                        name="portfolioAccountOwner">                        </select>                        </td>                        </tr>                        </table>                        <!--                        This table provides an action button. When pressed, it will                        trigger an onclick event handler that will perform the                        required client-side logic.                        -->                        <table align="center" class="portfolioValueButtonTable">                        <tr>                        <td>                        <input id="portfolioActionButton"                        value="Get Stock Portfolio Value" type="button"                        title="Click here to get the portfolio value."                        onclick="portfolioAction_Async();"/>                        </td>                        </tr>                        </table>                        </form>                        </div> <!-- End of <div id="portfolioAction"> -->                        <!--                        The tellerActionResult DIV element holds the form for                        getting portfolio value.                        -->                        <div id="tellerActionResult" title="Result of teller operation"                        class="tellerActionResult">                        <form name="tellerActionResultForm">                        <span id="tellerActionResultTitle" class="tellerActionResultTitle">                        Result from Teller Operation                        </span>                        <!--                        This table includes a text area that summarizes the result of                        the operation performed by the teller.                        -->                        <table class="tellerActionResultTable" align="center">                        <tr>                        <td>                        <textarea id="tellerActionResultArea" rows="15"                        cols="80" readonly></textarea>                        </td>                        </tr>                        </table>                        </form>                        </div> <!-- End of <div id="tellerActionResult"> -->                        <!--                        The pageFooter DIV element holds the footer information such as the                        currently logged in user and Go to main menu  option. This footer                        section will be stapled at the bottom of  every other section of                        this application.                        -->                        <div id="pageFooter">                        <h1></h1>                        <table id="footerTable" class="footerTable" align="center">                        <tr>                        <!--                        Note that we are using class attribute in span to style                        the td value so that we can dynamically assign style classes                        (in JavaScript) as the user moves the mouse over the footer                        options. If we use the id attribute to CSS style, we can‘t                        dynamically assign styles in JavaScript.                        -->                        <td>                        <span id="currentUserDisplay" class="currentUserDisplay"                        title="Currently logged in user‘s name.">                        Teller: John Doe                        </span>                        </td>                        <!--                        The event handler functions are called with a                        function parameter that indicates which footer option to be                        highlighted.                        -->                        <td>                        <span id="goToMainMenuLink" class="goToMainMenuLink"                        title="Click here to go to main menu."                        onmouseover="changeFooterLinkStyleForSelection(1);"                        onmouseout="changeFooterLinkStyleToDefault(1);"                        onclick="processFooterOperation(1);">                        Back to main menu                        </span>                        </td>                        </tr>                        </table>                        </div> <!-- End of <div id="PageFooter"> -->                        </div> <!-- End of <div id="mainPage"> -->                        </body>                        </html>                        

                        /*                        ============================================================                        Project: End-to-End-Ajax application development                        Purpose: This is an example scenario to be used in                        an IBM developerWorks article.                        Last modified: May/12/2007.                        This file provides CSS rules that are used to style the                        UI controls for the bank teller browser application.                        This application doesn‘t address all the features of                        CSS. However, basic and important aspects of CSS                        are included here in the context of the bank teller                        application.                        ============================================================                        */                        /*                        This is a HTML selector that redefine the body tag with                        font and background attributes.                        */                        body {                        font-family:       Verdana, Geneva, Arial, sans-serif;                        font-size:         medium;                        text-align:        center;                        background:        rgb(220, 220, 220);                        }                        /*                        This is a HTML selector used to style the <h1> element.                        */                        h1 {                        color:             #cc6600;                        border-bottom:     medium double #888888;                        font-size:         1.7em;                        }                        /*                        This CSS ID class is applicable for the DIV element that holds the table in which                        all the available teller operations are listed.                        */                        #tellerOptions {                        margin-left:       3%;                        margin-right:      3%;                        padding-top:       10px;                        padding-bottom:    10px;                        border:            red;                        border-width:      thick;                        border-style:      double;                        border-collapse:   collapse;                        }                        /*                        This qualified dependent selector applies style to the teller option table.                        */                        table.tellerOptionsTable td {                        padding-top:       10px;                        padding-bottom:    10px;                        }                        /*                        This CSS generic class is applicable to style the margins for the                        tables in the teller actions form.                        */                        .tellerOptionsTable,                        .depositActionTable,                        .debitActionTable,                        .portfolioActionTable {                        margin-top:        30px;                        }                        /*                        This CSS generic class is applicable for the SPAN elements that hold the clickable text                        representing various teller operations. User can select an operation to perform from                        this list. Generic class is used here so that inside of JavaScript, we can dynamically                        change the style of the text representing the teller operations as the user mouseover or                        mouseout of those text regions defined within the SPAN elements.                        The following is the default style when there is no user mouse activity or when the user                        moves the mouse out.                        */                        .tellerOptionsLink {                        cursor:            pointer;                        background-color:  rgb(220, 220, 220);                        color:             blue;                        font-weight:       bold;                        font-style:        normal;                        text-decoration:   none;                        border-style:      none;                        }                        .tellerOptionsLinkSelection,                        .goToMainMenuLinkSelection {                        cursor:            pointer;                        background-color:  green;                        color:             yellow;                        font-weight:       normal;                        font-style:        italic;                        text-decoration:   none;                        border-style:      ridge;                        border-width:      7px;                        border-top-width:  7px;                        border-color:      black;                        }                        .depositAction {                        margin-left:       3%;                        margin-right:      3%;                        padding-top:       10px;                        padding-bottom:    10px;                        cursor:            default;                        border:            navy;                        border-width:      thick;                        border-style:      double;                        border-collapse:   collapse;                        }                        .debitAction {                        margin-left:       3%;                        margin-right:      3%;                        padding-top:       10px;                        padding-bottom:    10px;                        cursor:            default;                        border:            lightseagreen;                        border-width:      thick;                        border-style:      double;                        border-collapse:   collapse;                        }                        .portfolioAction {                        margin-left:       3%;                        margin-right:      3%;                        padding-top:       10px;                        padding-bottom:    10px;                        cursor:            default;                        border:            purple;                        border-width:      thick;                        border-style:      double;                        border-collapse:   collapse;                        }                        .tellerActionResult {                        margin-left:       3%;                        margin-right:      3%;                        padding-top:       10px;                        padding-bottom:    10px;                        cursor:            default;                        border:            rosybrown;                        border-width:      thick;                        border-style:      double;                        border-collapse:   collapse;                        }                        /*                        This qualified CSS generic class defines the cell padding for the buttons in the                        teller actions form and others.                        */                        table.depositAmountButtonTable td,                        table.debitAmountButtonTable td,                        table.portfolioValueButtonTable td,                        table.tellerActionResultTable td {                        padding-left:      25px;                        padding-right:     25px;                        }                        /*                        This qualified CSS generic class defines the margin for the tables holding                        the teller actions form and others.                        */                        table.depositAmountButtonTable,                        table.debitAmountButtonTable,                        table.portfolioValueButtonTable,                        table.tellerActionResultTable {                        margin-top:        40px;                        }                        .depositActionFormTitle,                        .debitActionFormTitle,                        .portfolioActionFormTitle,                        .tellerActionResultTitle {                        color:             olive;                        font-weight:       normal;                        font-style:        normal;                        text-decoration:   underline;                        text-align:        center;                        }                        /*                        This qualified CSS generic class is applicable in order to set the cellpadding for                        the table <td> where the footer options are listed.                        */                        table.footerTable td {                        padding-left:      100px;                        padding-right:     100px;                        }                        /*                        This qualified CSS generic class is applicable in order to set the margin for the                        table where the footer options are listed.                        */                        table.footerTable {                        margin-top:        20px;                        }                        /*                        This CSS generic class is applicable for the static display of the current username                        who is logged into the system.                        */                        .currentUserDisplay {                        cursor:            default;                        background-color:  rgb(220, 220, 220);                        color:             darkred;                        font-weight:       normal;                        font-style:        normal;                        }                        /*                        This CSS generic class is applicable for the SPAN elements that hold the clickable text                        representing footer options. User can select to logout from the system.                        Generic class is used here so that inside of JavaScript, we can dynamically                        change the style of the text representing the logout link as the user mouseover or                        mouseout of those text regions defined within the SPAN elements.                        The following is the default style when there is no user mouse activity or when the user                        moves the mouse out.                        */                        .gotoMainMenuLink {                        cursor:            pointer;                        background-color:  rgb(220, 220, 220);                        color:             black;                        font-weight:       bold;                        font-style:        normal;                        text-decoration:   none;                        border-style:      none;                        }                        /*                        This CSS ID class is applicable for the Teller actions button and others.                        */                        #depositAmountActionButton,                        #debitAmountActionButton,                        #portfolioActionButton {                        background-color:  saddlebrown;                        color:             white;                        border:            purple;                        border-width:      thin;                        border-style:      inset;                        font-weight:       bold;                        font-style:        normal;                        font-size:         90%                        }                        /*                        The following overrides a style defined previously in the same class.                        */                        #debitAmountActionButton {                        background-color:  midnightblue;                        }                        /*                        The following overrides a style defined previously in the same class.                        */                        #portfolioActionButton {                        background-color:  teal;                        }                        

                        /*                        ============================================================                        Project: End-to-End-Ajax application development                        Purpose: This is an example scenario to be used in                        an IBM developerWorks article.                        Last modified: May/12/2007.                        This JavaScript file provides specific functions related to                        XHR (XML HTTP Request). The logic explained here is a                        generic one which is being used hundreds of other                        Web applications. This logic can be found in any                        Ajax related book or article that describes the inner                        workings of XHR.                        ============================================================                        */                        /*                        ============================================================                        Function: createRequest                        Last Modified: May/12/2007                        This function creates an XHR object that is browser                        agnostic. As of this writing, XHR is somewhat browser                        dependent. We can divide XHR support in two major classes                        of browsers i.e. Internet Explorer and non-IE browsers.                        Then, within IE, there are different implementations of                        XHR in pre-IE6 and the rest. In summary, Microsoft                        supports XHR through its ActiveX. After listening to                        complaints from the Web developer community, Microsoft                        realized the need to expose XHR as a native browser                        object as done in other browsers. The rumor is that                        we will soon see XHR support in IE browsers via                        XMLHttpRequest object. Until then, we have to take care of                        browser dependency as shown in this function.                        ============================================================                        */                        function createRequest() {                        // Define a local variable and set it to null.                        var request = null;                        // Try different things to see which browser is being used.                        try {                        // Non Microsoft browsers (Firefox, Safari etc.)                        request = new XMLHttpRequest();                        } catch(trymicrosoft) {                        try {                        // IE6 and above.                        request = new ActiveXObject("Msxml2.XMLHTTP");                        } catch(othermicrosoft) {                        try {                        // Older versions of IE i.e. pre-IE6.                        request = new ActiveXObject("Microsoft.XMLHTTP");                        } catch(failed) {                        // No support for XHR                        request = null;                        } // End of catch(failed)                        } // End of catch(othermicrosoft)                        } // End of catch(trymicrosoft)                        // Check if we have a valid XHR object.                        if (request == null) {                        alert("Error creating the XMLHttpRequest object!");                        } else {                        // Return the valid XHR object that was created.                        return(request);                        } // End of if (request == null)                        } // End of function createRequest.                        /*                        ============================================================                        Function: sendHttpRequest                        Last Modified: May/12/2007                        This function transmits any arbitrary data to a server URL.                        It takes four arguments:                        1) XHR object                        2) Callback function (if any) to receive the server response                        3) URL to which the content is to be sent.                        4) Data to be sent.                        The depending on the input parameters, it will either                        communicate with the server asynchronously or                        synchronously to do the data interchange. It uses the POST                        verb of HTTP to do the REST-style call.                        ============================================================                        */                        function sendHttpRequest(request, callbackFunction, url, postData) {                        // Initialize a local variable to false.                        // This variable indicates if we need to communicate with the                        // server in an asynchronous mode.                        var async_request = false;                        // Did the caller give us a Callback function?                        if (callbackFunction != null) {                        // We have a callback function.                        // Set that function to XHR object‘s onreadystatechange property.                        request.onreadystatechange = callbackFunction;                        // Set the local variable to indicate that                        // we need to send and receive the response in a non-blocking mode                        // i.e. Async.                        async_request = true;                        }                        //  Open a HTTP connection to the provided URL.                        request.open("POST", url, async_request);                        // Set a HTTP request header.                        request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                        // Send it now.                        // If async mode was not true, then this call will block until a                        // HTTP response is received from the server.                        // Otherwise, this statement will just send and return without waiting for a                        // server response.                        var response = request.send(postData);                        if (async_request == false) {                        // We sent the request synchronously.                        // Hence, return the response received from the server.                        return(response);                        } else {                        // If the request was made asynchronously, we need not bother to return                        // anything meaningful. The response will be sent directly to the                        // callback function that was provided by the caller.                        return(true);                        }                        } // End of function sendHttpRequest.                        

<script language="JavaScript" type="text/javascript" src="xyz.js"></script>                        

<link rel="stylesheet" type="text/css" href="xyz.css" media="all" />