`
Jason(aijun)
  • 浏览: 84718 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

一个简单实用的AJAX例子

AjaxCSSC#CC++ 
阅读更多

学习AJAX时,作了以下这个简单的AJAX例子,没用任何动态语言,完全HTML和JAVASCRIPT,至于服务器源也就小偷了一下www.cc168.com.cn(长城证券)的开放式基金每日净值查询页面。
用XMLHTTP对象获取到WEB页面HTTP内容后，采用Split的方式进行截取，取出自己需要的web部分，然后绑定到页面的div上。CSS样式表也就远程使用了cc168.com.cn的。
^_^，希望长城证券能够宽恕这种偷盗行为。程序员的事，能算“偷”吗？最多算个窃. :- )
原理很简单，但是感觉这种方式比较有用。如果自己网站想提供功能，又不想做数据web服务的话，不妨窃之。

<html>
<head>
<link href="http://www.cc168.com.cn/css/index.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://www.cc168.com.cn/css/framework.css" type="text/css"/>
 <script language="javascript">
 
 window.onload = function()
 {
  CreateDateSelect();
 }

 var xmlHttp = false;
 var e;
 
 //创建XMLHTTP对象
 function getXMLHTTPObj()
 {
  var C = null;
  try
  {
   C = new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch(e)
  {
   try
   {
    C = new ActiveXObject("Microsoft.XMLHTTP");
   }
   catch(sc)
   {
    C = null;
   }
  }
  
  if( !C && typeof XMLHttpRequest != "undefined" )
  {
   C = new XMLHttpRequest();
  }
  
  return C;
 }
 
 //调用远程方法
 function callServer(e)
 { 
  try
  {
   if( xmlHttp && xmlHttp .readyState != 0 )
   {
    xmlHttp.abort();
   }
   
   xmlHttp = getXMLHTTPObj();
   
   if( xmlHttp )
   {
    document.getElementById("outgroup").style.display = "none";
    //获取查询日期
    var dateSele = e.options[e.selectedIndex].value;
    document.getElementById("date").innerHTML = dateSele + " 开放式基金净值";

    //构造查询连接字符串
    var url = "http://www.cc168.com.cn/service/FundNetValue.jsp?newEndDate=" + dateSele;
    
    //打开连接
    xmlHttp.open("GET", url, true);
    //设置回调函数
    xmlHttp.onreadystatechange = updatePage;
    //发送请求
    xmlHttp.send(null);
   }
   else
   {
    document.getElementById("flag").innerHTML = "XMLHTTP对象创建失败";
   }
  }
  catch (e)
  {
   document.getElementById("flag").innerHTML = "查询错误:" + e;
  }
 }
 
 //回调处理函数
 function updatePage()
 {
  try {
   if (xmlHttp.readyState == 1)
   {
    document.getElementById("flag").innerHTML = "正在加载连接对象......";
   }

   if (xmlHttp.readyState == 2)
   {
    document.getElementById("flag").innerHTML = "连接对象加载完毕。";
   }

   if (xmlHttp.readyState == 3)
   {
    document.getElementById("flag").innerHTML = "数据获取中......";
   }

   if (xmlHttp.readyState == 4)
   {
    var response = xmlHttp.responseText;
    var OpenValue = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[1];
    var OpenValue = OpenValue.split("</td></tr>")[0];
    //alert(OpenValue);
    document.getElementById("out").innerHTML = OpenValue;
    
    var OpenValue1 = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[2];
    var OpenValue1 = OpenValue1.split("</td></tr>")[0];
    document.getElementById("out1").innerHTML = OpenValue1;
    
    var OpenValue2 = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[3];
    var OpenValue2 = OpenValue2.split("</td></tr>")[0];
    document.getElementById("out2").innerHTML = OpenValue2;
    
    var OpenValue3 = response.split("<td class=\"info-head\" width=\"400\" valign=\"top\">")[4];
    var OpenValue3 = OpenValue3.split("</td></tr>")[0];
    document.getElementById("out3").innerHTML = OpenValue3;
    document.getElementById("flag").innerHTML = "查询结束";

                                document.getElementById("outgroup").style.display = "";
   }
  }
  catch (e)
  {
      document.getElementById("flag").innerHTML = "回调处理错误:" + e;
  }
 }

 //创建日期选择下拉框
 function CreateDateSelect()
 {

  var html = [];
         
  for(var iYear=2005; iYear<=2006; iYear ++)
  {
   for( var iMonth=1; iMonth<=12; iMonth ++ )
   {
    for( var iDay=1; iDay<=31; iDay ++ )
    { 
    html[html.length] = "<option value=\""  + iYear + "\-" + iMonth + "\-" + iDay + "\">" + iYear + "年" + iMonth + "月" + iDay + "日" + "</option>";
    }
   }
  }
      
  document.getElementById("dateSele").innerHTML = "<select name=\"dateSele\" id=\"dateSele\" onchange=\"callServer(this);\">" + html.join("") + "</select>";
 } 
 </script>
</head>
<body>
 <form>
  <div>请选择交易日期:</div>
  <div>
   <div id="dateSele" align=left>
   </div>
   <div id="flag" align=right></div>
  </div>
  <div id="date"></div>
  <div id="outgroup" style="display:None">
      <div id="out"></div>
      <div id="out1"></div>
      <div id="out2"></div>
      <div id="out3"></div>
  </div>
 </form>
</body>
</html>

代码讲解：
1、代码主要分为JS处理和BODY两大部分（废话 ^_^）
2、BODY部分用了几个层：dataSele : 显示日期选择下拉框；flag : 状态标示；date: 显示选中的日期；outgroup：显示基金的净值结果组；out 到 out3 则是几种类型的开放式基金净值结果
3、JS部分：页面加载处理：页面初始化设置；创建XMLHTTP对象：按不同客户端浏览器创建不同的XMLHTTP连接对象；调用远程方法：构造连接字符串，发送请求；回调处理函数：判断连接对象的返回状态，进行状态显示，完全获取结果后，进行DOM方式的层赋值；创建日期选择下拉框：动态的创建日期选择下拉框，并为其加上选择事件。

分享到：
| DWR与Struts整合收藏
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics