<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PredictiveFetchDemo2.aspx.cs" Inherits="AJAX.PredictiveFetchDemo2" %>

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>AJAX Design Pattern: Predictive Fetch - Web API</title>

 

    <script lang="javascript" type="text/javascript">

        var stats;          // global variable used to store the fetched data before it's needed

        var request;        // global variable used to store the XMLHttpRequest object used to handle AJAX.

 

        try {

            // Code for IE7+, Firefox, Chrome, Opera, Safari

            request = new XMLHttpRequest();

         }

        catch (try_older_microsoft) {

            try {

                // Code for IE6, IE5

                request = new ActiveXObject("Microsoft.XMLHTTP");

            }

            catch (other) {

                request = false;

                alert("Your browser doesn't support AJAX!");

            }

        }

 

         window.onload = function () {

 

             if (document.getElementById('ddlPlayers').value != "blank_player") {

                var player = document.getElementById('ddlPlayers').value;

 

                // Use the JavaScript proxy object to make an AJAX call to an ASP.NET Core 2.0 Web API

                request.open("GET", "http://cis-iis2.temple.edu/users/pascucci/CIS3342/CoreWebAPI/api/MLBService/GetPlayerStats/" + player, true);

                //xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "*");

                request.onreadystatechange = onComplete;

                request.send();

            }

 

        } // end of page load event

 

        function GetInfo() {

            document.getElementById("content_area").innerHTML = stats;

        }

 

        // Callback function used to perform some action when an asynchronous request is completed

        function onComplete() {

 

            if (request.readyState == 4 && request.status == 200) {

                // store the fetched data in the global variable until it's needed

                stats = request.responseText;

            }

        }

    </script>

</head>

 

<body>

 

    <form id="form1" runat="server">

 

        <asp:Image ID="imgPlayer" runat="server" Height="250px"

                        ImageUrl="~/images/blank_player.jpg"

                        style="top: 30px; left: 25px; position: absolute" Width="200px" />

       

        <asp:DropDownList ID="ddlPlayers" runat="server"            

            style="top: 320px; left: 25px; position: absolute; height: 20px; width: 201px; bottom: 404px;"

            AutoPostBack="True" OnSelectedIndexChanged="ddlPlayers_SelectedIndexChanged">

            <asp:ListItem Selected="True" Value="blank_player">Select Player</asp:ListItem>

            <asp:ListItem Value="roy_halladay">Roy Halladay</asp:ListItem>

            <asp:ListItem Value="cole_hamels">Cole Hamels</asp:ListItem>

            <asp:ListItem Value="ryan_howard">Ryan Howard</asp:ListItem>

            <asp:ListItem Value="cliff_lee">Cliff Lee</asp:ListItem>

            <asp:ListItem Value="roy_oswalt">Roy Oswalt</asp:ListItem>

            <asp:ListItem Value="hunter_pence">Hunter Pence</asp:ListItem>     

            <asp:ListItem Value="jimmy_rollins">Jimmy Rollins</asp:ListItem>

            <asp:ListItem Value="chase_utley">Chase Utley</asp:ListItem>

            <asp:ListItem Value="shane_victorino">Shane Victorino</asp:ListItem>

           

        </asp:DropDownList>

   

        

        <input id="btnGetInfo" type="button" value="Get Information" onclick="GetInfo();"               

                 style="top: 320px; left: 243px; position: absolute; width: 135px; height: 28px;" />

      

        <br />

       

        <div id="content_area"

            style="top: 350px; left: 26px; position: absolute; width: 135px; height: 28px;">

        </div>

    </form>

                              

</body>

</html>