Ajax的使用

最新推荐文章于 2023-02-10 22:27:57 发布

Mr.han、

最新推荐文章于 2023-02-10 22:27:57 发布

阅读量153

点赞数

分类专栏： javaweb 文章标签： ajax javascript json

本文链接：https://blog.csdn.net/MRhan6/article/details/125135764

版权

javaweb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

AJAX

概念(Asynchronous JavaScript And XML)：AJAX：异步的JavaScript和xml

作用：与服务器进行数据交换：通过ajax可以给服务器发送请求，并获取服务器响应的数据
好处：提高用户体验(用户的操作是连续的，没有被打断)
异步请求：发送请求后，无需等待服务器响应完成，就可以继续操作，并局部刷新网页。
同步与异步的区别：同步需要等待，异步不需要等待

0. ajax开发快速入门

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

 response.getWriter().print("true");//响应结果

创建 XMLHttpRequest 对象：用于和服务器交换数据

var xmlhttp;
if (window.XMLHttpRequest) {
	// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
} else {
	// code for IE6, IE5
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求

xmlhttp.open("GET",“url");
xmlhttp.send();//发送请求

获取服务器响应数据

xmlhttp.onreadystatechange = function () {
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
		alert(xmlhttp.responseText);
	}
}

异步请求的好处?

大大提高用户体验, 不打断用户的操作,页面悄悄发送请求,局部更新,页面响应更快!

Ajax开发分哪2个部分

后台

获取参数，request.getReader(); request.getParameter(“”)

封装参数, JSON.parseObject()

调用service，执行方法,

响应结果,json字符串
前台
1. 何时发送异步请求？事件绑定
  
  页面加载完成
2. 如何发？
  1. 创建核心的异步对象
  2. 发送异步请求
  3. 获取服务器响应数据

异步请求的调试

判断是前台问题，还是后台的问题？
- F12 看请求是否发送成功，参数是否正确？看响应数据是否正确
- 如果响应数据ok，就是前台问题(回调函数的问题，js，debug)?
- 如果是响应数据有问题，就是后台问题？(debug，Servlet)

1. Axios 异步框架

Axios 对原生的AJAX进行封装，简化书写

引入 axios 的 js 文件

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

使用axios 发送请求，并获取响应结果

axios({
	method:"get",
	url:"http://localhost:8080/ajax-demo1/ajaxServlet2?username=zhangsan"
}).then(function (resp){
	alert(resp.data);
})

axios({
	method:"post",
    url:"http://localhost:8080/ajax-demo1/ajaxServlet2",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});

Axios 请求方式别名(简化)

发送get请求

axios.get("url").then(function (resp){
	alert(resp.data);
});

发送 post请求

axios.post("url","参数").then(function (resp){
	alert(resp.data);
});

2. JSON

概念：JavaScript Object Notation。JavaScript 对象表示法

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

2.1 JSON 基础语法

定义js对象

var obj = {name:"zhangsan",age:18};
alert(obj);

定义JSON字符串

var jsonStr = '{"name":"zhangsan","age":18}';
alert(jsonStr);

将JSON字符串转为JS对象

let jsonObj = JSON.parse(jsonStr);
alert(jsonObj);

将JS对象转换JSON字符串

let s = JSON.stringify(jsonObj);
alert(s);

定义JS对象，axios可以自动将js对象转换成json发送给服务器，只能通过POST请求传递json数据，json数据只能在请求体中传输

let args = {username:"zhangsan"};
axios.post("/day12-filter-ajax/ajaxServlet2",args);

2.2 JSON 数据和Java对象转换

Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库

请求数据：JSON字符串转为Java对象
响应数据：Java对象转为JSON字符串

导入坐标

<!--fastjson-->
<dependency>
	<groupId>com.alibaba</groupId>
	<artifactId>fastjson</artifactId>
	<version>1.2.62</version>
</dependency>

Java对象转JSON

String jsonStr = JSON.toJSONString(user)
//{"id":1,"password":"123","username":"张三"}

JSON字符串转Java对象

User user = JSON.parseObject(jsonStr, User.class);

3. 执行流程

查询所有

web层——>响应 brand.html
- SelectAllServlet
  1. 调用service查询
  2. 将List集合转为JSON
  3. 响应JSON数据
页面brand.html——>请求web层

1.页面加载完成后发送异步请求，获取列表数据

2.遍历集合数据，展示表格

逻辑视图

 /*
逻辑视图
 */
 public String getStatusStr() {
     if (this.status == null || this.status == 0) {
         return "禁用";
     }
     return "启用";
 }

Filter过滤器

概念：Filter 表示过滤器，是 JavaWeb 三大组件(Servlet、Filter、Listener)之一。
过滤器可以把对资源的请求拦截下来，从而实现一些特殊的功能。
过滤器一般完成一些通用的操作，比如：权限控制、统一编码处理、敏感字符处理等等…
Filter快速入门

定义类，实现 Filter接口，并重写其所有方法

public class FilterDemo1 implements Filter {
	public void init(FilterConfig filterConfig)
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
	public void destroy(){}
}

配置Filter拦截资源的路径：在类上定义 @WebFilter 注解

@WebFilter("/*")
public class FilterDemo1 implements Filter {

在doFilter方法中输出一句话，并放行

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain){
	System.out.println("Filter执行。。。放行前");
	//放行
	chain.doFilter(request, response);
}

执行流程

执行放行前逻辑===>放行===> 访问资源===>执行放行后逻辑

Filter使用细节

Filter 拦截路径配置

Filter 可以根据需求，配置不同的拦截资源路径
```
@WebFilter("/*")
public class FilterDemo		
```
- 拦截具体的资源：/index.jsp：只有访问index.jsp时才会被拦截。
- 目录拦截：/user/*：访问/user下的所有资源，都会被拦截
- 后缀名拦截：*.jsp：访问后缀名为jsp的资源，都会被拦截
- 拦截所有：/*：访问所有资源，都会被拦截
过滤器链
- 一个Web应用，可以配置多个过滤器，这多个过滤器称为过滤器链
- 注解配置的Filter，优先级按照过滤器类名(字符串)的自然排序