看它就够了，让你明白什么是【ajax】

原创已于 2022-10-28 11:17:46 修改 · 426 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #servlet #java

于 2022-10-28 11:14:12 首次发布

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