首页 > 代码库 > Ajax实时局部刷新
Ajax实时局部刷新
//Ajax实现局部刷新
<script type="text/javascript">
var xmlhttp;
function getData()
{
//获取用户填写的名称
var city=document.getElementById("txt").value;
//创建异步调用对象
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
//将对象状态与事件相关联
xmlhttp.onreadystatechange=statechange;
//加载要链接的页面
xmlhttp.Open("POST","datapage.aspx?city=" +city,true);
//发送请求
xmlhttp.Send();
}
function statechange()
{
//判断异步调用是否已经完成
if(xmlhttp.readystate==4)
{
//判断完成的提示代码是否是OK状态
if(xmlhttp.status==200)
{
//将返回数据作为参数，传递给填充方法
FillData(xmlhttp.responseText);
}
}
}
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
{
// 如果是最后一个字符串
lastcity=strcity.substring(0,2);
document.getElementById("DropDownList1").add(new Option(lastcity,lastcity));
break;
}
};
}
</script>
//第二个页面
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;
}
}
//-------------------------------------------------------------------------------使用回调技术实现局部刷新
<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>
private string _data;
public string GetCallbackResult()
{
//返回处理后的数据
return _data;
}
public void RaiseCallbackEvent(string eventArgument)
{
//判断传递过来的参数
switch (eventArgument)
{
case "北京":
_data = "http://www.mamicode.com/朝阳,海淀,东城,西城";
break;
case "上海":
_data = "http://www.mamicode.com/浦东,静安,徐汇,虹口";
break;
case "济南":
_data = "http://www.mamicode.com/历城,历下,市中,天桥";
break;
}
}
-------------------------------------------------------------------------------------Iframe实现局部刷新
<script language="javascript">
function Search()
{
var city=document.getElementById("TextBox1").value;
if(city !="")
{
document.getElementById("iframe1").src="http://www.mamicode.com/myframe.aspx?city=" +city;
}
}
</script>
<iframe src="http://www.mamicode.com/myframe.aspx" style="TEXT-ALIGN: center" id="iframe1" width="100%" height="100%" frameborder="0" scrolling="no"/>
第二页面myframe.aspx
<div style="TEXT-ALIGN: center">
<asp:DropDownList ID="DropDownList1" runat="server" Width="154px">
</asp:DropDownList></div>
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;
case "上海":
DropDownList1.Items.Clear();
DropDownList1.Items.Add("浦东");
DropDownList1.Items.Add("静安");
DropDownList1.Items.Add("虹口");
DropDownList1.Items.Add("徐汇");
break;
case "济南":
DropDownList1.Items.Clear();
DropDownList1.Items.Add("历下");
DropDownList1.Items.Add("历城");
DropDownList1.Items.Add("市中");
DropDownList1.Items.Add("天桥");
break;
}
}
---------------------------------------------------------------------------------使用脚本方法实现局部刷新
<script type="text/javascript">
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;
}
};
}
</script>
using System.Text;
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;
case "济南":
city = "历城,历下,市中,天桥";
break;
}
//返回包含区县的 字符串连接
return city;
}
Ajax实时局部刷新