校验用户名功能
Ajax:
即"Asynchronous JavaScript And XML", 异步JavaScript和XML , 是指一种创建的交互式页面应用的网页开发技术,它并不是新的技术
ajax 并非一种新的技术,而是几种原有技术的结合体。由以下几种技术组合而成:
- 1.使用CSS和XHTML来表示
- 2.使用DOM模型来交互和动态显示
- 3.XMLHTTPRequest来和服务器进行异步通信,是ajax的基础
- 4.使用JavaScript来绑定和调用
在以上所述技术中,除了XmlHttpRequest对象以外,其他所有的技术都是基于Web标准并且已经得到了广泛使用,XMLHTTPRequest虽然还没有被W3C采纳,但已经是一种事实的标准。
典例:
- 注册网站时,提示输入的用户名已经被注册
作用:
如果想要刷新网页局部内容,那么需要重新载入整个网页。Ajax解决了局部刷新的问题,提高了用户体验。
1 Ajax的简单使用
创建对象:
function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; }
发送请求:
//执行get请求 function get(){ // 1 创建xmlhttprequest对象 var request = ajaxFunction() // 2 发送请求 参数一 请求类型 参数二 路径 参数三 是否异步 request.open("GET","/8AjaxAndJquery/ServletDemo01",true); request.send(); }
2 AJAX GET 向服务器发送数据,获取服务器响应的数据
/* //向Servlet发送数据 function get(){ // 1 创建xmlhttprequest对象 var request = ajaxFunction() // 2 发送请求 参数一 请求类型 参数二 路径 参数三 是否异步 request.open("GET","/8AjaxAndJquery/ServletDemo01?name=aa&age=18",true); request.send(); } */ //接收Servlet响应的数据 function get(){ // 1 创建xmlhttprequest对象 var request = ajaxFunction() // 2 发送请求 参数一 请求类型 参数二 路径 参数三 是否异步 request.open("GET","/8AjaxAndJquery/ServletDemo01?name=aa&age=18",true); // 3 获取响应数据,注册监听的意思,如果状态改变,执行等号右边的方法 request.onreadystatechange = function(){ if(request.readyState == 4 && request.status == 200){ //弹出响应的信息 alert(request.responseText); } } request.send(); }
3 AJAX POST 向服务器发送数据,获取服务器响应的数据
//1 创建对象 function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; } //2 发送请求 function post(){ // 1 创建对象 var request = ajaxFunction(); // 2 发送请求 request.open("POST" ,"/8AjaxAndJquery/ServletDemo01" ,true);
// 如果要获取数据,加一个状态的监听 request.onreadystatechange = function(){ if(request.readyState == 4 && request.status == 200){ alert("post:"+request.responseText); } } // 3 带数据过去 //如果是post请求,那么这里要添加请求头,说明提交的数据是一个经过url编码的form表单数据 request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //在send方法里面写表单数据 request.send("name=aobama&age=29"); }
4 Ajax实现校验用户名功能
1 DAO层校验用户名,用ScalarHandler获取聚合函数count()的数量值,>0则用户名已经存在
@Override /** * 校验用户名是否存在 */ public boolean checkUsername(String name) throws SQLException { QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource()); String sql = "select count(*) from test where name = ?"; Long result = (Long) runner.query(sql, new ScalarHandler() , name); return result>0; }
2 Servlet交互前后端数据
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try { //检测是否存在 request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=UTF-8"); String name = request.getParameter("name"); System.out.println("name:"+name); UserDao dao = new UserDaoImpl(); boolean isExist = dao.checkUsername(name); //通知页面 if(isExist){ response.getWriter().println(1); }else{ response.getWriter().println(2); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } }
3 前端JSP&AJAX实现异步校验功能,绑定onblur函数,失去焦点执行
<script type="text/javascript"> //1 创建对象 function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; } function checkUserName(){ //获取输入框的值 var name = document.getElementById("name").value; // alert(name); //1 创建对象 var request = ajaxFunction(); //2 发送请求 request.open("POST","/8AjaxAndJquery/CheckUserNameServlet", true); //注册状态改变监听,获取服务器发送过来的数据 request.onreadystatechange = function(){ if(request.readyState == 4 && request.status == 200){ // alert(request.responseText); var data = request.responseText; if(data == 1){ document.getElementById("span01").innerHTML="<font color=red>用户名已存在</font>"; // alert("用户名已存在"); }else{ document.getElementById("span01").innerHTML="<font color=red>恭喜!用户名可以使用</font>"; // alert("恭喜!用户名可以使用") } } } request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); request.send("name="+name); } </script>