Page 4 of 6 << Previous 1 2 3 4 5 6 Next >>

AJAX (Asynchronous JavaScript And XML) Tutorial

AJAX Example - Client Web Page

To illustrate using AJAX, let's take a web page that contains two controls. The first is a text box where you can enter in the 2 letter abbreviation for a state. As you type in a letter, AJAX will be used to get the full name of the state and display it in a second textbox. Since this is for illustrative purposes only, only these states are valid.

CA	California
CT	Connecticut
DE	Delaware
FL	Florida
HI	Hawaii
NJ	New Jersey
NY	New York
ME	Maine

The HTML for the sample web page is shown below. The significant parts are the two input textboxes and the onkeyUp event tied to the Abbreviation textbox which is the one the user enter data into. When you type a letter in the Abbreviation textbox, the onkeyUp event is fired and calls the ajaxGetValue function we saw on the previous page. The AJAX code will dynamically populate the Name textbox with the full name of the state.

Also note that the JavaScript functions were stored in the Ajax.js file and referenced in the <HEAD> section of the page.

<html>
  <head>
     <title>Ajax Client Page</title>
     <script src="Ajax.js"></script>
  </head>

  <body>
  <h1>AJAX Sample</h1>

  <form name="theForm">
     State Abbreviation: <input type="text" id="Abbreviation" onkeyup="ajaxGetValue();" 
               maxlength="2" size="3" />
     State Name: <input type="text" id="Name" />
  </form>

  </body>
</html>

The above code is meant to be generic to work with any type of HTML page. In the case of ASP.NET, server controls could be used as shown below. Additionally, Instead of hard coding the reference to the JavaScript file, Ajax.js, and the onkeyup event handler, these items could be pushed to the client from your server code using the ClientScript object in ASP.NET 2.0.

ASP.NET 2.0 markup using server controls:

<html>
  <head>
    <title>Ajax Client Page</title>
     . . . 
  </head>
  
  <body>
    <form id="form1" runat="server"> 
      <h1>AJAX Sample</h1>
      . . . 
      <asp:Label id="Label2" runat="server" Text="State Abbreviation:">
          </asp:Label> 
      <asp:TextBox id="stateAbbreviation" runat="server" MaxLength="2" >
          </asp:TextBox> 
      <asp:Label id="Label3" runat="server" Text="State Name:"> 
          </asp:Label> 
      <asp:TextBox id="stateName" runat="server" MaxLength="2" ReadOnly="True">
          </asp:TextBox>
    </form> 
  </body> 
</html>

VB server code to include the JavaScript file and onkeyup call:

Protected Sub Page_Load(ByVal sender As object, ByVal e As EventArgs)

   If Not ClientScript.IsClientScriptIncludeRegistered("AJAXInclude") Then
      ClientScript.RegisterClientScriptInclude("AJAXInclude", "AJAX.js")
   End If

   Page.stateAbbreviation.Attributes.Add("onkeyup", "ajaxGetValue();")
End Sub

Page 4 of 6 << Previous 1 2 3 4 5 6 Next >>

About TheScarms

Sample code
version info

If you use this code, please mention "www.TheScarms.com"

Email this page