Javaweb学习笔记第十五弹--Listente概述、AJAX、Axiox、JSON

Listener（监听器）

可以在application、session和request三个对象创建

Javaweb提供了8个监听器，其中较为典型的是ServletContextListener监听器，其余监听器均与该监听器语法类似，可供参考

AJAX（异步的JavaScript和XML）

AJAX官网地址：https://www.w3school.com.cn/js/js_ajax_http_response.asp

作用：

1、与服务器进行数据交换：通过ALAX可以给服务器发送请求，并获取服务器响应的数据---使用了ALAX和服务器进行通信，就可以使用HTML+ALAX来替换JSP页面
2、异步交互：不重新加载整个页面，只是更新部分界面

AJAX快速入门

1、编写AjaxServlet，并使用response输出字符串

即------响应数据

在AjaxServlet.java文件的doGet函数中实现响应数据的操作：

response.getWriter().write("hello ajax~");

2、创建XMLHttpRequest对象：用于和服务器交换数据(下方代码为官网复制所得)

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

3、向服务器发送请求

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

4、获取服务器响应数据

 xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            this.responseText;
       }
    };

Axios异步框架

Axiox官网网址：https://www.axios-http.cn/（起步，走你）

Axiox快速入门

记得需要创建一个axioxServlet相关的.java文件，结构与之前的Servlet文件相同，均继承自HttpServlet，且均具有doGet和doPost方法

1、引入axiox的js文件

<script src="js/axiox-0.18.0.js"></script>

2、使用axiox发送请求，并获取响应结果

//Get

//在doGet方法里面写入：

System.out.println("get...");

//接收请求参数
String username=req.getParameter("username");
System.out.println(username);

//在demo.html里面写入：

axiox({
method:"get"
url:"http://localhost:8080/tt0929/Listener?username=zhangsan"
}).then(function (resp){
alert(resp.date);
})

//Post

//在doPost方法里面写入：

System.out.println("post...");
this.doGet(req,resp);

//demo.html里面写入：

axiox({
method:"post"
url:"http://localhost:8080/tt0929/Listener?",
date:"username=zhangsan"
}).then(function (resp){
alert(resp.date);
})

Axiox请求方式别名(更加方便)

//Get

axiox.get("http://localhost:8080/tt0929/Listener?username=zhangsan").then(function (resp){alert(resp.date);
})

//Post

axiox.post("http://localhost:8080/tt0929/Listener","username=zhangsan").then(function (resp){alert(resp.date);
})

JSON（JavaScript对象表示法）

JSON基础语法

//定义

var 变量名={"key1":变量值1
            "key2":变量值2
...
}
//获取数据

alert(变量名.变量值1/2);

JSON数据和Java数据对象转换

导入坐标：fastjson包

请求数据（JSON字符串转为Java对象）

User u=JSON.parseObject(str,User.class);//将前者的形式转换为后者的形式
System.out.println(u);

响应数据（Java对象转为JSON字符串）

//Java对象转为JSON对象

//.java文件中
User user=new User();//新建一个User对象
user.setId(id);
user.setUsername(username);
user.setPassword(password);

String jsonString=JSON.toJSONString(user);