In the past, Ajax was all confused with controls, without looking at its principles. Ajax is refreshing, that is, calling another page through JavaScript, refreshing it on another page, and obtaining data.
The principle is that the Code is simpler ,,
In this demo, the principle is very simple: first obtain the object model of gethttpobject, then go to post, webform1.aspx, then return the result, and then parse it!
Default. aspx
<% @ Page Language = "C #" autoeventwireup = "true" codebehind = "default. aspx. cs" inherits = "ajaxwebapp. _ 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> No title page </title>
<Script language = "JavaScript">
Function gethttpobject ()
{
VaR waystation = NULL;
If (window. activexobject)
{
Waystation = new activexobject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest)
{
Waystation = new XMLHttpRequest ();
}
Else
{
Waystation = false;
}
Return waystation;
}
Function addtest ()
{
Inputfield = Document. getelementbyid ("textfield ");
Completetable = Document. getelementbyid ("Table1 ");
Completediv = Document. getelementbyid ("popup ");
Completebody = Document. getelementbyid ("body1 ");
VaR S = Document. All. Item ("textfield"). value;
// Alert (s );
VaR AA = encodeuri (s );
If (S = "")
Return;
VaR xmlrequest = gethttpobject ();
Xmlrequest. Open ("Post", "webform1.aspx? Id = "+ AA );
Xmlrequest. onreadystatechange = function ()
{
If (xmlrequest. readystate = 4)
{
// Xmlrequest. responsetext refers to the string output by addcity;
Setnames (xmlrequest. responsetext );
}
}
Xmlrequest. Send (null );
}
Function setnames (names)
{
If (names = "")
{
Clearnames ();
Return;
}
Clearnames ();
Setoffsets ();
VaR row, cell, txtnode;
VaR S = names. Split ("$ ");
For (VAR I = 0; I <S. length; I ++)
{
// S [I] is TD
VaR nextnode = s [I];
Row = Document. createelement ("TR ");
Cell = Document. createelement ("TD ");
Cell. onmouseout = function () {This. style. backgroundcolor = '';};
Cell. onmouseover = function () {This. style. backgroundcolor = '# ffff00 ';};
Cell. onclick = function () {completefield (this );};
Cell. Pop = "T ";
Txtnode = Document. createtextnode (nextnode );
Cell. appendchild (txtnode );
Row. appendchild (cell );
Document. getelementbyid ("body1"). appendchild (ROW );
}
}
// Used to hide the text box when the mouse loses focus
Document. onmousedown = function ()
{
If (! Event. srcelement. Pop)
Clearnames ();
} // Enter the input box
Function completefield (cell)
{
Inputfield. value = cell. firstchild. nodevalue;
Clearnames ();
}
Function clearnames ()
{
Completebody = Document. getelementbyid ("body1 ");
VaR ind = completebody. childnodes. length;
For (VAR I = ind-1; I> = 0; I --)
{
Completebody. removechild (completebody. childnodes [I]);
}
Completediv = Document. getelementbyid ("popup ");
Completediv. style. Border = "NONE ";
}
Function setoffsets ()
{
Completetable. style. width = inputfield. offsetwidth; + "PX ";
VaR left = calculateoffset (inputfield, "offsetleft ");
VaR Top = calculateoffset (inputfield, "offsettop") + inputfield. offsetheight;
Completediv. style. Border = "Black 1px solid ";
Completediv. style. Left = left + "PX ";
Completediv. style. Top = Top + "PX ";
}
Function calculateoffset (field, ATTR ){
VaR offset = 0;
While (field ){
Offset + = field [ATTR];
Field = field. offsetparent;
}
Return offset;
}
</SCRIPT>
</Head>
<Body>
<Input name = "textfield" id = "textfield" type = "text" class = "input1" onkeyup = "addtest ();" maxlength = "20" style = "width: 68px "/> <Div id =" popup "style =" position: absolute ">
<Table id = "Table1" cellspacing = "0" cellpadding = "0" bgcolor = "# fffafa" border = "0">
<Tbody id = "body1">
</Tbody>
</Table>
</Div>
</Body>
</Html>
Webform1.aspx is used for background refresh, so
You do not need a front-end page. You can remove the HTML of the front-end page.
:
<% @ Page Language = "C #" autoeventwireup = "true" codebehind = "webform1.aspx. cs" inherits = "ajaxwebapp. webform1" %>
Webform1.aspx. CS
Using system;
Using system. Data;
Using system. configuration;
Using system. collections;
Using system. Web;
Using system. Web. Security;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. Web. UI. webcontrols. webparts;
Using system. Web. UI. htmlcontrols;
Namespace ajaxwebapp
{
Public partial class webform1: system. Web. UI. Page
{
Protected void page_load (Object sender, eventargs E)
{
String result = request. querystring ["ID"]. tostring ();
// You can perform database operations here, and then return the obtained result as a string, and then parse the string. The idea is to look at the HTML of this page.
Response. Write ("A $ AA $ AAA $ aaaa ");
// The test demo is relatively simple. Refresh the page, so you can do anything on this page.
}
}
}
Demo is not the best, just to explain some problems .../
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
