黑猴子的家：JavaWeb 之 Jquery

1、JQuery对Ajax的支持（web_ajax）

JQuery是当前比较主流的 JavaScript 库，封装了很多预定义的对象和实现函数，帮助使用者建立有高难度交互的页面，并且兼容大部分主流的浏览器.

JQuery对同样提供了对Ajax的支持，可以更加方便快速的进行Ajax的开发，相关的方法有.post $.ajax等.

2、$.get方法

3、$.post方法

4、$.ajax方法

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。最简单的情况下，$.ajax()可以不带任何参数直接使用。
$.ajax方法的参数

对于settings请求设置来说，所有选项都是可选的，详见jQuery手册
具体的示例代码
登录表单对信息的异步校验

//对用户名称进行异步的校验
$(function(){
    $("#username").blur(function(){
        var value = $(this).val();
        alert(value);
        $.ajax({
            url:"checkUsername",
            type:"post",
            data:"username="+value,
            success:function(data){
                $("#username_msg").html(data); 
            }
        });
    });
});

结合JSON,完成数据的动态展示

//模拟数据库查询所有的用户
List<User> users = new ArrayList<User>();
users.add(new User(1001,"Tom","123456","tom@sina.com"));
users.add(new User(1002,"Jerry","654321","jerry@sina.com"));
users.add(new User(1003,"Rose","qwer","rose@sina.com"));

//使用json技术奖Java对象转换成json字符串
Gson gson = new Gson();
String jsonStr = gson.toJson(users);
System.out.println("jsonStr:" + jsonStr);
PrintWriter out = response.getWriter();
out.println(jsonStr);

$(function(){
    $("#userList").click(function(){
        $.ajax({
            url:"getAllUser",
            type:"post",
            dataType:"json",
            success:function(jsonStr){
                var msg = "<tr><th>ID</th><th>UserName</><th>PassWord</th><th>Email</th></tr>";
                for(var i = 0;i < jsonStr.length;i++){
                    var userObj = jsonStr[i];
                    msg += "<tr align='center'><td>" + userObj.id + "</td><td>"+userObj.username+"</td><td>"+userObj.password+"</td><td>" + userObj.email + "</td></tr>";
                    $("#userListTable").attr("style","");
                    $("#userListTable").html(msg);
                }
            }
        });
    });
});