一个简单实用的AJAX例子
<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>?