JAVA—— AJAX[通俗易懂]

2022-09-08 09:45:57 浏览数 (1)

大家好，又见面了，我是你们的朋友全栈君。

文章目录

  • 1、Ajax快速入门
    • 1.1、AJAX介绍
    • 1.2、原生JS实现AJAX
    • 1.3、原生JS实现AJAX详解
    • 1.4、JQuery的GET方式实现AJAX
    • 1.5、JQuery的POST方式实现AJAX
    • 1.6、JQuery的通用方式实现AJAX
    • 1.7、小结
  • 2、JSON的处理
    • 2.1、JSON回顾
    • 2.2、JSON转换工具的介绍
    • 2.3、JSON转换练习
    • 2.4、小结
  • 3、综合案例 搜索联想
  • 4、综合案例 分页
    • 4.1、案例效果和环境准备
    • 4.2、案例的分析
    • 4.3、案例的实现
    • 4.4、点击按钮分页

1、Ajax快速入门

1.1、AJAX介绍

  • AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。
  • 本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。
  • 一般的网页如果需要更新内容，必需重新加载个页面。
  • 而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下，对网页的部分内容进行局部更新。

​

1.2、原生JS实现AJAX

1.3、原生JS实现AJAX详解

  • 核心对象：XMLHttpRequest ​ 用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  • 打开链接：open(method,url,async) ​ method：请求的类型 GET 或 POST。 ​ url：请求资源的路径。 ​ async：true(异步) 或 false(同步)。
  • 发送请求：send(String params) ​ params：请求的参数(POST 专用)。
  • 处理响应：onreadystatechange ​ readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪。 ​ status：200-响应已全部 OK。
  • 获得响应数据形式 ​ responseText：获得字符串形式的响应数据。 ​ responseXML：获得 XML 形式的响应数据。

1.4、JQuery的GET方式实现AJAX

1.5、JQuery的POST方式实现AJAX

1.6、JQuery的通用方式实现AJAX

1.7、小结

  • AJAX(Asynchronous JavaScript And XML)： 异步的 JavaScript 和 XML。
  • 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部 分内容进行局部更新。
  • 同步和异步
    • 同步：服务器端在处理过程中，无法进行其他操作。
    • 异步：服务器端在处理过程中，可以进行其他操作。
  • GET 方式实现：$.get();
  • POST 方式实现：$.post();
    • url：请求的资源路径。
    • data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
    • callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
    • type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
  • 通用方式实现：$.ajax();
    • url：请求的资源路径。
    • async：是否异步请求，true-是，false-否 (默认是 true)。
    • data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
    • type：请求方式，POST 或 GET (默认是 GET)。
    • dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
    • success：请求成功时调用的回调函数。
    • error：请求失败时调用的回调函数。

2、JSON的处理

2.1、JSON回顾

  • JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。
  • 它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的 提升网络传输效率。
  • 创建格式
  • 常用方法

2.2、JSON转换工具的介绍

  • 我们除了可以在 JavaScript 中来使用 JSON 以外，在 JAVA 中同样也可以使用 JSON。
  • JSON 的转换工具是通过 JAVA 封装好的一些 JAR 工具包。
  • 可以将 JAVA 对象或集合转换成 JSON 格式的字符串，也可以将 JSON 格式的字符串转成 JAVA 对象。
  • Jackson：开源免费的 JSON 转换工具，SpringMVC 转换默认使用 Jackson。
      1. 导入 jar 包。
      2. 创建核心对象。
      3. 调用方法完成转换。
  • 常用类
  • ObjectMapper常用方法

2.3、JSON转换练习

2.4、小结

  • Jackson： 开源免费的 JSON 转换工具，SpringMVC 转换默认使用 Jackson。
  • 可以将 JAVA 对象或集合转换成 JSON 格式的字符串，也可以将 JSON 格式的字符串转成 JAVA 对象。
  • 常用类

3、综合案例 搜索联想

4、综合案例 分页

​ 瀑布流无限加载数据分页

4.1、案例效果和环境准备

  • 案例效果
  • 环境准备
    • 1.导入“案例二的sql语句.sql”文件（已在当天的SQL语句中提供）
    • 2.导入“分页案例原始环境”中的ajax03项目（已在当天的资料中提供）

4.2、案例的分析

  • 如何确定当前显示的数据已经浏览完毕？
    • 公式：(滚动条距底部的距离(自定义高度) 滚动条上下滚动的距离 当前窗口的高度) >= 当前文档的高度
    • 当前文档高度：存储10条数据，100px。
    • 滚动条距底部的距离：1px。
    • 当前窗口的高度：80px。
    • 滚动条上下滚动的距离：>=19px。
  • 前置知识

4.3、案例的实现

  • 实现思路
    • 页面
      1. 定义发送请求标记。
      2. 定义当前页码和每页显示的条数。
      3. 定义滚动条距底部的距离。
      4. 设置页面加载事件。
      5. 为当前窗口绑定滚动条滚动事件。
      6. 获取必要信息(当前窗口的高度,滚动条上下滚动的距离,当前文档的高度)。
      7. 计算当前展示数据是否浏览完毕。
      8. 判断请求标记是否为 true。
      9. 将请求标记置为 false，当前异步操作完成前，不能重新发起请求。
      10. 根据当前页和每页显示的条数来请求查询分页数据。
      11. 当前页码 1。
    • 服务器
      1. 获取请求参数(当前页,每页显示的条数)。
      2. 根据当前页码和每页显示的条数，调用业务层的方法，得到分页 Page 对象。
      3. 将得到的数据转为 json。
      4. 将数据响应给客户端。

4.4、点击按钮分页

  • 案例效果和环境准备
    • 按钮效果

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/156982.html原文链接：https://javaforall.cn

ajax xml java javascript jquery

0 人点赞