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");
});
}Txt：
如果是 e.txt
xmlDoc = xmlhttp.responseText;
XML：
如果是e.xml
xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName("TagName");
x[i].childNodes[0].nodeValueasp页面：
如果是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 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;
}
}