AJAX

ppgo8 于 2023-05-10 发布

AJAX（Asynchronous Javascript And Xml）

传统请求及缺点

AJAX概述

![对AJAX异步请求的理解]对AJAX异步请求的理解.png)

XMLHttpRequest对象

注意：区分readystate和status状态码

AJAX GET请求

前后端代码AJAX get代码

AJAX get请求如何提交数据给服务器

AJAX GET 请求缓存问题

AJAX POST请求资源

AJAX post请求前后端代码

image-20230511153611921

经典案例

案例1：验证用户名是否可用

案例2：动态展示学员列表

问题：后端要拼接内容成Html内容返回给前端，太复杂。有没有其他办法？

基于JSON的数据交换

JSON基础知识

{"key1":"字符型","key2":数字型}
// JSON对象
{
    "key1":"字符型",
    "key2":数字型,
    "key3":{"name":"value","age":12}
}
// JSON数组及数组对象
{
    "key":[1,2,4],
    "key1":["a","n"],
    "key3":[{"name":"pp", "age":22},{"name":"gg","age":33}]
}

web前端

注意：数字类型可以没有双引号。

web后端

从数据库中取得数据拼接成JSON字符串的方法

手动拼接append

rs数据库查询的结果集。

json.append("[");
while (rs.next()){
    // 获取每个学生的信息
    String name = rs.getString("name");
    String age = rs.getString("age");
    String addr = rs.getString("addr");
    // 手动拼接JSON字符串,示例数据 [{"name":"张三","age":22,"addr":"番禺区" },{"name":"张三","age":22,"addr":"番禺区" }]
    // 一共7段落 {"name":"    张三    ","age":    22    ,"addr":"    番禺区    "},
    json.append("{\"name\":\" ");
    json.append(name);
    json.append("\",\"age\":");
    json.append(age);
    json.append(",\"addr\":\"");
    json.append(addr);
    json.append("\"},");    // 注意最后一行的数据需要删掉逗号
}
json.append("]");
// 不想要逗号 但是没办法直接删除逗号；于是直接把逗号及之后字母都删除了，再把误删的需要的补充回来
jsonStr = json.substring(0, json.length() - 2) + "]";
阿里巴巴的fastjson组件

拼接JSON格式的字符串太复杂，可以使用阿里巴巴的fastjson组件，将java对象转换成json格式的字符串。

使用该方法前引入该包：

  1. 在java项目下新建lib文件夹，复制粘贴jar包到lib文件夹下
  2. 在project structure 中添加依赖

为什么mysql的ja包不添加依赖？

在写代码的时候需要用到jar包里的类才需要添加依赖，mysql的jar包在编程的时候用不到其中的类，所以不需要添加到依赖中。

代码：

基于XML的数据交换

注意点

前端代码

注意点：

// 2.注册回调函数
xhr.addEventListener("readystatechange", function (){
    if (xhr.readyState === 4){
        if (xhr.status === 200){
            // 使用XMLHttpRequest对象的responseXML属性接收返回的数据，可以自动封装为document对象。
            // console.log(xhr.responseXML)
            // 前端手动拼接
            const uname = xhr.responseXML.querySelectorAll("name")   // 函数调用者是返回来的document对象；而不是经常用的documnet；因为要查找的内容不再documnet里而在返回的对象中
            const age = xhr.responseXML.querySelectorAll("age")
            const addr = xhr.responseXML.querySelectorAll("addr")
            const stuinfo = []
            for (let i =0;i<uname.length;i++){
                stuinfo.push("<tr><td>"+(i+1)+"</td><td>"+uname[i].innerHTML+"</td> <td>"+age[i].innerHTML+"</td><td>"+addr[i].innerHTML+"</td></tr>")
            }
            // 数组转字符串 渲染到页面中
            document.querySelector("tbody").innerHTML = stuinfo.join("")
        } else{
            alert(xhr.status)
        }

后端代码

注意点：返回数据的响应类型

/**
 * @时间: 2023-05-15
 * @作者： ppgo8
 * @描述：对应07-使用XML交换数据.html
 *       学员信息动态显示
 *       后端返xml字符串
 **/
@WebServlet("/ajaxrequest7")
public class AjaxRequest8Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 设置响应类型：xml
        response.setContentType("text/xml;charset=utf-8");
        PrintWriter out = response.getWriter();

        // 返回数据，这里就不连接数据库了直接写死
        StringBuilder xml = new StringBuilder();
        xml.append("<students><student>");
        xml.append("<name>张三</name>");
        xml.append("<age>22</age>");
        xml.append("<addr>天河区</addr>");
        xml.append("</student>");
        xml.append("<student>");
        xml.append("<name>李四</name>");
        xml.append("<age>23</age>");
        xml.append("<addr>番禺区</addr>");
        xml.append("</student>");
        xml.append("</students>");
        // 返回
        out.print(xml);
    }
}

AJAX乱码问题

AJAX的异步和同步

AJAX代码封装

补充

附录：IDEA快捷键

shift+tab 代码块左移

alt一直按住+鼠标左键下托（鼠标点击不行） 多个光标同时编辑