Ajax 五个步骤

首先,先解释一下回调函数:

回调函数就是那些自己写的,但是不是自己来调,而是给别人来掉的函数。
消息响应函数就可以看成是回调函数,因为是让系统在合适的时候去调用。这不过消息响应函数就是为了处理消息的,所以就拿出来单做一类了。其实本质上就是回调函数。
但是回调函数不是只有消息响应函数一种,比如在内核编程中,驱动程序就要提供一些回调函数,当一个设备的数据读写完成后,让系统调用这些回调函数来执行一些后续工作。
回调函数赋予程序员这样一种能力,让自己编写的代码能够跳出正常的程序控制流,适应具体的运行环境在正确的时间执行。
下面是一个用纯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;
	}

相关推荐