jQuery和Ajax

jQuery

    1、一个前端js开发框架，目的在于简化js dom部分代码，并且提高代码的兼容性。

    2、本质，是一个js文件，里面包含了大量已经写好的函数来简化dom代码。

    3、使用，利用script标签引入jQuery文件，即可使用。

    4、版本：最新3.x （不支持ie8），1.x支持ie8

    5、基本使用

        （1）获取html元素

                a.$("CSS选择器") b

        （2）设置html元素的内容

        （3）设置html元素的css

         $("div").html("利用jQuery修改内容");
           //获取html标签内容
         document.write($("div").html());
        //设置标签css
         $("div").css("background-color","blue");
        //批量修改css
         $("div").css({"width":"300px","background-color":"green"});

Ajax

通过ajax技术可以实现web页面的局部刷新和异步提交等功能，减少页面请求和响应的时间，以达到提高用户体验的目的。

    1、指使用js和服务器实现页面无刷新情况下页面和服务器进行数据通信。

    2、利用js实现ajax步骤繁琐，而且要考虑浏览器兼容性，所以大多数情况下，使用jQuery来实现Ajax

    3、使用jQuery来实现ajax

    4、例子：页面无刷新实现用户名验证（可用登录页面）

        ①网页利用jQuery发送请求

        ②服务器仍然通过response来发送相应数据给页面

            仍然通过request.getParameter()接受数据

response.getWriter().print(要发送到页面的数据);
reponse.getWriter().flush();
//利用jQuery实现ajax
//当用户输入完用户名后，将用户名发送到服务器进行判断，
 function ajaxCheckLoginName(){
    $.ajax({ //设置要访问的服务器地址(servlet访问地址)
         url:"login" 
         data:{ "username":$("username").val(), "ajax":"true" }, 
         success:function(data){ 
                //data参数用于获取服务器返回的数据 
                //通过返回的结果来改变输入框的边框颜色 
                //假设data返回数据1代表用户输入正确，0代表错误
                if(data == 1){ $("username").css("background","green"); }
                else{ $("username").css("background","red"); } 
        }
     });
}
        //服务器端代码
        public void doAjax(HttpServletRequest request, HttpServletResponse reponse)
        { 
            String username = request.getParameter("username"); 
            //通过service层的方法处理
            boolean result = us.ajaxCheckLoginName(username); 
            //返回true，则用户名输入正确 
            String msg = ""; 
            if(result == true) 
            { msg = 1; } 
            else{ msg = 0; } 
            response.getWriter().print(msg); 
            reponse.getWriter().flush();
        }