AJAX基础教程－8 Tool Tips

java 代码

package ajax.foundations_of_ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ToolTipServlet extends HttpServlet {
    private Map courses = new HashMap();

    public void init(ServletConfig config) throws ServletException {
        CourseData augusta = new CourseData(72, 7290);
        CourseData pinehurst = new CourseData(70, 7214);
        CourseData standrews = new CourseData(72, 6566);
        CourseData baltusrol = new CourseData(70, 7392);
        courses.put(new Integer(1), augusta);
        courses.put(new Integer(2), pinehurst);
        courses.put(new Integer(3), standrews);
        courses.put(new Integer(4), baltusrol);
    }

    /**
     * Handles the HTTP GET method.
     *
     * @param request
     *            servlet request
     * @param response
     *            servlet response
     */
    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        Integer key = Integer.valueOf(request.getParameter("key"));
        CourseData data = (CourseData) courses.get(key);
        PrintWriter out = response.getWriter();
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        out.println("<response></response>");
        out.println(" <par></par> " + data.getPar() + "");
        out.println("<length></length>" + data.getLength() + "");
        out.println("");
        out.close();
    }

    private class CourseData {
        private int par;

        private int length;

        public CourseData(int par, int length) {
            this.par = par;
            this.length = length;
        }

        public int getPar() {
            return this.par;
        }

        public int getLength() {
            return this.length;
        }
    }
}

js 代码

<script type=< span="">"text/javascript">
var xmlHttp;
var dataDiv;
var dataTable;
var dataTableBody;
var offsetEl;
    //创建xmlhttp对象
    function createXMLHttpRequest() {
        if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
        }
    }
    //初始化变量
    function initVars() {
        dataTableBody = document.getElementById("courseDataBody");
        dataTable = document.getElementById("courseData");
        dataDiv = document.getElementById("popup");
    }


    function getCourseData(element) {
        initVars();
        createXMLHttpRequest();
        offsetEl = element;
        var url = "ToolTip?key=" + escape(element.id);
        xmlHttp.open("GET", url, true);
        xmlHttp.onreadystatechange = callback;
        xmlHttp.send(null);
    }
    function callback() {
        if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            setData(xmlHttp.responseXML);
        }
        }
    }
    function setData(courseData) {
        clearData();
        setOffsets();
        var length =
        courseData.getElementsByTagName("length")[0].firstChild.data;
        var par = courseData.getElementsByTagName("par")[0].firstChild.data;
        var row, row2;
        var parData = "Par: " + par
        var lengthData = "Length: " + length;
        row = createRow(parData);
        row2 = createRow(lengthData);
        dataTableBody.appendChild(row);
        dataTableBody.appendChild(row2);
    }
    function createRow(data) {
        var row, cell, txtNode;
        row = document.createElement("tr");
        cell = document.createElement("td");
        cell.setAttribute("bgcolor", "#FFFAFA");
        cell.setAttribute("border", "0");
        txtNode = document.createTextNode(data);
        cell.appendChild(txtNode);
        row.appendChild(cell);
        return row;
    }
    function setOffsets() {
        var end = offsetEl.offsetWidth;
        var top = calculateOffsetTop(offsetEl); //计算定点坐标
        dataDiv.style.border = "black 1px solid";
        dataDiv.style.left = end + 15 + "px";
        dataDiv.style.top = top + "px";
    }
    function calculateOffsetTop(field) {
        return calculateOffset(field, "offsetTop");
    }
    function calculateOffset(field, attr) {
        var offset = 0;
        while(field) {
        offset += field[attr];
        field = field.offsetParent;
        }
        return offset;
    }
    function clearData() {
        var ind = dataTableBody.childNodes.length;
        for (var i = ind - 1; i >= 0 ; i--) {
        dataTableBody.removeChild(dataTableBody.childNodes[i]);
        }
    dataDiv.style.border = "none";
    }
</script>