Ajax initial experience (1)

Ajax (Asynchronous JavaScript and XML), in my understanding, is JavaScript and XML executed asynchronously. Its core is XMLHttpRequest, which is a combination of multiple technologies, including JavaScript, XHTML and CSS, Dom, XML and xstl, and XMLHttpRequest. The experience it brings to users is the refreshing of pages. The simplest application is like a friendly prompt that appears when you enter the recipient's email address during mail sending in Gmail.

Ajax websites:
Http://www.schwarz-interactive.de/
Chinese discussion group on Google in Ajax:
Http://groups.google.com/group/AjaxCn
E:
Http://groups.google.com/group/ajaxpro

Next I will do thisProgram, Enter a character in a text box, and the content below the text box prompts the most matching. The result is similar to the following prompt when you enter the email address in Gmail. The prompt here is to extract the content of the country field in the northmers table of the northwind database in SQL Server 2000. A prompt such as loading... is displayed before the data is loaded.

1. Download http://www.schwarz-interactive.de/download/5.11.4.2.zip first
After decompression, the ajaxpro. dll and ajaxpro.2.dll files are generated. The ajaxpro.2.dll file is for. NET 2.0.
I use vs2003.net, so I use ajaxpro. dll.
2. Copy ajaxpro. DLL to the bin directory of the Web application, and add a reference to ajaxpro. dll in the project.
3. Add the following content to the <system. Web> section of Web. config:
<Httphandlers>
<Add verb = "post, get" Path = "ajaxpro/*. ashx" type = "ajaxpro. ajaxhandlerfactory, ajaxpro"/>
</Httphandlers>
It means to map the http post and http get requests of files with the file extension. ashx under the ajaxpro path to the ajaxpro. ajaxhandlerfactory class, which is in the ajaxpro assembly in the file ajaxpro. dll. For more information about httphandlers, see msdn>

4. Add a web form test. aspx, switch to the CS file, and add reference:

Using System;
Using System. Data;
Using System. Data. sqlclient;

Using Ajaxpro;

5. Register in page_load:

Private   Void Page_load ( Object Sender, system. eventargs E)
{
Utility. registertypeforajax ( Typeof (TEST ));
}

Here, test is the complete namespace test of the class where page_load is located ).

6. The country field is introduced in the MERs table in the northwind database of SQL Server 2000.
CodeAs follows:

[Ajaxmethod]
Public   String Getdata ( String Inputstring)
{
System. Threading. thread. Sleep ( 1000 ); // Process sleep (latency) 1 second
String Temp =   "" ;
If (Inputstring ! =   "" )
{
String Sqlstr =   " Select Country from MERs where country like '% "   + Inputstring + " %' " ;
Sqlconnection Conn =   New Sqlconnection ( @" Server =.; database = northwind; user id = sa; Password = 123; persist Security info = true; " );
Sqlcommand cmd =   New Sqlcommand (sqlstr, Conn );
Conn. open ();
Sqldatareader myreader = Cmd. executereader ();
Try  
{
While (Myreader. Read ())
{
Temp + = Myreader. getstring ( 0 ). Tolower (). Replace (inputstring. tolower (), " <Font color = Red> " + Inputstring + " </Font> " ) + " <Br> " ; // Replace the matched content with red
}
}
Finally  
{
Myreader. Close ();
Conn. Close ();
}
}
Return Temp;
}

Note: before this method, add [ajaxmethod ].
System. Threading. thread. Sleep (1000 );
To see the effect of loading, I intentionally delay the process by 1 second.

7. Go to the HTML editing view of test. aspx and add the following code to <form>:

<! -- Loading text layer, hidden by default -->
< Div ID = "Loadinfo" Style = "Visibility: hidden; position: absolute; left: 168px; top: 19px; Background-color: red; color: White; font-family: verdana; font-size: 12px;" > Loading </ Div >
< Input Type = "Text" ID = "Txtinput" Onkeyup = "Javascript: dotest2 (); void (0 );" >
<! -- Display the layer of matched content, hidden by default -->
< Div ID = "Layer1" Style = "Position: absolute; left: 10px; top: 38px; width: 150px; Height: 102px; Z-index: 1; Background-color: # ecf5ff; Border: 1px solid #666666; visibility: hidden; overflow: auto ;" > </ Div >

8. Add the following code in the

< Script Type = " Text/JavaScript " Defer = " Defer " >
Test. Test. onloading =   Function (B) {
VaR L = Document. getelementbyid ( " Loadinfo " );
L. style. Visibility = B ?   " Visible " : " Hidden " ;
}
Function Dotest2 ()
{
Test. Test. getdata (document. getelementbyid ("Txtinput"). Value, dotest2_callback );
}
Function Dotest2_callback (RES)
{
VaR P = Res. value;
VaR Layer1 = Document. getelementbyid ( " Layer1 " );
Layer1.style. Visibility = (P =   "" ) ?   " Hidden " : " Visible " ;
Document. getelementbyid ( " Layer1 " ). Innerhtml = P;
}
</ Script >

Here, Test. Test. onloading Is In The namespace. Class. onloading format, and onloading is written in Ajax. Parameter B is a bool value. When the requested class is being executed, the result is true; otherwise, the value is false. Use a ternary expression to control the display and hiding of the loading layer (ID: loadinfo.
In Test. Test. getdata, getdata should be consistent with the class name used to retrieve data in the background Code. However, note that the dotest2_callback function parameter RES is used to return the result.
In dotest2_callback (RES), display the obtained data to layer 1. Here, when the returned content is empty, layer1 layer is not displayed.

9. complete code ajaxtest.rar after completion

10. Compile and run the program. Enter the content to see the effect.