ajax弹出提示信息

ajax弹出提示信息

1、  输入域：

<h2>工具提示</h2>

    <hr>

    <a href="#" onmouseover="over(0)" onmouseout="out()">物品一</a><br><br>

    <a href="#" onmouseover="over(1)" onmouseout="out()">物品二</a><br><br>

    <a href="#" onmouseover="over(2)" onmouseout="out()">物品三</a><br><br>

   

    <div id="tip" style="position:absolute;display:none;border:1px;border-style:solid;">

        <table id="tipTable" border="0" bgcolor="#ffffee">

        <tr align="center">

            <td><img id="photo" src="" height="80" width="80"></td>

        </tr>

         <tr>

            <td></td>

        </tr>

        <tr>

            <td></td>

        </tr>

        </table>

</div>

 

2、  JavaScript脚本：

    <script type="text/javascript">

    var xmlHttp;

    var x, y;  //记录事件发生时的鼠标位置

       //创建XMLHttpRequest对象

       function createXMLHttpRequest() {

           if(window.ActiveXObject) {

              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

           } else if (window.XMLHttpRequest) {

              xmlHttp = new XMLHttpReuqest();

           }

       }

      

       //通过AJAX取得提示信息

       function over(index) {

           x = event.clientX;

           y = event.clientY;

           //创建XMLHttpRequest对象

           createXMLHttpRequest();

           //将状态触发器绑定到一个函数

           xmlHttp.onreadystatechange = process;

           //建立一个对服务器的调用

           xmlHttp.open("GET", "CreateTip?index=" + index);

           //发送请求

           xmlHttp.send(null);

       }

      

       //处理从服务器返回的xml文档

       function process() {

           //定义一个变量用于存放从服务器返回的响应结果

           var result;

           if(xmlHttp.readyState == 4) { //如果响应完成

              if(xmlHttp.status == 200) { //如果返回成功

                  //取出服务器返回的XML文档所有shop标签的子节点

                  result = xmlHttp.responseXML.getElementsByTagName("shop");

                  //显示工具条

                  document.all.tip.style.display = "block";

                  document.all.tip.style.top = y;

                  document.all.tip.style.left = x + 10;

                  document.all.photo.src = result[0].childNodes[2].firstChild.nodeValue;

                  document.all.tipTable.rows[1].cells[0].innerHTML="商品名称:"+result[0].childNodes[0].firstChild.nodeValue;

                  document.all.tipTable.rows[2].cells[0].innerHTML="商品价格:"+result[0].childNodes[1].firstChild.nodeValue;            

              }

           }

       }

      

       function out() {

           document.all.tip.style.display = "none"; 

       }

</script>

 

3、  Servlet文件：（SelProvince.java文件中的doGet方法）

    public void doPost(HttpServletRequest request, HttpServletResponse response)

           throws ServletException, IOException {

 

       //虚拟一个商品列表

       String[][] shop = {{"商品一","90","photo/photo1.jpg"},

                        {"商品二","190","photo/photo2.jpg"},

                        {"商品三","290","photo/photo3.jpg"}};

       //获取页面参数

       int index = Integer.parseInt(request.getParameter("index"));

      

       response.setContentType("text/xml");

       response.setCharacterEncoding("UTF-8");

       PrintWriter out = response.getWriter();  

      

       //XML文件返回客户端

       out.println("<shop>");

       out.println("<name>"+shop[index][0]+"</name>");

       out.println("<price>"+shop[index][1]+"</price>");

       out.println("<photo>"+shop[index][2]+"</photo>");

       out.println("</shop>");

       out.flush();

       out.close();

    }

 

4、  web.xml文件配置：

  <servlet-mapping>

    <servlet-name>CreateTip</servlet-name>

    <url-pattern>/CreateTip</url-pattern>

  </servlet-mapping>

  <servlet>

    <servlet-name>CreateTip</servlet-name>

    <servlet-class>com.solid.util.CreateTip</servlet-class>

  </servlet>