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,且均具有doGetdoPost方法

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);
posted @ 2022-10-02 21:59  yesyes1  阅读(47)  评论(0编辑  收藏  举报