. NET using AJAX to implement mailbox registration and locale selection Examples _ Practical skills

The examples in this article describe how. NET uses AJAX to implement mailbox registration and locale selection. Share to everyone for your reference. The implementation methods are as follows:

The first thing to know is that Ajax is the abbreviation for asynchronous JavaScript and XML (and DHTML, etc.).

Ajax is the asynchronous interaction with the server on the browser. Before the XMLHttpRequest is widely used, the user stays on the page does not have the means to implement the local update function, only then refreshes the entire page to obtain the newest data, but this code's cost is needs to transmit the massive data, and possibly temporarily some user information also may lose, And the use of Ajax to achieve a partial update of the content of the page, the principle is to invoke XMLHttpRequest this agent, send the request to the service, and then through Ajax defined processing interface to update the content of the page.

Next, use AJAX to implement mailbox registration and locale selection examples to illustrate:

First front section:

Copy Code code as follows:

<%@ Page language= "C #" autoeventwireup= "true" codebehind= "Default.aspx.cs" inherits= "Webapplication2._default"% >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>ajax's preliminary practice using </title>
<style type= "Text/css" >
Div{width:800px;margin:0 auto;height:25px;}
</style>

<script type= "Text/javascript" >
function createrequest ()//Create Object
{
var request;
Try
{
Request = new XMLHttpRequest ();
}
catch (MICROSPFT)
{
Try
{
Request = new ActiveXObject ("Msxml2.xmlhttp");
}
catch (Othermicrosoft)
{
Try
{
Request = new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (Failed)
{
request = NULL;
}
}
}
return request;
}
var req = null;//Registered Mailbox
function SendRequest ()/Send Request
{
if (document.forms[0].useremail.value== "")
{
Alert ("User mailbox cannot be empty!") ");
Document.forms[0].useremail.focus ();
return false;
}
req = Createrequest ();//Create Ajax Request Object
Req.open ("Get", "default.aspx?") Email= "+document.forms[0].useremail.value);
Req.send ("");//open server connection, send request
Req.onreadystatechange = dealmethod;//Set the function to run after the server response completes
}
function Dealmethod ()//calling functions
{
if (req.readystate==4&&req.status==200)//At this time the server has responded to completion status
{
if (req.responsetext== "0")//responsetext for server Response Value property
document.getElementById ("Canuse"). InnerHTML = " '" + "The mailbox has been registered";
Else
document.getElementById ("Canuse"). InnerHTML = " '" + "The mailbox is not registered";
}
}
var req2=null;//initialize Drop-down box
function Getselect ()
{
REQ2 = Createrequest ();
Req2.open ("Get", "default.aspx?") Selected=1 ");
Req2.send ("");
req2.onreadystatechange=changeselected;
}
function changeselected ()
{
if (req2.readystate==4&&req2.status==200)
{
var s = req2.responsetext;
var provinces = s.split (' & ') [0].split (' | '); /In the Background return field to obtain the province Lieru (1, Henan), (2, Jiangxi), etc.
var cities = s.split (' & ') [1].split (' | '); /In the Background return field to get the city Lieru (1, Zhengzhou), (2, Luoyang), (3, Kaifeng), etc.
document.forms[0].province.length=0;
for (Var i=0;i<provinces.length;i++)
{
var op = new Option ();
Op.value = Provinces[i].split (', ') [0];
Op.text = Provinces[i].split (', ') [1];
Document.forms[0].province.options.add (OP)//The province number and the province name are added as value and text to option under Select
}
document.forms[0].city.length=0;
for (Var j=0;j<cities.length;j++)
{
var op2 = new Option ();
Op2.value = Cities[j].split (', ') [0];
Op2.text = Cities[j].split (', ') [1];
Document.forms[0].city.options.add (OP2)//Add the city number and city name as value and text to option under Select
}
}
}
var req3=null;//changes in the provinces that touch the city
function getcity ()
{
REQ3 = Createrequest ();
Req3.open ("Get", "default.aspx?") Proid= "+document.forms[0].province.value);
Req3.send ("");
req3.onreadystatechange=changecity;
}
function changecity ()
{
if (req3.readystate==4&&req3.status==200)
{
var s = req3.responsetext;
var cities = s.split (' | ');
document.forms[0].city.length=0;
for (Var i=0;i<cities.length;i++)
{
var op = new Option ();
Op.value = Cities[i].split (', ') [0];
Op.text = Cities[i].split (', ') [1];
Document.forms[0].city.options.add (OP);
}
}
}
</script>
<body>
<form id= "Form1" runat= "Server" >
<table align= "center" >
<tr>
<th>Email</th>
<th><input type= "text" name= "UserEmail" value= ""/></th>
<th id= "Canuse" ></th>
<th></th>
</tr>
<tr>
<th><select name= "province" onchange= "getcity ();" ></select></th>
<th><select name= "City" ></select></th>
<th><input type= "button" value= "registered" onclick= "SendRequest ();" /></th>
</tr>
</table>
</form>
</body>
<script type= "Text/javascript" >
Getselect ();
</script>

Then the backend section:

Copy Code code as follows:

public partial class _default:system.web.ui.page
{
protected void Page_Load (object sender, EventArgs e)
{
if (request.querystring["email"]!= null)//Registered Mailbox
{

Usually, the data source here should be read from a certain database, here for convenience, the definition of a rigid data instead of
string bbb = "2320774925@qq.com";
String AAA = request.querystring["Email"];
if (AAA = BBB)
Response.Write ("0");
Else
Response.Write ("1");
Response.End ();
}
Under normal circumstances, the next two processing parts should use two data tables
if (request.querystring["Selected"]!= null)//Initialize Drop-down box
{

Typically, the data here should be read from the database, then get to the province number 1 corresponding to all the city number and city name, and then according to some methods first of the province table in the combination of two columns of data formed as "1, Henan, Zhejiang |3, Hubei |4, Jiangsu |5, Anhui |6, Shandong |7 , Jiangxi "Such a string, finally, with the province number 1 corresponding to all the city number and the city name eventually form such as" 1, Henan, Zhejiang |3, Hubei |4, Jiangsu |5, Anhui |6, Shandong |7, Jiangxi &1, Zhengzhou, Luoyang |3, Kaifeng |4, Xinyang |5, Nanyang |6, Zhumadian |7, Anyang |8, Hebi |9, Puyang |10, Pingdingshan "Such a column of strings is passed back to the front
string result = "1, Henan, Zhejiang |3, Hubei |4, Jiangsu |5, Anhui |6, Shandong |7, Jiangxi &1, Zhengzhou, Luoyang |3, Kaifeng |4, Xinyang |5, Nanyang |6, Zhumadian |7, Anyang |8, Hebi |9, Puyang |10, Pingdingshan";
Response.Write (Result);
Response.End ();
}
if (request.querystring["proid"]!= null) Change the change of the province that touches the city
{

Typically, the data here should still be read from the database. In the front-end section, after the dropdown is initialized, all the provinces will be populated into the province dropdown box, and all cities with a province number of 1 will also be populated in the City dropdown box, when you select the province again, The server will receive a new data, in fact, this data is the so-called province number, and then here through the province number to obtain the corresponding city number and city name, through a certain way to deal with the final form such as "1, Zhengzhou, Luoyang |3, Kaifeng |4, Xinyang |5, Nanyang" Such strings are passed back to the front end
int num = Int32.Parse (request.querystring["proid"]);
if (num = 1)
Response.Write ("1, Zhengzhou, Luoyang |3, Kaifeng |4, Xinyang |5, Nanyang");
if (num = 2)
Response.Write ("1, Hangzhou city, Ningbo |3, Wenzhou |4, Jiaxing |5, Huzhou");
if (num = 3)
Response.Write ("1, Wuhan City, Huangshi |3, Shiyan |4, Yichang |5, Jingzhou");
if (num = 4)
Response.Write ("1, Nanjing, Wuxi |3, Xuzhou |4, Changzhou |5, Suzhou");
if (num = 5)
Response.Write ("1, Hefei, Wuhu |3, Bengbu |4, Huainan |5, Ma On Shan");
if (num = 6)
Response.Write ("1, Jinan, Qingdao |3, Zibo |4, Zaozhuang |5, dongying");
Else
Response.Write ("1, Nanchang, |3, Jingdezhen, Pingxiang |4, Jiujiang |5, Xinyu");
Response.End ();
}
}
}

I hope this article will help you with your. NET programming.