AJAX suggest instance

AJAX suggest instance

In the following AJAX example, we show how a Web page communicates with a Web server when the user enters data into a standard HTML form. Enter the first name in the text box below:

Suggestions:anna, Amanda example explanation-HTML form

HTML code for the form: <form> 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 an input field named "Txt1." The event property of the input field defines a function that is triggered by the onkeyup event.

The following paragraph in the form contains a span called "Txthint", which acts as a placeholder for the location of data retrieved by the Web server.

When a user enters data, a function named "Showhint ()" is executed. The execution of the function is triggered by the "onkeyup" event. It is also necessary to note that when the user enters data in a text field, the function showhint is invoked when the finger is moved away from the keyboard key. Example explanation-showhint () function

The Showhint () function is a very simple JavaScript function located in the head section of the HTML page.

This function contains the following code: function Showhint (str) {if (str.length==0) {document.getElementById ("Txthint"). innerhtml= ""; 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 executes whenever a character enters a text box.

If there is some input in the text field, the function executes: the URL (filename) of the server that defines the return data uses the contents of the text box to add a random number to the URL (q) to prevent the server from using a cached file to create a XMLHTTP object. And tell this object to execute a function called statechanged when a change is triggered send an HTTP request to the server if the input field is empty, this function will only empty the Txthint placeholder's content example explanation-getxmlhttpobject () function

The above example invokes a function named Getxmlhttpobject ().

The role of this function is to solve the problem of creating different XMLHTTP objects for different browsers.

This is 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 activexobj ECT ("Microsoft.XMLHTTP"); } return xmlHttp; Example explanation-statechanged () function

The statechanged () function contains the following code: function StateChanged () {if (xmlhttp.readystate==4) {document.getElementById ("Txthint"). Innerhtml=xmlhttp.responsetext; } }

The statechanged () function executes whenever the state of the XMLHTTP object changes.

When the state changes to 4 (finish), the contents of the Txthint placeholder are populated with 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.getelementbyi D ("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); The 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 ();} C Atch (e) {//Internet Explorer try {xmlhttp=new ActiveXObject ("Msxml2.xmlhttp");} catch (e) {xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP"); } return xmlHttp; AJAX Server Pages-ASP and PHP

In fact, there is no "AJAX server." AJAX pages can be serviced by any Internet server.

The server page called by JavaScript in the example in the previous section is a simple ASP file called "gethint.asp."

Here's a list of examples of this server page code, written using ASP. AJAX ASP Instance

The code in the Gethint.asp page is written for IIS using VBScript. It examines an array of names and then returns the corresponding name to the client: <% Response.expires=-1 Dim A (30) ' assigns a value to the name of 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 (a) = "Johanna" A (one) = "Kitty" a () = "Linda" A ( = "Nina" (a) = "Ophelia" A () = "Petunia" a () = "Amanda" A (a) = "Raquel" A (m) = "Cindy" a () = "Doris" A (a) = "Eve" A (21) = "Evita" A ("Sunniva" a () = "Tove" A () = "Unni" a () = "Violet" a "=" Liza "A (a) =" Elizabeth "A (a) =" Ellen "A (29) =" Wenche "a" = "Vicky" gets the parameter Q q=ucase (Request.QueryString ("Q") from the URL) ' If q is longer than 0, find all hint if Len (q) >0 then ' hint= ' " For I=1 to If Q=ucase (mid (A (i), 1,len (q)) then if hint= "" then hint=a (i) Else Hint=hint & "," & A (i) End If E nd If Next End if ' if hint is not found, output ' no suggestion ' or output the correct value if hint= ' "Then Response.Write (" no suggestion ") Else RESPONSE.WR ITE (hint) End If%>