Ajax example Tutorial: simulate dynamic google prompts

Bkjia.com Ajax tutorialThe implementation method is very simple. The procedure is as follows: Click the text box to obtain the x and y of the text box. After the content is entered, the request will be sent to the server after a delay of 1-2 seconds ;. after the Server query, return to the client. The client displays the DIV, locates the DIV position based on the xy value obtained by 1, and fills the returned content in the DIV.
The Code is as follows:

Reference content is as follows: <Input id = "Text1" style = "width: 300px; height: 21px;" type = "text" onkeyup = "getA ();" onclick = "getxy (this ); "/> <Input id = "Text1" style = "width: 300px; height: 21px;" type = "text" onkeyup = "getA ();" onclick = "getxy (this ); "/>

Reference content is as follows: // Getxy () code to determine the position of the div to be displayed Function getxy () // getxy () code to determine the position of the div to be displayed { X = e. offsetTop; Y = e. offsetLeft; While (ee = e. offsetParent) { X + = e. offsetTop; Y + = e. offsetLeft; } } // After user input, the submission can be delayed by 1-2 seconds to avoid server load. Function getQList () { Var time = new Date (). getTime (); Var val = document. getElementById ("Text1"). value; If (val! = Null | val! = "" | Val. length! = 0) { Var send = "action = get1 & time =" + time + "& val =" + val; MyRequest ("../Temp. aspx", send, getQListhandle ); } } // The processing function creates a table and fills it in the div. The changeColor () in the code is used to change the color after moving the mouse. Function getQListhandle () { Var getXML = null; If (req. readyState = 4) { If (req. status = 200) { GetXML = req. responseXML; Var innerHTML = null; Var newslist = getXML. getElementsByTagName ("news "); If (newslist! = Null) & (newslist. length! = 0 )) { InnerHTML = "<table style = \" font-size: 9pt; width: 100% \ "cellpadding = \" 0 \ "cellspacing = \" 0 \ "border = \" 0 \ "> \ r \ n "; For (var I = 0; I <newslist. length; I ++) { Var news = newslist [I]; Var id = (news. childNodes [0]. firstChild = null )? "": News. childNodes [0]. firstChild. data; Var caption = (news. childNodes [1]. firstChild = null )? "": News. childNodes [1]. firstChild. data; InnerHTML + = "<tr onmouseover = \" changecolor1 (this); \ "onmouseout = \" changecolor2 (this); \ "> "; InnerHTML + = "<td height = '25' style = \" cursor: hand \ "onclick = \" look2 ('"+ id + "'); \ ">" + caption + "</td> "; InnerHTML + = "</tr> "; } InnerHTML + = "</table> \ r \ n "; } Else { // InnerHTML + = "no data temporarily "; Document. getElementById ("list"). innerHTML = ""; Document. getElementById ("list"). style. display = "none "; } SetLocal (); // note that the position of the Div is located here. } } } // (3) locate the div so that the div is displayed below the text box and the width is equal to the width of the text box. Function setLocal () { Var list = document. getElementById ("list "); List. style. top = x + 21; List. style. left = y; } // The server code will not be described in detail. The basic principle is to achieve this.