Ajax request 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:

Suggestions:No suggestion

Example-HTML form

Form htmlCode:

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

<P> suggestions: <SpanId = "txthint"> </Span> </P>
 

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;
}

VaRURL= "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.