Simple ajax (cainiao)

Some people often ask me how Google, Tudou, and other auxiliary input functions are implemented. I use ajax to implement them. The description is as follows:

1. The create input page contains the following text box

<Input id = "txtSearch" style = "width: 348px" onkeyup = "GetSearchString ();" type = "text"/>

The onkeyup event is triggered when the user inputs the keyboard.

2. Create an ActiveXObject In the js file and pass the input value in txtSearch to the CkNodifyNo. ashx page for filtering. The Code

Var xmlHttp;
Function CreateXmlHttpRequest ()
{
If (window. ActiveXObject)
{
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest)
{
XmlHttp = new XMLHttpRequest ();
}
}


Function GetSearchString ()
{
Var StrSearch = document. getElementById ("txtSearch"). value;

If (StrSearch. length> 0)
{

CreateXmlHttpRequest ();
XmlHttp. open ("GET", "Hander/CkNodifyNo. ashx? SearchStr = "+ StrSearch, true );
// "/" + Document. getElementById ('drproomnum'). value, true)
XmlHttp. onreadystatechange = callback;
XmlHttp. send (null );
}
} ------------------------ ① This is part of js and the other part will be posted below

The following code filters three CkNodifyNo. ashx pages:

 

<% @ WebHandler Language = "C #" Class = "CkNodifyNo" %>
Using System;
Using System. Web;
Using System. Data;
Using System. Data. SqlClient;

Public class CkNodifyNo: IHttpHandler {

Public void ProcessRequest (HttpContext context ){
// Context. Response. ContentType = "text/plain ";
// Context. Response. Write ("Hello World ");

// ========================
//
Context. Response. Expires =-1;
If (! Object. Equals (null, context. Request. QueryString ["SearchStr"])
{
String something = context. Request. QueryString ["SearchStr"]. ToString ();
Context. Response. ContentType = "text/plain ";
// Context. Response. ContentType = "text/html ";
Context. Response. Write (getString (something ));
// Context. Response. Write ("OK ");
Context. Response. End ();
}
Else
{
Context. Response. ContentType = "text/html ";
Context. Response. Write ("NO ");
Context. Response. End ();
}
}

Private string getString (string)
{

String RetString = string. Empty;
Switch (something) // for the sake of this, there is no operation on the database, and the returned string is written dead.
{
Case "t ":
Return "the ^ tea ^ teacher ^ tee ^ tett ^ tesbook ^ tesving ^ test programe ";
Break;
Case "te ":
Return "tea ^ teacher ^ tee ^ tett ^ tesbook ^ tesving ^ test programe ";
Break;
Case "tes ":
Return "tesbook ^ tesving ^ test programe ";
Break;
Case "test ":
Return "test programe ";
Break;
Default:
Return "$ # @ $ ";
Break;

}


}

 
Public bool IsReusable {
Get {
Return false;
}
}

}

4. Accept the value on the js page and make it realistic on the page

 

// HttpRequest response data
Function callback ()
{

If (xmlHttp. readyState = 4)
{
If (xmlHttp. status = 200)
{
// Try
//{
//
// Var isOK = xmlHttp. responsetext. split ('/');
// If (isOK [0] = 'yes ')
//{
// Document. getElementById ("txtRoomID"). value = isOK [1];
//}
If (xmlHttp. responsetext. length> 0)
{
If (xmlHttp. responsetext! = '$ # @ $ ')
{
Var StrLen = xmlHttp. responsetext. split ('^ ');
// Document. getElementById ('divtest'). innerText = xmlHttp. responsetext;

Var innerText;
InnerText = "<table border = '0' cellpadding = '0' cellspacing = '0'> ";
For (var I = 0; I <StrLen. length; I ++)
{
InnerText + = "<tr> ";
InnerText + = "<td> ";
InnerText + = "<input id = '" + I + "'Type = 'text' onclick = 'getvalue (this ); 'value = '"+ StrLen [I] +"'/> ";
InnerText + = "</td> ";
InnerText + = "</tr> ";
}
InnerText + = "</table> ";
Document. getElementById ('divtest'). innerHTML = innerText;

}
Else
{
Document. getElementById ('divtest'). HtmlText = "tte ";
Document. getElementById ('divtest'). style. display = "";
}
}


}
}
}
Function getValue (obj)
{
Document. getElementById ("txtSearch"). value = obj. value;
Document. getElementById ('divtest'). style. display = "none ";
} ------------------------------ ② This is the first part of js. Place js ① In a js file.

Major achievements: