<% @ Page Language = "C #" autoeventwireup = "true" codefile = "default. aspx. cs" inherits = "_ default" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> first example of using Ajax technology for partial refresh </title>
<SCRIPT type = "text/JavaScript">
VaR XMLHTTP;
// The core idea of AJAX is to classify data (which can be categorized as needed by any user) and then put it on different server pages, in this way, you only need to load the page you need.
// However, there are other technologies such as Asynchronous response.
Function getdata ()
{
// Obtain the DOM Instance name
VaR city = Document. getelementbyid ("TXT"). value;
// Step 1: Create an asynchronous call object. The browser is IE.
// If it is Firefox (or other non-ie), use new XMLHttpRequest () for instantiation.
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
// Step 2: Associate the object state with the event
// Asynchronous invocation of server status changes. Once the room end starts to interact with the server end, to control the change of the room end, it is necessary to determine the current interaction status.
XMLHTTP. onreadystatechange = statechange; // note: the Status function name is customized later, but cannot be enclosed in brackets. This is defined by Delegate (event.
// Step 3: load the server page of the data
// The server where the data is loaded. Ajax can obtain the data from other websites or from a local XML file.
XMLHTTP. Open ("Post", "datapage. aspx? City = "+ city, true); // true: asynchronous; false: synchronous (sometimes meaningful)
// Step 3: send the request
// Send an HTTP request. the requested data can be selective. that is, you can assign values to parameters in send (Params) to select data that you are interested in. do not use null or null.
// After the system calls the send method, the interaction between the background and the server starts, and the status number changes. developers can process the changes required by the website in the status processing method.
XMLHTTP. Send ();
}
// Processing function for status change.
Function statechange ()
{
// Determine whether the asynchronous call is complete
If (XMLHTTP. readystate = 4)
{
// Prompt for completion of judgment Code OK status?
If (XMLHTTP. Status = 200)
{
// Pass the returned data as a parameter to the filling method
Alert ("Asynchronous call completed. The data has been received. The following will load the obtained data to the control (that is, processing the asynchronously obtained data )! ");
// Step 5: process data -- strictly speaking, the Ajax range is not set here, but the returned data object (XMLHTTP. responsetext) is fixed in.
// Call the following method to process the obtained data (loaded to the dropdownlist control.
Filldata (XMLHTTP. responsetext );
// If it is a local XML file, use the following statement:
// Document. getelementbyid ("mytext"). innerhtml = XMLHTTP. responsetext;
}
}
}
// Function Definition body for processing data obtained asynchronously.
Function filldata (strcity)
{
Document. getelementbyid ("dropdownlist1"). Options. Length = 0;
VaR indexofcity;
VaR city;
// Cut the passed string
While (strcity. length> 0)
{
// Determine whether it is the last string
Indexofcity = strcity. indexof (",");
If (indexofcity> 0)
{
City = strcity. substring (0, indexofcity );
Strcity = strcity. substring (indexofcity + 1 );
// Fill in the drop-down list
Document. getelementbyid ("dropdownlist1"). Add (New Option (city, city ));
}
Else
{
// If it is the last string
Lastcity = strcity. substring (0, 2 );
Document. getelementbyid ("dropdownlist1"). Add (New Option (lastcity, lastcity ));
Break;
}
};
}
</SCRIPT>
</Head>
<Body>
<Form ID = "form1" runat = "server" method = "Post">
<Div>
<Table Style = "width: 463px; Height: 152px">
<Tr>
<TD colspan = "2" style = "font-weight: bold; color: # 0000ff; text-align: Center">
Partial Ajax refresh </TD>
</Tr>
<Tr>
<TD style = "width: 265px">
Enter the city name </TD>
<TD>
<! -- <Asp: textbox id = "textbox1" runat = "server" width = "252px"> </ASP: textbox> -->
<Input type = "text" id = "TXT" style = "width: 245px"/>
</TD>
</Tr>
<Tr>
<TD style = "width: 265px">
</TD>
<TD>
<Input id = "button1" style = "width: 147px" type = "button" value = "query" onclick = "getdata ()"/> </TD>
</Tr>
<Tr>
<TD style = "width: 265px">
Select region list </TD>
<TD>
<Asp: dropdownlist id = "dropdownlist1" runat = "server" width = "255px">
</ASP: dropdownlist> </TD>
</Tr>
</Table>
</Div>
<Br/>
<Br/>
</Form>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
