Ajax suggest instance

Ajax suggest instance

In the following Ajax example, we will demonstrate how the webpage communicates with the Web server when a user inputs data to a standard HTML form.

Enter the name in the text box below:

First name:

Suggestions: Anna, Amanda

Example-HTML form

Form HTML code:

<Form>
First name: <input type = "text" id = "txt1" onkeyup = "showhint (this. Value)"/>

Suggestions: <span id = "txthint">

As you can see, this is a simple HTML form with the input field "txt1. The event attribute of the input field defines a function triggered by the onkeyup event.

The section below the form contains a span named "txthint", which acts as a placeholder for the position of the data retrieved by the Web server.

When a user inputs data, the function named "showhint ()" is executed. Function execution is triggered by the onkeyup event. In addition, the showhint function is called when you remove your finger from the keyboard when entering data in the text field.

Example-showhint () function

The showhint () function is a simple JavaScript function located in the head part of the HTML page.

This function contains the following code:

Function showhint (STR)
{

If (Str. Length = 0)
{
Document. getelementbyid ("txthint"). innerhtml = "";
Return;
}

XMLHTTP = getxmlhttpobject ()

If (XMLHTTP = NULL)
{
Alert ("your browser does not support Ajax! ");
Return;
}

VaR url = "gethint. asp ";
Url = URL + "? Q = "+ STR;
Url = URL + "& SID =" + math. Random ();
XMLHTTP. onreadystatechange = statechanged;
XMLHTTP. Open ("get", URL, true );
XMLHTTP. Send (null );
}

This function is executed whenever a text box contains characters.

If some input exists in the text field, the function will execute:

• Defines the URL (file name) of the server for data return)
• Add parameters to the URL using the content of the text box (q)
• Add a random number to prevent the server from using a cached file.
• Create an XMLHTTP object and notify the object to execute the function named statechanged when a change is triggered.
• Send an HTTP request to the server
• If the input field is empty, this function only clears the content of the txthint placeholder.

Example-getxmlhttpobject () function

The above example can call the function named getxmlhttpobject.

This function is used to create different XMLHTTP objects for different browsers.

This is the code for this function:

Function getxmlhttpobject ()
{
VaR XMLHTTP = NULL;
Try
{
// Firefox, opera 8.0 +, Safari
XMLHTTP = new XMLHttpRequest ();
}
Catch (E)
{
// Internet Explorer
Try
{
XMLHTTP = new activexobject ("msxml2.xmlhttp ");
}
Catch (E)
{
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
}
}
Return XMLHTTP;
}

Example-statechanged () function

The statechanged () function contains the following code:

Function statechanged ()
{
If (XMLHTTP. readystate = 4)
{
Document. getelementbyid ("txthint"). innerhtml = XMLHTTP. responsetext;
}
}

The statechanged () function is executed whenever the status of the XMLHTTP object changes.

When the status changes to 4 ("finished"), the content of the txthint placeholder is filled by the response text.

Ajax Javascript

This is JavaScript code, stored in the file "clienthint. js:

VaR XMLHTTP

Function showhint (STR)
{

If (Str. Length = 0)
{
Document. getelementbyid ("txthint"). innerhtml = "";
Return;
}

XMLHTTP = getxmlhttpobject ()

If (XMLHTTP = NULL)
{
Alert ("your browser does not support Ajax! ");
Return;
}

VaR url = "gethint. asp ";
Url = URL + "? Q = "+ STR;
Url = URL + "& SID =" + math. Random ();
XMLHTTP. onreadystatechange = statechanged;
XMLHTTP. Open ("get", URL, true );
XMLHTTP. Send (null );
}

Function statechanged ()
{
If (XMLHTTP. readystate = 4)
{
Document. getelementbyid ("txthint"). innerhtml = XMLHTTP. responsetext;
}
}

Function getxmlhttpobject ()
{
VaR XMLHTTP = NULL;
Try
{
// Firefox, opera 8.0 +, Safari
XMLHTTP = new XMLHttpRequest ();
}
Catch (E)
{
// Internet Explorer
Try
{
XMLHTTP = new activexobject ("msxml2.xmlhttp ");
}
Catch (E)
{
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
}
}
Return XMLHTTP;
} Ajax Server Page-Asp and PHP

There is actually no "Ajax server ". Ajax pages can be provided by any Internet server.

In the previous example, the server page called by JavaScript is a simple ASP file named "gethint. asp.

Below we list the Server Page code instances, written using ASP.

Ajax ASP instance

The Code on the "gethint. asp" page is written for IIS using VBScript. It checks an array of names and returns the corresponding names to the client:

<%
Response. expires =-1
Dim A (30)

'Assign values to the array by name
A (1) = "Anna"
A (2) = "Brittany"
A (3) = "Cinderella"
A (4) = "Diana"
A (5) = "Eva"
A (6) = "Fiona"
A (7) = "Gunda"
A (8) = "hege"
A (9) = "Inga"
A (10) = "Johanna"
A (11) = "kitty"
A (12) = "Linda"
A (13) = "Nina"
A (14) = "Ophelia"
A (15) = "Petunia"
A (16) = "Amanda"
A (17) = "Raquel"
A (18) = "Cindy"
A (19) = "Doris"
A (20) = "Eve"
A (21) = "Evita"
A (22) = "sunniva"
A (23) = "Tove"
A (24) = "unni"
A (25) = "Violet"
A (26) = "Liza"
A (27) = "Elizabeth"
A (28) = "Ellen"
A (29) = "wenche"
A (30) = "Vicky"

'Obtain the parameter q from the URL
Q = ucase (request. querystring ("Q "))

'If the length of Q is greater than 0, all hints will be searched.
If Len (q)> 0 then
Hint = ""
For I = 1 to 30
If q = ucase (mid (a (I), 1, Len (q) then
If hint = "" then
Hint = a (I)
Else
Hint = hint & "," & A (I)
End if
End if
Next
End if

'If the hint cannot be found, the output is "no suggestion"
'Or output the correct value
If hint = "" then
Response. Write ("no suggestion ")
Else
Response. Write (hint)
End if
%>