Java篇-ajax

一 : Ajax的阐述

面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到​服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回​给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能,写过移动端的小伙伴应该对此很了解,我们用的网络请求异步框架和Ajax功能一样.
Ajax可以对网页的某部分进行更新操作(局部刷新),传统的网页(不使用ajax)如果需要更新内容,必须重载整个网页页面.

二 : js原生的Ajax技术

js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行的,要使用js原​生的Ajax完成异步操作，有如下几个步骤：

• 创建Ajax引擎对象
• 为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
• 绑定提交地址
• 发送请求
• 接受响应数据

异步访问服务器

function fn1(){
        //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
        var xmlHttp = new XMLHttpRequest();
        //2、绑定监听 ---- 监听服务器是否已经返回相应数据
        xmlHttp.onreadystatechange = function(){
            if(xmlHttp.readyState==4&&xmlHttp.status==200){
                //5、接受相应数据
                var res = xmlHttp.responseText;
                document.getElementById("span1").innerHTML = res;
            }
        }
        //3、绑定地址
        xmlHttp.open("GET","/TZproject/ajaxServlet?name=zzz",true);
        //4、发送请求
        xmlHttp.send();
    }

同步访问服务器

function fn2(){
        //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
        var xmlHttp = new XMLHttpRequest();
        //2、绑定监听 ---- 监听服务器是否已经返回相应数据
        xmlHttp.onreadystatechange = function(){
            if(xmlHttp.readyState==4&&xmlHttp.status==200){
                //5、接受相应数据
                var res = xmlHttp.responseText;
                document.getElementById("span2").innerHTML = res;
            }
        }
        //3、绑定地址
        xmlHttp.open("POST","/TZproject/ajaxServlet",false);
        //4、发送请求
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlHttp.send("name=lili");
        
    }

三 : Json数据格式

作用 :

使用ajax进行前后台数据交换
移动端与服务端的数据交换

格式与解析

• 对象格式：{"key1":obj,"key2":obj,"key3":obj...}
  {"username":"雪芙","age":28,"password":"123","addr":"台湾"}
• 数组/集合格式：[obj,obj,obj...]
  List<Product> 用json数据格式表示
  [{"pid":"10","pname":"香蕉"},{},{}]

注意

• 对象格式和数组格式可以互相嵌套
• json的key是字符串 jaon的value是Object

Json的转换插件

• jsonlib
• Gson：google
• fastjson：阿里巴巴

四 : Jquery的Ajax技术

jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操​作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中​经常使用的有三种

• $.get(url, [data], [callback], [type])

function fn1(){
        //get异步访问
        $.get(
            "/TZpro/ajaxServlet2", //url地址
            {"name":"张三","age":25}, //请求参数
            function(data){ //执行成功后的回调函数
                //{\"name\":\"tom\",\"age\":21}
                alert(data.name);
            },
            "json"
        );
    }

• $.post(url, [data], [callback], [type])

function fn2(){
        //post异步访问
        $.post(
            "/TZpro/ajaxServlet2", //url地址
            {"name":"李四","age":25}, //请求参数
            function(data){ //执行成功后的回调函数
                alert(data.name);
            },
            "json"
        );
    }

url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等

• $.ajax( { option1:value1,option2:value2... } );

function fn3(){
        $.ajax({
            url:"/TZpro/ajaxServlet2",
            async:true,
            type:"POST",
            data:{"name":"猪油崽","age":18},
            success:function(data){
                alert(data.name);
            },
            error:function(){
                alert("请求失败");
            },
            dataType:"json"
        });
    }

async：是否异步，默认是true代表异步
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址

五 : 实例异步校验用户是否存在

失去焦点后,通过ajax校验用户名是否存在

效果

• 页面

<script type="text/javascript">
    
$(function(){
    
    //为输入框绑定事件
    $("#username").blur(function(){
        //1、失去焦点获得输入框的内容
        var usernameInput = $(this).val();
        //2、去服务端校验该用户名是否存在---ajax
        $.post(
            "${pageContext.request.contextPath}/checkUsername",
            {"username":usernameInput},
            function(data){
                var isExist = data.isExist;
                //3、根据返回的isExist动态的显示信息
                var usernameInfo = "";
                
                alert(isExist);
                if(isExist){
                    //该用户存在
                    usernameInfo = "该用户名已经存在";
                    $("#usernameInfo").css("color","red");
                }else{
                    usernameInfo = "该用户可以使用"
                    $("#usernameInfo").css("color","green");
                }
                $("#usernameInfo").html(usernameInfo);
            },
            "json"
        );
    });
});
</script>

• web层-Servlet

//获得要校验的用户名
        String username = request.getParameter("username");
        
        UserService service = new UserService();
        boolean isExt = false;
        
        try {
            isExt = service.checkUserName(username);
        } catch (SQLException e) {

            e.printStackTrace();
        }
                    
        System.out.println(isExt);
        response.getWriter().write("{\"isExist\":"+isExt+"}");

    }

• Service层

public boolean checkUserName(String username) throws SQLException {
        UserDao dao = new UserDao();
        Long isExt = dao.checkUserName(username);
        
        return isExt > 0?true:false;
    }

• dao层

public Long checkUserName(String username) throws SQLException {
        
        QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
        
        String sql = "select count(*) from user where username=?";
        Long isExt = (Long)runner.query(sql,new ScalarHandler(),username);
        return isExt;
    }