Ajax技术

最新推荐文章于 2024-03-22 14:39:10 发布

转载最新推荐文章于 2024-03-22 14:39:10 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/cannianguaishushu/blog/735724

文章标签：

#javascript #java #ViewUI

本文介绍如何利用Ajax技术实现网页中用户的异步登录验证功能。通过JavaScript创建XmlHttpRequest对象，采用GET方式向服务器发起请求，服务器端接收并处理请求参数，返回处理结果给前端页面，最终显示提示信息。

原理：

借助javascript内部的XmlHttpRequest对象可以进行异步传输，使用户在等待服务器返回数据的同时，可以进行其他操作。

步骤：

1、创建XmlHttpRequest对象

2、获取所需的值

3、配置XmlHttpRequest对象

4、设置回调函数

5、发送请求

登录例子（get方式）：

客户端代码（JavaScript）

    	function check(){
    		//1、创建XmlHttpRequest对象
    		var xmlHttpReq=new XMLHttpRequest();
    		
    		//2、获取所需的值
    		var username=document.getElementById("uid").value;
    		
    		//3、配置XmlHttpRequest对象
    		var url="LoginServlet?un="+username;
    		xmlHttpReq.open("get",encodeURI(encodeURI(url)),true);    //使用两次encodeURI方法对url进行编码，解决传值乱码问题
    		
    		//4、设置回调函数
    		xmlHttpReq.onreadystatechange=function(){
    			if(xmlHttpReq.status==200 && xmlHttpReq.readyState==4){
    				document.getElementById("spanid").innerHTML=xmlHttpReq.responseText;
    			}
    		}
    		
    		//发送请求
    		xmlHttpReq.send(null);
    	}

服务端代码 (Servlet)

    		response.setContentType("text/html; charset=UTF-8");    //告知客户端以UTF8形式编码
    		PrintWriter out=response.getWriter();
    		String name=request.getParameter("un");
    		name=URLDecoder.decode(name,"utf8");    //处理中文传值乱码
    		System.out.println("name="+name);
    		if(name.equals("周五")){
    			out.println("用户名已经存在");
    		}else{
    			out.println("用户名可以正常使用");
    		}
    		out.flush();
    		out.close();

转载于:https://my.oschina.net/cannianguaishushu/blog/735724