Ajax实现的异步传输与验证

最新推荐文章于 2022-06-07 08:32:06 发布

原创最新推荐文章于 2022-06-07 08:32:06 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #异步

web开发专栏收录该内容

60 篇文章

订阅专栏

本文介绍了一种使用Ajax进行异步数据验证的方法，通过一个具体的示例展示了如何在不刷新页面的情况下验证用户输入，并从服务器获取反馈信息。

Ajax异步传输用得很广，就拿web开发来说吧，当用户注册时，当用户刚一输完，怎么立即判断用户是否存在，并在输入框后显示提示？这就用到了异步传输~~

它可以让你不离开页面的情况下，获取后台你想要的数据，并显示在当前页面！！好的，下面看个例子

下面是一段Ajax验证代码

<script type="text/javascript">
		
  //① 设置变量
    var xmlHttp ;
    var flag = false ;
    var package_name;
     
    //② 创建XMLHttp对象
    function createXMLHttp(){
        if(window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest() ;
              
            
        } else {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
            
        }
        
    }
     
        //③ 
        function getPackage_name(package_name){
        
        //创建XMLHttpRequest对象
        createXMLHttp() ;
        
          document.getElementById("msg").innerHTML=package_name;
        //创建一个HTTP请求，以post方式将package_name交给AppInfoServlet
        xmlHttp.open("post","AppInfoOneServlet?package_name="+package_name) ;
       

        //调用回调函数 生成可视化的页面响应
         
        xmlHttp.onreadystatechange =checkCallback;
       
      //  发送请求
        xmlHttp.send(null) ;
        
        //友好提示
        document.getElementById("msg").innerHTML = "正在获取信息，请耐心等候..." ;
         
    }
     
    //④ 回调函数
    function checkCallback(){
    	
        if(xmlHttp.readyState == 4){
            if(xmlHttp.status == 200){
            	
                var text = xmlHttp.responseText ;
                 var t=text.split('|');//当获取的是多个值，并用"|"作为分割时
                    document.getElementById("msg").innerHTML =t[0]+ "<br>"+"<div id='container'>"+"<div id='content'>"+"<div id='slider'>"+"<ul>"+"<li>"+"<img src='"+t[1]+"'  alt='Css Template Preview' />"+"</li>"+"<li>"+"<img src='"+t[2]+"' alt='Css Template Preview' />"+"</li>"+"</ul>"+"</div>"+"<h3>Android应用截图展示</h3>"+"</div>"+"</div>"+"<center><a href='"+t[3]+"' target='_blank'><img src='./images/downloadsoruce.png'></a></center>" ;
//获取的数据在id为“msg” 的标记中显示出来，例如：<span id="msg"></span>                
            }
        }
    }
     
    
		
		
		
	</script>

在jsp页面中是这样调用js函数的

<a href="#bottom" onclick="getPackage_name('<%=ainfo.getPackage_name() %>')">获取</a>

Ajax获取的数据将在下列标记中显示出来

<span id="msg"></span>

好的，我们来看一下servlet中的代码：

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");//必须在out前，否则传输的汉子为乱码啊
		PrintWriter out = response.getWriter();
		
		
		String package_name=request.getParameter("package_name");
		
           AppDaoImpl adi=new AppDaoImpl();
		AppInfo ainfo=new AppInfo();
		ainfo=adi.getOneAppInfo(package_name);
		
		 
		out.print(ainfo.getDescription()+"|"+ainfo.getScreen_1_path()+"|"+ainfo.getScreen_2_path()+"|"+ainfo.getDownload_path());
		
		
		 
	}

以上已经很清楚啦，当然验证用户是否存在，道理和这个是一模一样的，其中一定要注意汉字传输中乱码的问题~~~~~~