JavaWeb AJAX和JSON详解详解详解

美杜莎924

于 2024-04-25 23:25:03 发布

阅读量738

点赞数 25

分类专栏： web 文章标签： maven tomcat servlet

本文链接：https://blog.csdn.net/weixin_63601058/article/details/138197923

版权

web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

-把一个对象转换成json对象（obj对象）

1.什么是AJAX？

AJAX：(Asynchronous Javascript And XML) 翻译成中文就是“异步JavaScript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML，也可以是json格式数据）。

2.同步交互和异步交互

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

3.AJAX的优缺点

AJAX还有一个最大的特点

当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

异步交互：与服务器异步交互。

局部刷新：浏览器页面局部刷新。

优点：

AJAX使用Javascript技术向服务器发送异步请求，为浏览器异步请求提供了一种便捷的方式。
AJAX无须刷新整个页面，使得局部刷新成为可能。
因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX加载性能高一些。

缺点：

AJAX并不适合所有场景，很多时候还是要使用同步交互。例如短信验证码的场景。
AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大。
因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题。
AJAX破坏了浏览器的一些机制，例如历史记录机制，浏览器的回退按钮不再起主要作用。

4.AJAX典型应用场景：

1、当我们在百度搜索中填写一个“Java”关键字时，会出现一个下拉列表，提供一些可选项；我们接着输入“学习”关键字，下拉列表会动态发生变化，提供“Java学习”的一些可选项，这里就使用了AJAX技术。
当文件框发生了输入变化时，浏览器会使用AJAX技术向服务器发送一个请求，查询包含“Java”关键字字的选项，然后服务器会把查询到的结果响应给浏览器，最后浏览器把这些选项显示在下拉列表中。整个过程中页面没有整体刷新，只是刷新了页面中的局部内容而已！当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应。

2、用户注册重名性校验，当输入注册用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为“zhangSan”的用户是否存在，最终服务器返回true表示名为zhangSan的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。整个过程中页面没有整体刷新，只是刷新了页面中的局部内容而已！当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应。

案例：重命名校验：

1.创建一个maven项目

2.WebApp层，创建一个ajaxRename.jsp

这个页面要写页面展示的简易登录,并且有一个鼠标不聚焦除法方法---发送请求

<body>中

<body>
    用户名：<input type="text" id="username" onblur="checkUsername()"><br/>
    年龄：<input type="text" id="age">
</body>

<script>中:

<script> 
function checkUsername() {
        //   访问后台
        //获取表单元素
        const username = document.getElementById("username");
        //   发送请求
            $.ajax({
                type:'get',
                url:'${pageContext.request.contextPath}/user?username='+username,
                success:function (data) {
                    console.log("success.." + data)

                    if (data == 'yes') {

                        alert("用户名重复")
                    }else {
                        alert("该用户名可用")
                    }

                },
                error:function () {//后台发生异常的时候执行回调
                    alert("fail...");
                }
            })
            alert(11111)
        }
</script>

完整jsp页面代码:

<%--
  Created by IntelliJ IDEA.
  User: Chenhh
  Date: 2024/4/25
  Time: 20:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>重名检验</title>
<%--    引入脚本--%>
    <script type="application/javascript" src="js/jquery-3.7.1.js"></script>
<script>
        function checkUsername() {
     
          
         const username = document.getElementById("username");
        //   发
            $.ajax({
                type:'get',
                url:'${pageContext.request.contextPath}/user?username='+username,
                success:function (data) {
                    console.log("success.." + data)

                    if (data == 'yes') {

                        alert("用户名重复")
                    }else {
                        alert("该用户名可用")
                    }

                },
                error:function () {//后台发生异常的时候执行回调
                    alert("fail...");
                }
            })
            alert(11111)
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" onblur="checkUsername()"><br/>
    年龄：<input type="text" id="age">
</body>
</html>

在java包下创建目录controller层,并创建一个新servlet类(注解方式)

这里不连接数据库,模拟用户名是否与'admin'相同.


@WebServlet(name="UserServlet",value="/user")
public class UserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
//        接收请求栏中的参数，也就是获取页面表单中输进去的值
        String username = request.getParameter("username");
        //模拟判断是否重名
        if(username.equals("admin")){
//            注意，这里的值会传入到jsp页面中的data形参中
            response.getWriter().write("yes");
        }else{
            response.getWriter().write("no");
        }
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }
}

5. JQuery 中 AJAX的应用

jQuery函数库能够简化JavaScript的开发，它同样提供了对JavaScript AJAX的简化办法。
我们常用的jQuery AJAX方法有：

$.ajax()
$.get()
$.post()

主要介绍$.ajax()的使用

ajax() 方法用于执行 AJAX（异步 HTTP）请求，$.get()与$.post()只是基于$.ajax()的再封装。

$.ajax()的语法格式如下：
$.ajax({name:value, name:value, ... })

$.ajax()中可选的常用键值对如下：

async:布尔值，表示请求是否异步处理。默认是 true。
data：规定要发送到服务器的数据。
error(xhr,status,error)：如果请求失败要运行的函数，提供三个可选的形参，xhr代表XMLHttpRequest对象，status代表错误状态500、404等错误状态码，error代表输出的错误信息。
success(result,status,xhr)：当请求成功时运行的函数。_xhr代表XMLHttpRequest对象，status代表成功状态200、300等状态码，_result代表返回值数据。
type：规定请求的类型（GET 或 POST），默认为get。
url：规定发送请求的 URL。

6.JSON数据的传输

在上述AJAX的介绍中，我们只是利用response.getWriter().print()方法进行简单数据的输出，这其实并不是我们使用AJAX的初衷，我们使用AJAX是为了更加强大的数据获取与处理，而在JS中，对于数据的处理往往采用JSON格式。因此，我们在Java服务端输出地数据也要转换为JSON格式。

1.把java转换为json

apache提供的json-lib小工具，它可以方便的使用Java语言来创建JSON字符串，也可以把JavaBean转换成JSON字符串。

2.json-lib核心jar包

json-lib核心jar包：
                   json-lib.jar
json-lib的依赖jar包有：
                   commons-lang.jar
                   commons-beanutils.jar
                   commons-logging.jar
                   commons-collections.jar
                   ezmorph.jar

3.json-lib核心类

1.JSONObject

-把一个对象转换成json对象（obj对象）

User user = new User(); 
user.setId(1); user.setUsername("clh"); 
user.setAge(19); 
user.setAddress("运城"); 
JSONObject jo = JSONObject.fromObject(user);
 System.out.println(jo.toString());

-map转换成json对象

Map map = new HashMap<>();
map.put("1","陈林恒");
map.put("2","李四");
map.put("3","王五");
JSONObject jo2 = JSONObject.fromObject(map);
System.out.println(jo2.toString());

- 原生生成json对象的格式

2.JSONArray

通过原生生成json数组格式

JSONArray ja = new JSONArray();
ja.add("张三");
ja.add(20);
System.out.println(ja.toString());//["张三",20]

list->json数组

List list = new ArrayList();
list.add("aaa");
list.add("bbb");
JSONArray ja2 = JSONArray.fromObject(list);
System.out.println(ja2.toString());

arrat->json数组

String[] arr = {"ccc","ddd"};
JSONArray ja3 = JSONArray.fromObject(arr);
System.out.println(ja3.toString());

谢谢你的点赞收藏~

美杜莎924

关注

25
点赞
踩
23

收藏

觉得还不错? 一键收藏
6
评论
JavaWeb AJAX和JSON详解详解详解

AJAX：(Asynchronous Javascript And XML) 翻译成中文就是“异步JavaScript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML，也可以是json格式数据）。
复制链接

扫一扫