Ajax implementation prompt Function

Anyone who has purchased online shopping knows that when we buy something online, if we place the mouse over the image, a box will pop up to introduce the product information, next, we will simulate this function.

 

First write a shop. js

 

// JavaScript documentvar XMLHttpRequest; function createxmlhttprequest () {If (window. activexobject) {XMLHttpRequest = new activexobject ("Microsoft. XMLHTTP ");} else (window. XMLHttpRequest) {XMLHttpRequest = new XMLHttpRequest () ;}} function over (INDEX) {// alert ("over execution"); X = event. clientx; y = event. clienty; createxmlhttprequest (); XMLHttpRequest. onreadystatechange = processor; XMLHttpRequest. open ("get", "shopservlet? Index = "+ index, true); XMLHttpRequest. send (null);} function processor () {// alert ("1"); If (XMLHttpRequest. readystate = 4) {// alert ("2"); var result; If (XMLHttpRequest. status = 200) {// alert ("2"); Result = XMLHttpRequest. responsexml. getelementsbytagname ("Shop"); document. getelementbyid ("tip "). style. display = "Block"; document. getelementbyid ("tip "). style. top = y; document. getelementbyid ("tip "). style. left = x + 10; document. getelementbyid ("gname "). innerhtml = "Product Name:" + result [0]. childnodes [0]. firstchild. nodevalue; document. getelementbyid ("uplice "). innerhtml = "product price:" + result [0]. childnodes [1]. firstchild. nodevalue; // alert ("Product Name:" + result [0]. childnodes [0]. firstchild. nodevalue) ;}} function out () {doucment. getelementbyid ("tip "). style. display = "NONE ";}

Then write a JSP page, shop. jsp

 

Code in body:

<H2> Use ajax to implement the prompt function </H2> <HR> <a href = "#" onmouseover = "over (0)" onmouseout = "Out () "> Item 1 </a> <a href =" # "onmouseover =" over (1) "onmouseout (" Out () ")> product 2 </a> <a href = "#" onmouseover = "over (2)" onmouseout ("Out ()")> item 3 </a> <Div id = "tip" style = "position: absolute; display: none; Border: 1px; border-style: solid; "> <Table id =" tiptable "border =" 0 "bgcolor =" # ffffee "> <tr> <TD id =" gname "> </TD> </tr> <tr> <TD id = "uplice"> </TD> </tr> </table>

Finally, write a Servlet

Public class shopservlet extends httpservlet {public void destroy () {super. destroy (); // just puts "Destroy" string in log // put your code here} public void doget (httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {This. dopost (request, response);} public void dopost (httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {system. out. println ("servlet execution"); response. setcontenttype ("text/XML"); response. setcharacterencoding ("UTF-8"); string [] [] info = {"apple", "10" },{ "banana", "8" },{ "Pear ", "4" }}; int Index = integer. valueof (request. getparameter ("Index"); printwriter PW = response. getwriter (); PW. println ("<shop>"); PW. println ("<Name>" + info [Index] [0] + "</Name>"); PW. println ("<price>" + info [Index] [1] + "</price>"); PW. println ("</shop>"); PW. flush (); PW. close ();}/*** initialization of the servlet. <br> ** @ throws servletexception if an error occurs */Public void Init () throws servletexception {// put your code here }}

The running interface is as follows: