Introduction |
||||||||||||||||
|
In the first section of this article, we shall introduce |
||||||||||||||||
|
What is |
||||||||||||||||
|
Advantages:
Disadvantages:
|
||||||||||||||||
|
The XMLHTTPRequest Object |
||||||||||||||||
|
The XMLHTTPRequest object is used to send a request to, and receive a response from, the web server. Using this object, the web page can make a request to the web server asynchronously, and receive a response asynchronously. Even though this object is not a W Properties and Functions of XMLHTTPRequest object used in the Sample Application Table 1 – Properties of XMLHTTPRequest Object
Table 2 – Methods of XMLHTTPRequest Object
Creating an Instance of an XMLHTTPRequest Object While any browser-supported scripting language can be used to access this object, the method by which an instance of an XMLHTTPRequest object is created varies from browser to browser. Internet Explorer (IE) implements this object using ActiveX technology, so creating an instance of this object requires the use of “New ActiveXObject(ProgId)”, where ProgId is either Msxml2.XMLHTTP or Microsoft.XMLHTTP, depending on the version of MSXML installed. Mozilla, Safari, and Netscape implement this as a native object, so creating an instance requires the use of “New XMLHttpRequest()”. The following JavaScript function (Listing 1) creates an instance of an XMLHTTP object independent of browser type. The code presented for this article has been tested with IE 6.0, Netscape 8.0, and Mozilla Firefox 1.0. Listing 1 – Creating an XMLHTTP Object function CreateXmlHttp() { //Creating object of XMLHTTP in IE try { XmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { XmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch() { XmlHttp = null; } } //Creating object of XMLHTTP in Mozilla and Safari if(!XmlHttp && typeof XMLHttpRequest != "undefined") { XmlHttp = new XMLHttpRequest(); } } |
||||||||||||||||
|
The Sample Application |
||||||||||||||||
|
The sample application uses a pair of DropDownList controls. A change in the selected value of the first drop-down list should populate the second drop-down list with a new collection of items. This paired behavior is found in many applications, such as a Country-State pair and a Category-Product pair. We have chosen to discuss the Country-State DropDownList pair. In traditional web applications, a change in the value of the Country DropDownList results in the web page posting back to server in order to populate the States DropDownList. In our example, we will populate the States DropDownList by retrieving state data from the server using In this section, first we will discuss the CountriesAndStates.xml and CountriesAndStates.xsl files, and then the CountryStateXml class which is used to get country and state data from the XML file. Next, we will discuss the start page of our project, which is AjaxClient.aspx. We will then discuss our JavaScript files, AjaxVariables.js and AjaxScript.js. You will find core CountriesAndStates XML and XSL Files The CountriesAndStates.xml file stores the names of all countries and their states. The format of this XML file is shown below (Listing 2). Each country is represented as a single country node, and all of its states are represented as child nodes. At present this XML file has only three countries and some of the states of these countries. You can edit this XML to add other countries and states. Listing 2 – CountriesAndStates.xml File <country name=" <state> <state> <state> <state> </country> The CountriesAndStates.xsl file has the transformation logic for converting one form of XML into another form of XML. This transformation takes a country name as an input parameter, and returns its corresponding states in an XML string. CountryStateXml class The CountryStateXml class is used to get country or state data in different formats depending on the method called. This class has one constructor and three public methods. The constructor loads the CountriesAndStates.xml file into an XPathDocument. The public method GetCountryList returns a list of countries as an ArrayList. The second method GetStateList returns a list of states for a given country as an ArrayList. The third method GetStatesXMLString returns an XML document containing all the states for a given country name, along with the country name. AjaxClient Page The start page of our sample application is AjaxClient.aspx and Figure 1 shows it viewed in a browser. This page has two DropDownList server controls. The HTML markup of this page is given in Listing 3. The onchange event of the Country DropDownList is tied to the JavaScript function CountryListOnChange and is shown in bold text in the following markup. We will discuss the CountryListOnChange function later in this section. Figure 1 – AjaxClient.aspx Page in a Browser
Listing 3 – HTML of AjaxClient.aspx page <form id="Form1" method="post" runat="server"> <asp:DropDownList id="countryList" onchange="return CountryListOnChange()" style="Z-INDEX: 101; LEFT: 20px; POSITION: absolute; TOP: 28px" runat="server" Width="174px" Height="28px"></asp:DropDownList> <asp:DropDownList id="stateList"
|