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}    }}

Javaweb（十二）

精品课程

技术教程

图灵资讯

图灵内推

图灵公众号