实现页面无刷新目前我知道有两种方法(其实都是基于XMLHTTP的)
方法一:很多AJAX的参考书上都有的方法
下面介绍第二种方法,使用,NET的回调函数
第一,服务器端页面必须实现 System.Web.UI.ICallbackEventHandler接口,该接口有两个函数
第二个函数当客户端调用回调函数时执行(通常用于执行逻辑代码,处理业务逻辑)
(注意MSDN回调函数的示例有误)
第二:使用JS写接受服务器返回来的结果的函数,和相应事件的函数
总结:基于.NET的无刷新页面,其实是实现了 System.Web.UI.ICallbackEventHandler接口的PAGE类,使用这种方法,可以极大的提升WEB程序的性能
方法一:很多AJAX的参考书上都有的方法
1
var xmlHttp;
2
function createXmlHttp(){
3
if(window.ActiveXObject)
4
{
5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
6
}
7
else if(window.XMLHttpRequest)
8
{
9
xmlHttp = new XMLHttpRequest();
10
}
11
}
12![](/Images/OutliningIndicators/None.gif)
13
//按钮的单击事件触发后调用这个函数
14
function statrRequest()
15
{
16
17
createXmlHttp();
18
var url = getUrl();//获得URL包括带有的参数
19
xmlHttp.onreadystatechange = handleStateChange;
20
xmlHttp.open("GET",url,true);
21
//xmlHttp.setRequestHeader(" Content- Type " , " application/x-www-form-urlencoded " );
22
//这是POST必须的
23
xmlHttp.send(null);
24
25
26
}
27![](/Images/OutliningIndicators/None.gif)
28
//返回时调用的函数
29
function handleStateChange()
30
{
31
if(xmlHttp.readyState==3)//当服务器还没有返回时,显示一张图片(loading)
32
{
33
34
var oDiv = document.getElementById("loading");
35
if(oDiv.childNodes.length<=0){
36
37
var img = document.createElement("img");
38
img.setAttribute("src","images/_loading.gif")
39
img.setAttribute("id","loading");
40
41
}
42
else
43
{
44
var img = document.getElementById("loading");
45
img.style.display = "inline";
46
}
47
48
}else if(xmlHttp.readyState==4){
49
if(xmlHttp.status==200)
50
{
51
var img = document.getElementById("loading");
52
img.style.display = "none";
53
var oTable = document.getElementById("table");
54
oTable.innerHTML = xmlHttp.responseText;
55
}
56
57
}
本人觉得难点在于服务器返回的格式,服务器应该返回已字符串,我知道在服务器端可以接受HTML页传过来的参数,但是不知道服务器端处理后怎么返回,调用一个有返回值的函数吗?哪位打人解释一下。![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](/Images/OutliningIndicators/InBlock.gif)
4
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
11
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/None.gif)
14
![](/Images/OutliningIndicators/None.gif)
15
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
27
![](/Images/OutliningIndicators/None.gif)
28
![](/Images/OutliningIndicators/None.gif)
29
![](/Images/OutliningIndicators/None.gif)
30
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/InBlock.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/InBlock.gif)
41
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
42
![](/Images/OutliningIndicators/InBlock.gif)
43
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
44
![](/Images/OutliningIndicators/InBlock.gif)
45
![](/Images/OutliningIndicators/InBlock.gif)
46
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
47
![](/Images/OutliningIndicators/InBlock.gif)
48
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
49
![](/Images/OutliningIndicators/InBlock.gif)
50
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
51
![](/Images/OutliningIndicators/InBlock.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/InBlock.gif)
54
![](/Images/OutliningIndicators/InBlock.gif)
55
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
56
![](/Images/OutliningIndicators/InBlock.gif)
57
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
下面介绍第二种方法,使用,NET的回调函数
第一,服务器端页面必须实现 System.Web.UI.ICallbackEventHandler接口,该接口有两个函数
1
ICallbackEventHandler 成员
第一个用于返回一个字符串到客户端(通常是HTML标记和文本内容)![](/Images/OutliningIndicators/ContractedBlock.gif)
第二个函数当客户端调用回调函数时执行(通常用于执行逻辑代码,处理业务逻辑)
(注意MSDN回调函数的示例有误)
第二:使用JS写接受服务器返回来的结果的函数,和相应事件的函数
1
//这是响应onclick时间的函数
2
function Query()
3
{
4
var oType = document.getElementById("se_type");
5
var oPrice = document.getElementById("se_price");
6
var oRent = document.getElementById("se_rentfee");
7
var oArea = document.getElementById("se_area");
8
var oAcreage = document.getElementById("se_acreage");
9
var oJzlb = document.getElementById("se_jzlb");
10
var oHouseType = document.getElementById("se_houseType");
11
var oDecorate = document.getElementById("se_decorate");
12
var oKey = document.getElementById("txt_key");
13
14![](/Images/OutliningIndicators/InBlock.gif)
15
16
var value = new Array();
17
value[0]= oType.options[ oType.selectedIndex].value;
18
value[1]= oPrice.options[ oPrice.selectedIndex].value;
19
value[2]= oRent.options[ oRent.selectedIndex].value;
20
value[3]= oArea.options[ oArea.selectedIndex].text;
21
value[4] = oAcreage.options[ oAcreage.selectedIndex].value;
22
value[5] = oJzlb.options[ oJzlb.selectedIndex].value;
23
value[6] = oHouseType.options[ oHouseType.selectedIndex].value;
24
value[7] = oDecorate.options[ oDecorate.selectedIndex].value;
25
value[8] = oKey.value;
26
27
var request = value.toString();
28
29
CallServer(request,"context");
30
31
32
}
33![](/Images/OutliningIndicators/None.gif)
34
//这是接受服务器返回的结果,并在页面上显示的函数
35
function ReceiveServerData(rValue)
36![](/Images/OutliningIndicators/None.gif)
37
{
38
var oTable = document.getElementById("rTable");
39
40
oTable.innerHTML = rValue;
41
42
}
第三:使用Page.ClientScript.GetCallbackEventReference()方法,取得客户端函数引用![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
4
![](/Images/OutliningIndicators/InBlock.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/InBlock.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/InBlock.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
33
![](/Images/OutliningIndicators/None.gif)
34
![](/Images/OutliningIndicators/None.gif)
35
![](/Images/OutliningIndicators/None.gif)
36
![](/Images/OutliningIndicators/None.gif)
37
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/InBlock.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
1
protected void Page_Load(object sender, EventArgs e)
2
{
3
String cbReference = Page.ClientScript.GetCallbackEventReference(this, "request", "ReceiveServerData", "context");
4
String callback = "function CallServer(request,context)"
5
+"{" + cbReference + "}";
6
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callback, true);
7![](/Images/OutliningIndicators/InBlock.gif)
8
}
在6行注册了一个客户端脚本,运行后,客户端出现如下代码![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](/Images/OutliningIndicators/InBlock.gif)
4
![](/Images/OutliningIndicators/InBlock.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/InBlock.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
1
<script type="text/javascript">
2
<!--
3
function CallServer(request,context){WebForm_DoCallback('__Page',request,ReceiveServerData,context,null,false)}// -->
4
</script>
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](/Images/OutliningIndicators/InBlock.gif)
3
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
4
![](/Images/OutliningIndicators/None.gif)
总结:基于.NET的无刷新页面,其实是实现了 System.Web.UI.ICallbackEventHandler接口的PAGE类,使用这种方法,可以极大的提升WEB程序的性能