一个超级简单的AJAX实例
学习AJAX时,作了以下这个简单的AJAX例子,没用任何动态语言,完全HTML和JAVASCRIPT,至于服务器源也就小偷了一下www.cc168.com.cn(长城证券)的开放式基金每日净值查询页面。用XMLHTTP对象获取到WEB页面HTTP内容后，采用Split的方式进行截取，取出自己需要的web部分，然后绑定到页面的div上。CSS样式表也就远程使用了cc168.com.cn的。
<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.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\">"); var OpenValue = OpenValue.split("</td></tr>"); document.getElementById("out").innerHTML = OpenValue; document.getElementById("flag").innerHTML = "查询结束"; document.getElementById("outgroup").style.display = "block"; }}catch (e) { document.getElementById("flag").innerHTML = "回调处理错误:" + e;} } //创建日期选择下拉框 function CreateDateSelect() {var html = []; for(var iYear=2005; iYear<=2009; iYear ++){ for( var iMonth=1; iMonth<=12; iMonth ++ ) { for( var iDay=1; iDay<=31; iDay ++ ) { html = "<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> </form></body></html> 如果使用的是firefox的话，在open之前加上下面的代码
if(window.XMLHttpRequest) // firefox{ try { netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); } catch (exception) { alert(exception); }}
不过日期的list是有点问题的，全部弄为1~31号了，本例只是说明了一个AJAX的应用而已。
页:
[1]