Ajax与C#应用详细实例
实现刷新的方法主要是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; } }
