實現刷新的方法主要是Ajax，本文檔實現Ajax有兩個方法（Jquery 和 W3C的JS方法）；其次，使用JS也可以實現刷新數據不刷新頁面（詳見其他刷新頁面方法JS實現）；對於CallbackRefresh的方法也可以實現刷新。
上面的方法都是在頁面不刷新情況下刷新數據，Iframe實現的刷新會刷新頁面，此方法可以借鑒。
Ajax的實現：
Javascript方式：
<script type="text/javascript"> function loadXMLDoc(str) { var xmlhttp; var txt, x, i; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { xmlDoc = xmlhttp.responseXML; //xmlDoc = xmlhttp.responseText; txt = ""; x = xmlDoc.getElementsByTagName("TagName"); for (i = 0; i < x.length; i++) { if (x[i].childNodes[0].nodeValue.contains(str)) { txt = txt + x[i].childNodes[0].nodeValue; } } document.getElementById("txtHint").innerHTML = txt; } } xmlhttp.open("GET", "url", true); xmlhttp.send(); }
jquery：
<script type="text/javascript"> function loadXMLDoc(str) { $("div").ajaxError(function(){ alert("An error occurred!"); }); $("#txt").ajaxStart(function(){ alert("AJAX 請求已成功完成"); }); $("div").ajaxSuccess(function(){ alert("AJAX 請求已成功完成"); }); $("#txt").ajaxComplete(function(){ alert("AJAX 請求已成功完成"); }); $("button").click(function(){ $("#txt").load("url"); }); }
URL的使用：
Txt：
如果是 e.txt
xmlDoc = xmlhttp.responseText;
XML：
如果是e.xml
xmlDoc = xmlhttp.responseXML; x = xmlDoc.getElementsByTagName("TagName"); x[i].childNodes[0].nodeValue
asp頁面：
如果是Asp頁面 可以用下面方法調用方法獲取返回值：
URL："WebForm1.aspx?city=" + "beijing"
頁面方法一：
在被請求頁面的WebForm1.aspx.cs 的Page_Load 里面寫：
protected void Page_Load(object sender, EventArgs e) { //獲取傳遞過來的參數 string city =Request.QueryString["city"]; Response.Clear(); //判斷城市名 switch (city) { case "beijing": //填充相關的區域 Response.Write("朝陽,海淀,東城,西城"); break; case "shanghai": Response.Write("浦東,靜安,虹口,徐匯"); break; case "jinan": Response.Write("歷下,歷城,市中,天橋"); break; } }
頁面方法二：
直接在被請求頁面WebForm1.aspx 頁面寫代碼
<% response.write("<table>") response.write("<tr><td><b>" & "asda" & "</b></td>") response.write("<td>" & "asdad" & "</td></tr>") response.write("</table>") %>
其他的刷新頁面方法：
方法1：
CallbackRefresh：
頁面調用方法
<script type="text/javascript"> function FillData() { var city=document.getElementById("TextBox1").value; <% =this.ClientScript.GetCallbackEventReference(this,"city","FillDll",null) %>; } function FillDll(strcity) { document.getElementById("DropDownList1").options.length=0; var indexofcity; var city; //切割傳遞來的字符串 while(strcity.length>0) { //判斷是否是最后一個字符串 indexofcity=strcity.indexOf(","); if(indexofcity >0) { city=strcity.substring(0,indexofcity); strcity=strcity.substring(indexofcity+1); //填充下拉框 document.getElementById("DropDownList1").add(new Option(city,city)); } else { // 如果是最后一個字符串 document.getElementById("DropDownList1").add(new Option(strcity,strcity)); break; } }; } </script>
后台代碼：要繼承ICallbackEventHandler （重要）
public partial class _Default : System.Web.UI.Page,ICallbackEventHandler { private string _data; protected void Page_Load(object sender, EventArgs e) { } #region ICallbackEventHandler 成員 public string GetCallbackResult() { //返回處理后的數據 return _data; } public void RaiseCallbackEvent(string eventArgument) { //判斷傳遞過來的參數 switch (eventArgument) { case "北京": _data = "朝陽,海淀,東城,西城"; break; case "上海": _data = "浦東,靜安,徐匯,虹口"; break; case "濟南": _data = "歷城,歷下,市中,天橋"; break; } } #endregion }
JS 實現局部刷新： 后台代碼如下：
protected void Page_Load(object sender, EventArgs e) { //創建字符串連接對象 StringBuilder myscript = new StringBuilder(); //使用字符串組織一個JavaScript腳本方法 myscript.Append("function seekCity() {\n"); myscript.Append("var city=document.getElementById('TextBox1').value; \n"); myscript.Append("switch(city) {\n"); myscript.Append("case '北京': \n"); myscript.Append("FillData('" + GetCityStr("北京") +"'); \n"); myscript.Append("break; \n"); myscript.Append("case '上海': \n"); myscript.Append("FillData('" + GetCityStr("上海") + "'); \n"); myscript.Append("break; \n"); myscript.Append("case '濟南': \n"); myscript.Append("FillData('" + GetCityStr("濟南") + "'); \n"); myscript.Append("break; }\n"); myscript.Append(" }\n"); //使用注冊腳本方法在頁面的客戶端，注冊這個字符串編寫的腳本方法。 Page.ClientScript.RegisterClientScriptBlock(typeof(string), "seekCity", myscript.ToString(),true); } //通過獲取城市名，返回城市的區縣字符串 private string GetCityStr(string INcity) { string city=""; switch (INcity) { case "北京": city = "朝陽,海淀,東城,西城"; break; case "濟南": city = "歷城,歷下,市中,天橋"; break; } //返回包含區縣的 字符串連接 return city; }
頁面層直接調用：
onclick="seekCity()"
切割字符：
function FillData(strcity) { document.getElementById("DropDownList1").options.length=0; var indexofcity; var city; //切割傳遞來的字符串 while(strcity.length>0) { //判斷是否是最后一個字符串 indexofcity=strcity.indexOf(","); if(indexofcity >0) { city=strcity.substring(0,indexofcity); strcity=strcity.substring(indexofcity+1); //填充下拉框 document.getElementById("DropDownList1").add(new Option(city,city)); } else { // 如果是最后一個字符串 document.getElementById("DropDownList1").add(new Option(strcity,strcity)); break; } }; }
Iframe實現局部刷新：
要求刷新頁面JS代碼：
<script language="javascript"> function Search() { var city=document.getElementById("TextBox1").value; if(city !="") { document.getElementById("iframe1").src="myframe.aspx?city=" +city; } }
被請求頁面代碼：
<asp:DropDownList ID="DropDownList1" runat="server" Width="154px"> protected void Page_Load(object sender, EventArgs e) { //獲取傳遞過來的參數 string city = Request.QueryString["city"]; //判斷城市名 switch (city) { case "北京": //填充相關的區域 DropDownList1.Items.Clear(); DropDownList1.Items.Add("朝陽"); DropDownList1.Items.Add("海淀"); DropDownList1.Items.Add("東城"); DropDownList1.Items.Add("西城"); break; } }