利用Ajax技术实现动态显示市场名称

hebzhjg

利用Ajax技术实现动态显示市场名称

    近几天开发一套搜索农产品市场行情的工具，搜索出来的结果返回农产品名称、市场的简称、价格和日期；但是单单从市场简称不能判断该市场具体的位置等信息，因此想了一个办法：“想通过鼠标悬停方式在鼠标指向一个市场时，显示该市场的全称和市场的其他信息”，查阅一些资料一般是从数据库中读取市场简称和全称，当鼠标移动到市场简称时控制市场全称显示；这样就要求在查询市场简称的同时把市场的全称也查询出来，而我的程序中恰恰数据库中没有保存市场的全称，看来只能写一个程序从别的地方调。
   从那里调呢？正在郁闷时看到一篇关于Ajax技术实现的鼠标悬停文章，阅读后发现正好满足我的需要。仔细阅读JS脚本发现，他利用JS调用XmlHttpRequest对象（IE下，在其他浏览器下没有测试，估计有问题）然后解析返回的XML数据，再把XML数据动态的显示在页面上。OK，现在就开始动工，修改示例代码，使他满足业务需要。。。。
   发在问题：问题出现在返回XML数据后，JS解析XML数据时失败，不知道为什么，郁闷。最后没有办法简化了代码（没有用XML，调用JSP直接返回需要的文本内容）。

//ajax_market_name.js 文件代码
  var urlHTTP="ajax/ajax_market_name.jsp";
  var xmlHTTP;
  var dataDiv;
  var dataTable;
  var dataTableBody;
  var offsetEl;
  //初始化变量
  function initVars(){
    dataTableBody=document.getElementById("courseDataBody");
    dataTable=document.getElementById("courseData");
    dataDiv=document.getElementById("popup");
  }
  //创建 XMLHttpRequest 请求对象
  function createXMLHttpRequest(){
    if(window.ActiveXObject){
       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     else if(window.XMLHttpRequest){
       xmlHttp=new XMLHttpRequest();
     }
  }
  //获得鼠标指针的对象
  function getCourseData(element){
    var len=element.id.length;
    if(len
    initVars();
    createXMLHttpRequest();
    offsetEl=element;
    var url=urlHTTP+"?key="+escape(element.id);
    xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=callBack;
    xmlHttp.send(null);
  }
  
  //XML 请求回调方法
  function callBack(){
    if(xmlHttp.readystate==4){
     if(xmlHttp.status==200){
       setData(xmlHttp.responseText);
     }
   }
  }
  
  //设置返回值
  function setData(parData){
    clearData();
    setOffsets();
    //var name=xmlDom.getElementsByTagName("name")[0].firstChild.data;
    //alert("OK="+xmlDom);
    var row=createRow(parData);   
    dataTableBody.appendChild(row);
  }
  
  //创建一个 tr td 行
  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+5+"px";
    dataDiv.style.top=top+5+"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);
    }
    dataDiv.style.border="none";
  }

//sohq.jsp 中关键部分

//连接JS局脚本


   
     
   

//实现数据的 div 层



   文本内容
   //主键就是查询JSP返回数据的 key 值
   。。。。


//table 的ID必须与脚本中的对象对应


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u1/45779/showart_373347.html