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;
	}

评论

1 楼 宝贝企鹅 2019-03-18