Ajax 异步传输应用

本文介绍了使用JavaScript实现异步数据查询的方法,包括基本的XMLHttpRequest调用及回调处理,配合Java后端处理流程,展示了如何通过Spring MVC框架优化查询过程,并引入Yahoo Ajax库简化操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  最近在工作中接触了异步传输,现在总结一下。

之前用的比较多的,也是比较普遍的是js最基本的调用

//删除左右两端的空格
function trim(str) {
	return str.replace(/(^\s*)|(\s*$)/g, "");
}
function verify() {   

  var userName = document.getElementById("userName").value;  

  if (window.XMLHttpRequest) {   
      xmlhttp = new XMLHttpRequest();   
      //针对某些特定版本的mozillar浏览器的BUG进行修正   
      if (xmlhttp.overrideMimeType) {   
          xmlhttp.overrideMimeType("text/xml");   
      }   
  } else if (window.ActiveXObject) {   
      var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];   
      for (var i = 0; i < activexName.length; i++) {   
          try{ 
              xmlhttp = new ActiveXObject(activexName[i]);   
              break;   
          } catch(e){   
          }   
      }   
  }   

  if (!xmlhttp) {   
      alert("XMLHttpRequest对象创建失败!!");   
      return;   
  }    

  xmlhttp.onreadystatechange = callback;   
  
  var url = "{调用地址}?userName="+ userName;   
  
  //POST方式请求的代码   
  xmlhttp.open("POST",url,true);   
  xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    
  
  xmlhttp.send(null);   
 
}   

//回调函数   
function callback() {   
  //6.接收响应数据   
  //判断对象的状态是交互完成   
  if (xmlhttp.readyState == 4) {   
      //判断http的交互是否成功   
	  
      if (xmlhttp.status == 200) {   
          //获取服务漆器端返回的数据   
          //获取服务器段输出的纯文本数据   
          var responseText = trim(xmlhttp.responseText); 
         
          if(responseText=="0"){
        	  alert("用户名不能为空!");
          }else if(responseText=="1"){
        	  
        	  alert("用户名已经存在!");
        	  
         }else{
        	  alert("用户名不存在,可以注册"); 
          }  
      } else {   
          alert("error!"+xmlhttp.status);   
      }   
  }   
} 

 

然后在含有被调用的方法的.java文件中,加入

public void checkUserName(HttpServletRequest request,
		HttpServletResponse response){
			try {   
	            // 设置响应文件格式,这是为text/html   
	            response.setContentType("text/html;charset=UTF-8");   
	            PrintWriter out = response.getWriter();   
	            // 1.取参数   
	            String userName= request.getParameter("userName"); 
	            // 2.检查参数是否有问题   
	            if (userName== null || userName.length() == 0) {   
	                out.println("0");   
	            } else if({用username查询数据库是否存在,如存在}){ 
	                   out.println("1");   
	             } else {   
	                    out.println("-1");   
	             }   
	              
	        } catch (Exception e) {   
	            e.printStackTrace();   
	        }
			
		} 

这样,就能实现异步数据的查询!

但是.java仅仅这样的话,并不能满足异步调用更多的数据,或是会很麻烦。

因为上面的.java文件最后返回的是一个test/html的文件,也就是一个页面。咱们可以将其改为跳转到一个jsp页面,并且为其传递参数。下面是springMVC框架的.java文件

public String checkUserName(,HttpServletRequest request,
		HttpServletResponse response, Model model){  
	            String userName= request.getParameter("userName");  // 1.取参数 
	          	boolean exist = {查询数据库中userName是否存在};
		model.addAttribute("exist",exist);
		//还可以传递其他参数
		return "regist/index"//此处为传递的text/html格式页面,在xmlhttp.responseText处将会被读取			
	}

 然后编写一个"regist/index"的.jsp页面就可以了。

 

直接写上面的js就可以完成工作,但这样写代码量会很多,还有一些封装好的Ajax,用起来也是比较方便的,比如yahoo.js.

.java 文件可以不变,直接修改js即可。如下:

function verify(){
	var userName = document.getElementById("userName").value; 
	function handleSuccess(o){		
   	var userName= trim(o.responseText);
  	document.write(userName);
    	
	}
	function handleFailure(){
		alert("系统错误,请稍后再试!");
		return;
 	}
	
	var getNameCallback = { 
		  success: handleSuccess, 
		  failure: handleFailure,
		  cache:false
	};
	var url = "{调用地址}"; 
	var userName= "userName="+userName;
	
	var request = YAHOO.util.Connect.asyncRequest('POST', url, getNameCallback , postData);
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值