使用回调函数
一般用户可以忽略本节的内容。
我们前面关于AJAX函数的示例,采用的都是同步执行方式,只有获得服务器返回的数据,才能进行其他操作。
所有的AJAX函数都可以异步执行,异步执行的好处是在等待服务器响应的过程中,可以进行其他操作,坏处是在操作过程中,你看到的数据,可能并不是最新的。
要异步执行AJAX函数,省略asyn参数即可。
除了setAjaxOptions参数,其他AJAX函数在异步执行的时候,都必须定义一个回调函数,客户端在收到服务器返回的数据后,将调用此函数。
所有的回掉函数都必须定义一个参数,这个参数表示服务器返回的值,例如:
function afterSendJson(result){
document.getElementById("p1").innerHTML=result;
}
唯一的参数result表示服务器返回的数据,上面代码的意思就是:将服务器返回的数据显示在id为"p1"的元素中。
我们以sendAjaxJSON为例,介绍一下如何使用回掉函数,该函数的语法为:
sendAjaxJSON(data,url,func,asyn)
data | 要发送的数据,可以是一个对象,也可以是一个JSON格式的字符串。 |
url | 接收数据的目标网页。 |
func | 回调函数名,收到服务器返回信息后,会调用此函数进行处理。 |
asyn | 逻辑型,可选参数,是否异步执行,默认为true,如果要同步执行,请设置为false。 注意是true和false,不是True和False。 |
例如:
sendAjaxJSON(val,"json.htm","afterSendJson")
表示将val(JSON数据或对象)异步发送到页面json.htm,由afterSendJson函数负责处理接收到的数据。
一个例子
1、在"d:\web"目录下,建立一个子目录lib,在这个目录建立一个文本文件,文件名为"ajaxform.js",文件内容为:
//异步发送对象
function sendJsonObjectAsyn(){
var obj=new Object();
obj.name = "hehui";
obj.age=39;
sendAjaxJSON(obj,"json.htm","afterSendJson"); //afterSendJson为发送完成后要执行的对象
}
//异步发送JSON字符串
function sendJsonStringAsyn(){
var val= '{"name":"李云龙","age":"36"}';
sendAjaxJSON(val,"json.htm","afterSendJson");//afterSendJson为发送完成后要执行的对象
}
//显示服务器返回的数据
function afterSendJson(result){
document.getElementById("p1").innerHTML=result;
}
2、HttpRequest事件代码:
Select
Case e.Path
Case "test.htm"
Dim wb
As New
weui
wb.AddForm("","form1","test.htm")
With wb.AddButtonGroup("form1","btg1",True)
'垂直排列
.Add("btn1",
"发送jason对象","button").Attribute="onclick='sendJsonObjectAsyn()'"
.Add("btn2",
"发送jason字符串","button").Attribute="onclick='sendJsonStringAsyn()'"
End With
wb.AppendHTML("<div
id='p1' style='margin:0.5em'></div>") '插入一个div,用于显示服务器返回的数据
wb.AppendHTML("<script
src='./lib/ajaxform.js'></script>") '引入脚本文件
e.WriteString(wb.Build)
'生成网页
Case "json.htm"
Dim sb
As New
StringBuilder
Dim jo
As JObject =
JObject.Parse(e.PlainText)
sb.AppendLine("服务器收到的数据有:<br/>")
sb.AppendLine("name:"
& jo("name").ToString
& "<br/>")
sb.AppendLine("age:"
& jo("age").ToString)
e.WriteString(sb.ToString)
End
Select