Ajax学习
- 什么是Ajax
- 特点: 局部刷新,异步访问
- 如图: 当用户写入关键字之后.则在局部页面中 会展现提示信息.
同步和异步的说明
- 同步调用
规则: 当有多个页面请求时,如果前一个操作没有执行完成,则后一个操作不能执行. 串行操作
- 异步调用
规则: 多个操作相继开始并发执行,即使开始的先后顺序不同,但是由于它们各自是在自己独立的进程或线程中完成,所以**互不干扰**谁也不用等谁
Ajax实现异步的原理
说明:
当ajax发起请求之后.可以做自己的事情,当回调函数执行时,表示业务逻辑执行完成 通知用户.则用户在局部的位置 展现服务器信息.
特点: 局部刷新,异步访问
并发: 一般指多个请求同一时间访问服务器 服务器概念 高并发
并行: 在计算机内部,CUP同时执行多个任务.
微观:
单核CPU 特点: 每次只能执行一次计算.
单核CPU只能执行并发操作: 在同一个时间只能执行一个任务.
多核CPU 在同一时间 可以执行多个任务 并行.
Axios入门案例
- Axios是Ajax高级API
- AxiosAPI讲解
axios({
url: "axios",
method: "get",
//如果需要传递参数 则需要关键字
params: {
id: 100,
name: "Ajax远程调用"
}
})
主要作用: 是发起Ajax请求的.
- Servlet接收
@WebServlet("/axios")
public class AxiosServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String id = req.getParameter("id");
String name = req.getParameter("name");
System.out.println("获取服务器信息:"+id+":"+name);
//服务器响应数据给客户端
String msg = "调用成功";
resp.setContentType("text/html;charset=utf-8");
//将数据返回给客户端
resp.getWriter().write(msg);
}
}
- 回调函数 当业务逻辑调用成功之后,执行回调函数
.then(function (promise) {
//2.编辑回调函数 当业务调用成功之后,服务器响应时执行回调函数
//参数说明: promise必须要写的参数 名称可以任意(形参)
//参数promise是ajax封装数据的对象
console.log(promise)
console.log("请求状态码:"+promise.status)
console.log("获取服务器响应的数据:"+promise.data)
})
- 异常解析
.catch(function (error) {
console.log(error)
})
- 整体结构
//1.当浏览器解析到axios函数时,则会发起Ajax请求.
axios({
url: "axios",
method: "get",
//如果需要传递参数 则需要关键字
params: {
id: 100,
name: "Ajax远程调用"
}
}).then(function (promise) {
//2.编辑回调函数 当业务调用成功之后,服务器响应时执行回调函数
//参数说明: promise必须要写的参数 名称可以任意(形参)
//参数promise是ajax封装数据的对象
console.log(promise)
console.log("请求状态码:"+promise.status)
console.log("获取服务器响应的数据:"+promise.data)
}).catch(function (error) {
console.log(error)
})
Axios 简化操作
- 简化方式1:
//2.Ajax简化操作 发起get请求 params:参数的关键字
let user = {id:100,name:"tomcat"}
axios.get("axios",{params: user})
.then(function (promise) {
//获取服务器返回值
console.log(promise.data)
}).catch(function (error) {
console.log("异常信息!!!")
})
- 简化操作2:
//3. 简化参数
//使用箭头函数可以简化function关键字
// (参数) => {函数体}
// 如果函数中只有一个参数时,则括号可以省略
axios.get("axios?id=100&name=tomcat")
.then(promise => {
console.log(promise.data)
}).catch( error => {
console.log(error)
})
- 简化操作3:
/**
* 简化操作4. async await
* 需求: 能否利用一行代码实现请求的发送,和结果的获取
* 关键字:
* 1.async 标识函数的
* 2.await 标识ajax请求
*/
async function getMsg(){ //函数定义
//let promise = await axios.get("axios?id=300&name=tomcat3")
//promise是一个对象 {key:value,key2:value2}
//console.log(promise.data)
//效果一致!!!!!
// {data:"调用成功",status:200,statusText: "xxx"...}
let {data: result,status: status} = await axios.get("axios?id=300&name=tomcat3")
//该方法只有服务器正确返回值才能获取返回值信息. 不能直接使用catch
console.log(result+":"+status)
}
//调用函数
getMsg()
关于JSON串的说明
- JSON介绍: 是一种轻量级的数据交换格式
- JSON功能: 是实现前后端交互的媒介
- 页面javaScript中: js对象
- 后端服务器: java对象
- 参数传递问题说明:
-
对象转化的规则
-
js对象
- js对象 -----> JSON串
- JSON串 ------>js对象
//页面js对象与json串的转化 let user = {id:100,name:"tomcat"} let json = JSON.stringify(user) //js对象转化为JSON串 let user2 = JSON.parse(json) //JSON串转化为JS对象
-
java对象------>JSON串
- ObjectMapper实现对象的转化
public static void main(String[] args) throws Exception { User user = new User(1001,"疫情结束了"); ObjectMapper mapper = new ObjectMapper(); //将java对象转化为字符串json String json = mapper.writeValueAsString(user); System.out.println(json); //将json串转化为对象 User objUser = mapper.readValue(json, User.class); System.out.println(objUser); }
-
Ajax实现前后端交互规则
- 编辑页面
/***
* 案例说明: 需要通过ajax 获取user对象
* 细节说明:
* 1.ajax请求 向后端服务器获取的是JSON串
* 2.当JS解析JSON串时,自动转化为JS对象
* 3.所以在ajax回调函数中,可以通过对象.属性的方式获取服务器数据!!!!
*/
async function getUser() {
let {data: result} = await axios.get("getUser")
//let obj = JSON.parse(result)
console.log(result)
//string 需要手动的转化为对象 字符串.属性 一定报错
//object 对象.属性 一定可以成功
alert(typeof result)
console.log(result.name)
}
getUser()
- 编辑后端Servlet
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @author 刘昱江
* @className AxiosServlet
* @description TODO
* @date 2022/10/22 15:17
*/
@WebServlet("/getUser")
public class UserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//java对象
User user = new User(1001,"JSON案例测试");
ObjectMapper mapper = new ObjectMapper();
//要求:json转化时 必须提供set/get方法.否则必定异常
String json = mapper.writeValueAsString(user);
//将json串传递给JS
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write(json);
}
}