小白学习Java第三十九天

sjxxxx_

于 2022-09-29 16:54:26 发布

阅读量159

点赞数

分类专栏： Java小白文章标签： ajax javascript servlet

本文链接：https://blog.youkuaiyun.com/sjxxxx_/article/details/127109981

版权

Java小白专栏收录该内容

60 篇文章

订阅专栏

本文详细介绍了Ajax技术的使用场景、概念、分类以及jQuery的封装方法，包括$.ajax()、$.get()和$.post()。同时，讲解了JSON的数据格式、转换方法，并给出了学号唯一性验证和二级联动的实战案例。此外，还讨论了Json在数据交换和接口开发中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今日内容

Ajax

jQuery版Ajax

JSON

后台如何将数据（对象，集合）转换成json格式

前端页面中如何处理json数据

Ajax技术

Ajax概述

1）使用场景：

1.在线视频、直播平台等…评论实时更新、点赞、小礼物、…

2.会员注册时的信息验证，手机号、账号唯一

3.百度关键搜索补全功能

2）概念：

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

同步方式和异步方式的区别

同步：

发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会处于一直等待过程中。

异步：

发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。

4）Ajax技术的分类：

原生的js异步ajax（了解）

jQuery封装的ajax（重点掌握）

JS原生的Ajax

实现步骤：

创建XMLHTTPRequest对象：var xhr=new XMLHttpRequest();
设置访问的方式和路径：xhr.open("get","ajax");
发送请求：xhr.send();
处理请求的结果：xhr.onreadystatechange=function(){}

5）readyState存有 XMLHttpRequest 的状态信息

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

案例：

1.创建html页面，使用原生ajax发送异步请求：

后台servlet

jquery封装的ajax

1）概述：

jQuery是一个优秀的js框架，对JS原生的Ajax进行了封装，封装后的Ajax的操作方法更简洁，功能更强大，程序员最普遍使用，语法结构简单，代码可读性好。

2）与Ajax操作相关的jQuery方法经常使用的有三种：

$.ajax()

语法结构：

$.ajax({

url:"",

data:{“name”:”张三”,”age”:23},

type:"post/get",

async:true,

dataType:"text",

success:function(obj){},

error:function(xhr,msg,ex){}

})

2）特点：

可以发送get请求和post请求，
可以进行代码的调试
各个参数的位置可以随意调换也可以省略

案例：

页面：

servlet:

关于error函数示例：

(默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "notmodified" 和 "parsererror"

解析异常（返回数据类型异常）

路径异常

$.get()和$.post()

1）概述：

$.ajax语法比较复杂，写起来对于初学者会感觉比较难，对于$.ajax也提供了两个简写方式：$.get/$.post。

但是如果使用简写方式需要考虑的问题是：不能调试代码，参数比较固定，只能实现基本的请求操作。

2）语法：

$.get/$post(url,data,callback,datatype)参数顺序不能改变。

参数含义：

页面代码：

servet：

$.ajax() $.get() $.post三者之间的关系？

相同点：

都是jQuery封装的方法实现异步交互。

不同点：

$.ajax()是jQuery的第一次封装，使用时稍显麻烦，但是功能强大，覆盖了get和post请求，有错误调试能力，写法顺序可以改变。

$.post()和$.get()是jQuery Ajax的第二次封装，由于$.Ajax()写法过于臃肿，简化为$.post()和$.get()，功能是相同的没有区别。但是写法要求更高，顺序不能改变,不能进行调试。

ajax案例-学生姓名唯一性验证

需求说明：

学生管理系统增加学生功能中添加学号唯一性验证。

表单提交之前验证学号是否已经添加，如果已经添加给出提示；

如果没有添加过，提示可以使用。

页面：

servlet:

service:

dao:

Json数据

json概述

1）概念：

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

2）作用：