一.Ajax简介

  • Ajax是一种用于创建快速动态网页的技术
  • Ajax可以使网页实现异步更新

二.Ajax实现局部刷新(jQuery)

  • 引入jQuery包

    1
    <script type = "text/javascript" src="..."></script>

  • 登录按钮

    1
    <input type="button" value="登录" id="login">

  • js脚本

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <script type="text/javascript">
        $("#login").click(function() {
            // 单击登录按钮时触发ajax事件
            $.ajax({
                url: "<%=basePath%>/loginServlet",
                type: "post",
                data: {
                    username: $("input[name=username]").val(),
                    password: $ {
                        "input[name=password]"
                    }.val()
                },
                dataType: "json", // 指明Servlet给Ajax返回数据的数据格式
                success: function(result) {
                    var flag = result.flag;
                    if (flag == true) {
                        // 登陆成功跳转页面
                    } else {
                        $(".tip").text("您输入的用户名或密码不正确");
                    }
                }
            })
        })
    </script>

  • Servlet

    1
    2
    3
    4
    5
    // 登录失败，则给ajax返回数据（要导入json的jar包）
    JSONObject jsonObject = new JSONObject("{flag:false}");

    // JSONObject(String source) - org.json.JSONObject
    response.getOutputStream().write(jsonObject.toString().getBytes("utf-8"));

三.Ajax实现局部刷新(JavaScript)

  • 点击按钮

    1
    2
    3
    <input type="button" value="查看java课程" flag="1" onclick="showJava()">
    <input type="button" value="查看C课程" flag="2" onclick="showC()">
    <div style="width:400px,height:300px" id="div1"></div>

  • JS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    function showJava() {
        // 1.创建一个xmlhttpRequest对象
        var xmlhttp = new XMLHttpRequest();
        // 2.规定请求的类型，URL及是否异步处理请求
        xmlhttp.open("GET", "<%=basePath%>/ListCourseServlet?flag=1", true);
        // 这里的路径和WebServlet匹配，要加basepath
        // 3.将请求发送到服务器
        xmlhttp.send();
        // 4.接收服务器端的响应(readyState=4表示已完成响应 status=200表示请求一切正常)
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                // responseText:表示的是服务器返回ajax的数据
                document.getElementById("div1").innerHTML = xmlhttp.responseText;
            }
        }
    }

  • Servlet类

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 1.获取ajax传递过来的参数信息
    String flag = request.getParameter("flag");

    // 2.需要返回的数据信息
    String data="";
    if("1".equals(flag)){
        data = "Java从入门到放弃";
    }else if("2".equals(flag))｛
        data="C语言入门到放弃";
    ｝

    // 3.将数据信息回写给ajax
    response.getOutputStream().write(data.getBytes("utf-8"));

四.关于JSONObject

  • append方法

    append 方法添加的是key , 每一个key对应的是一个json数组。

    即，append(key,value) 会把 value 包装成一个数组

  • accumulate方法

    添加一个key，对应一个值

    1
    2
    3
    4
    JSONObject jsonObject4 = new JSONObject();
    // 添加键值对
    jsonObject4.accumulate("flag1",flag1);
    jsonObject4.accumulate("flag2",flag2);

  • put方法（略）