首先,先解释一下回调函数:
回调函数就是那些自己写的,但是不是自己来调,而是给别人来掉的函数。
消息响应函数就可以看成是回调函数,因为是让系统在合适的时候去调用。这不过消息响应函数就是为了处理消息的,所以就拿出来单做一类了。其实本质上就是回调函数。
但是回调函数不是只有消息响应函数一种,比如在内核编程中,驱动程序就要提供一些回调函数,当一个设备的数据读写完成后,让系统调用这些回调函数来执行一些后续工作。
回调函数赋予程序员这样一种能力,让自己编写的代码能够跳出正常的程序控制流,适应具体的运行环境在正确的时间执行。
下面是一个用纯js写出的实现Ajax的例子:
verify.js:
//这个方法是用最传统的XMLHTTPRequest对象进行AJAX的异步数据交互( 五步法)
//乱码的解决方法1:1.页面端发出的数据作一次encodeURI,服务器端使用username = new String(old.getBytes("iso8859-1"),"utf-8");
//解决方法2:页面端发出的数据作两次encodeURI,服务器端URLDecoder.decode(old,"uft-8");比较通用,无论应用服务器内部如何编码,都行,推荐使用
var xmlhttp;
function verify(){
//获取文本框中的值
var username = document.getElementById("username").value;
//1.创建 XMLHTTPRequest对象
//这是XMLHTTPRequest对象五步使用中最复杂的一步,主要是浏览器的差异引起的
if(window.XMLHttpRequest){
//针对FireFox,Mozillar,Opera,Safari,IE7,IE8
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
//针对IE5,IE6,IE5.5
//两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个数组
var activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i = 0;i<activeName.length;i++){
try{
//取出一个控件名进行创建,如果创建成功就终止循环
//如果创建失败,抛出异常,然后可以继续循环,继续尝试创建
xmlhttp = new ActiveXObject(activeName[i]);
break;
}catch(e){
}
}
}
//确认XMLHttpRequest对象创建成功
if(!xmlhttp){
alert("XMLHttpRequest对象创建失败");
return;
}else{
alert(xmlhttp);
}
//2.注册回调函数
//注册回调函数时,只需要写函数名,不要加括号
//如果加上括号,就会把函数的返回值注册上,这是错误的
xmlhttp.onreadystatechange = callback;
//3.设置和服务器端的连接信息
// 第一个参数表示http的请求方式,支持所有的http的请求方式,主要使用 get post
//第二个参数表示请求的url地址,
//第三个参数表示采用异步还是同步方式交互,true表示异步,
//xmlhttp可以实现同步,但是在AJAX中,一般是异步。
//
xmlhttp.open("GET","verifyUser.action?name="+encodeURI(username),true);
//4.发送数据,开始和服务器端进行交互,这里send里的参数为null,是因为采用了GET的请求方式
//它的参数全部在URL地址里发出去了,
xmlhttp.send(null);
//要是采用Post的方式,则,书写方式如下
//xmlhttp.open("POST","verifyUser.action",true);
//使用post方式需要自己设置HTTP的请求头
//xmlhttp.setRequestHeader("Content-TYpe","application/x-www-form-urlencode");
//xmlhttp.send("name="+username);
}
function callback(){
//5.接受响应数据
//判断对象的状态是否交互完成
//0=未初始化,1=open方法成功调用以后,2=服务器已经应答客户端的请求3=交互中,4=完成,
//readyState每变化一次,就调用一次回调函数callback,如果在这里加上一句话
//alert(xmlhttp.readyState),打上断点进行调试,发现,xmlhttp对象刚创建好,其状态为0,执行完open以后,状态为1
//其实执行完open,callback就已经被调用,在执行send方法,其状态又跑出个1,然后2,然后3,最后4
if(xmlhttp.readyState==4){
//判断http的交互是否成功
if(xmlhttp.status==200){
//获取服务器端返回的数据
//这里服务器输出的是纯文本数据
var responseText = xmlhttp.responseText;
//若服务器端输出的是XML格式的数据,responseText = xmlhttp.responseXML;然后对提取的XML进行Dom解析
// 将数据显示在页面上
var divNode = document.getElementById("result");
divNode.innerHTML = responseText;
}
}
}
以上代码,如果是用jQuery来实现,则如下:
$.get(verifyUser.action?name="+$("#username").val(),null,function(data){
$("#result").html(data);
},true);
使用被人提供的js库的好处就是,别人都帮你屏蔽了一些复杂的部分
业务逻辑部分:
//ajax返回纯文本数据
public String verifyUser(){
String old;
String username = null;
HttpServletRequest request = ServletActionContext.getRequest();
old = request.getParameter("name");
try {
username = new String(old.getBytes("iso8859-1"),"utf-8");
} catch (UnsupportedEncodingException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
//System.out.println(username);
List list = userDao.findAll();
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
try {
PrintWriter pw = response.getWriter();
if(username==null||"".equals(username.trim())){
pw.write("用户名不能为空");
return null;
}else{
for(int i=0; i<list.size();i++){
if(username.equals(((User)list.get(i)).getUsername())){
pw.write(username+"改用户名存在,重新注册");
return null;
}
}
}
pw.write(username+"合法用户!");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}