Javaweb（十二）-摩杜云开发者社区

1、Ajax：异步的JavaScript和XML

1.1、Ajax的作用：

①、与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据

使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了

②、异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验等等…

1.2、Ajax快速入门：

//Servlet的编写
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //响应数据
        response.getWriter().write("Hello ajax!");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

html的编写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1、创建核心对象
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2、发送请求
    /**
     * 参数一表示请求的方式，参数二要写全路径
     * */
    xhttp.open("GET", "http://localhost:8080/test/ajaxServlet");
    xhttp.send();
    //3、获取响应
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            //this.responseText就是返回的数据
            alert(this.responseText);
        }
    };

</script>

</body>
</html>

然后浏览器一访问这个html就会调用alert输出里面的信息。

1.3、用户注册案例，当用户在注册框输入用户名后的鼠标离开后，就会自动校验该用户名是否可用，实现的思路如下所示：

①、编写Servlet

@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取username
        String username = request.getParameter("username");
        //根据username调用service中的方法查询User对象

        //用户和前端进行交互的判断标志，表明是否查找成功
        boolean flag = true;

        //响应标记
        response.getWriter().write("" + flag);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

②、编写html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<script>
    //1、给用户输入绑定焦点事件
    document.getElementById("username").onblur = function () {
        //2、发送Ajax请求
        //获取用户输入的值
        let username = this.value;

        //2.1、创建核心对象
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.2、发送请求
        /**
         * 参数一表示请求的方式，参数二要写全路径
         * */
        xhttp.open("GET", "http://localhost:8080/test/selectUserServlet");
        xhttp.send();
        //2.3、获取响应
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                //this.responseText就是返回的数据
                if (this.responseText == "true") {
                    //用户存在，显式提示信息，可以设置标签中的display属性来确定是否显示该标签
                    document.getElementById("username_err").style.display = '';
                } else {
                    document.getElementById("username_err").style.display = 'none';
                }
            }
        };
    }

</script>
</body>
</html>

2、Axios

2.1、快速入门：

2.2、Axios请求方式别名

3、JSON

由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

3.1、JSON基础语法

3.2、JSON数据和Java对象的转换

使用Fastjson库可以快捷完成完成我们的需求！！！！Fastjson库的使用如下所示：

请求数据：JSON字符串转为)ava对象

响应数据：Java对象转为SON字符串

public class Demo1 {
    @Test
    public void test1(){
        //1、将Java对象转换为JSON字符串
        Person p = new Person("zhangsan",21);
        String s = JSON.toJSONString(p);
        System.out.println("Java对象转换为JSON字符串为:" + s);   //Java对象转换为JSON字符串为:{"age":21,"name":"zhangsan"}

        //2、将JSON字符串转换为Java对象
        Person person = JSON.parseObject(s, Person.class);
        System.out.println("JSON字符串转换为Java对象为:" + person.toString());    //JSON字符串转换为Java对象为:Person{name = zhangsan, age = 21}
    }
}