一.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
    <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
    //登录失败,则给ajax返回数据(要导入json的jar包)
    JSONObject jsonObject = new JSONObject("{flag:false}"); s\
    //JSONObject(String source) - org.json.JSONObject
    response.getOutputStream().write(jsonObject.toString().getBytes("utf-8"));

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

  • 点击按钮

    1
    2
    3
    4
    <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
    <script type = "text/javascript">
    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
    14
    //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方法(略)