Ajax&Json基础学习

最新推荐文章于 2022-12-24 11:08:47 发布
最新推荐文章于 2022-12-24 11:08:47 发布
阅读量220 收藏
点赞数
分类专栏： # 前端、javaweb 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H200102/article/details/110646225
版权
本文介绍了Ajax的基础，包括原生JavaScript和jQuery的实现方式，如$.ajax(), $.get()和$.post()。同时讲解了JSON数据的获取和与Java对象的转换，并通过一个校验用户名存在的案例展示了Ajax与JSON的实际应用，涉及到Ajax请求和服务器响应的JSON数据处理。" 138867568,7463411,深入理解Spring框架与全家桶,"['spring', 'java', '后端开发', '面试', '框架']
摘要由CSDN通过智能技术生成

学习地址：黑马最新JavaWeb入门到入土（idea版）day22-23的课程
配套资源：Ajax&Json基础学习和redis基础学习.zip

Redis的博客：https://blog.csdn.net/H200102/article/details/110645867

使用Ajax和Json还有Redis实现的案例：https://blog.csdn.net/H200102/article/details/110648690

压缩包文件内容：
在这里插入图片描述

文章目录

一、Ajax

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

2、实现方式：

（1）原生的JS实现方式（了解，用得不多）

1）页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-原生JS实现ajax </title>

    <script>
        function fun() {
            // 发送异步请求
            // 1. 创建和新对象
            var xmlhttp;
            if(window.XMLHttpRequest)
            {   // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else
            {   // code for IE6, IE5
                xmlhttp = new ActiveXObject("Mircosoft.XMLHTTP");
            }

            // 2.建立连接
            /*
       参数：
         1. 请求方式：GET、POST
           * get方式，请求参数在URL后边拼接。send方法为空参
           * post方式，请求参数在send方法中定义
         2. 请求的URL：
         3. 同步或异步请求：true（异步）或 false（同步）
      */
            xmlhttp.open("GET","ajaxServlet?username=tom",true); // 异步请求

            // 3.发送请求
            xmlhttp.send();

            //4.接受并处理来自服务器的响应结果
            //获取方式 ：xmlhttp.responseText
            //什么时候获取？当服务器响应成功后再获取

            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
            xmlhttp.onreadystatechange = function () {
                //判断readyState就绪状态是否为4，判断status响应状态码是否为200
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    // 获取服务器的响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }

        }

        
    </script>

</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">

    <input>

</body>
</html>

2）创建对应Servlet：

package cn.itcast.web.servlet;

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 huan
 * @create 2020-07-05 23:29
 */
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1. 获取请求参数
        String username = request.getParameter("username");

        // 处理业务逻辑，耗时
        try {
            Thread.sleep(5000);   //处理5秒钟
        } catch (InterruptedException e) {
            e.printStackTrace();
        }

        // 2.打印username
        System.out.println(username);

        // 3.响应
        response.getWriter().write("hello:"+username);

    }

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

3）运行：
当页面中没有文本框时，点击页面的“发送异步请求”按钮后，5秒后可以在控制台看到输出语句username “tom”，在页面弹出框中显示“hello tom”。

有文本框后，若点击整体刷新，则输入在文本框中的内容就会消失。但若只是点击按钮“发送异步请求”，文本框内容还在，即实现了局部刷新。

（2）JQeury实现方式

1）$.ajax()

Servlet没有改变，页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-原生JS实现ajax </title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            //使用$.ajax()发送异步请求
            $.ajax({
                url:"ajaxServlet",     // 请求路径
                type:"POST",            //请求方式,默认是GET
                //data: "username=jack&age=23", //请求参数
                data:{"username":"jack","age":23},       //请求参数，JSON的数据格式
                //响应成功后的回调函数
                success:function (data) {
                    alert(data);
                },
                //表示如果请求响应出现错误，会执行的回调函数，请求路径错误等等
                error:function () {
                    alert("出错了。。。")
                },
                //设置接受到的响应数据的格式
                dataType:"text"
                });

        }

    </script>

</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">

    <input>

</body>
</html>

2） $.get()：发送get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-JQuery实现方式2_get </title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            $.get("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");
        }

    </script>

</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">

    <input>

</body>
</html>

3）$.post()：发送post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-JQuery实现方式3_post </title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            $.post("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");
        }

    </script>

</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">

    <input>

</body>
</html>

二、JSON

（1）获取数据

1）json对象.键名
2） json对象[“键名”]
3） 数组对象[索引]
4）遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-json数据语法</title>
</head>
<body>
    <script>
        var person = {"name": "张三", age: 23, 'gender': true};
        var ps = [{"name": "张三", "age": 23, "gender": true},
            {"name": "李四", "age": 24, "gender": true},
            {"name": "王五", "age": 25, "gender": false}];

        //获取person对象中所有的键和值
        //for in 循环
        /* for(var key in person){     
             //alert(key + ":" + person.key); //这样的方式获取不行。因为相当于 person."name"
             console.log(key+":"+person[key]);
           }*/
        //获取ps中的所有值
        for (var i = 0; i < ps.length; i++) {
            var p = ps[i];
            for(var key in p){
                console.log(key+":"+p[key]);
                console.log("循环一次");
            }
        }



    </script>

</body>
</html>

（2）JSON数据和Java对象的相互转换

package cn.itcast.test;

import cn.itcast.domain.Person;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;

import java.io.File;
import java.io.FileWriter;
import java.util.*;

/**
 * @author huan
 * @create 2020-07-06 17:47
 */
public class JacksonTest {

    //Java对象转为JSON字符串
    @Test
    public void test1() throws Exception {
        // 创建Person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");

        // 2.创建Jackson的和新对象， ObjectMapper
        ObjectMapper mapper = new ObjectMapper();

        // 3.调用方法转换
        /*
            转换方法：
                writeValue(参数1，obj):
                    参数1：
                        File：将obj对象转换为JSON字符串，并保存到指定的文件中
                        Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
                        OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
                writeValueAsString(obj):将对象转为json字符串

         */
        String json = mapper.writeValueAsString(p);
        //JSON格式：{"name":"张三","age":23,"gender":"男"}
        //System.out.println(json);//{"name":"张三","age":23,"gender":"男"}

        //writeValue，将数据写到a.txt文件中
        // mapper.writeValue(new File("a.txt"),p);

        //writeValue.将数据关联到Writer中
        mapper.writeValue(new FileWriter("b.txt"),p);
    }

    // 测试 @JsonFormat(pattern = "yyyy-MM-dd") 和 @JsonIgnore // 忽略该属性
    @Test
    public void test2() throws Exception {
        //1.创建Person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");
        p.setBirthday(new Date());

        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(p);

        System.out.println(json);//{"name":"张三","age":23,"gender":"男","birthday":1530958029263}
        //{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"}
    }

    // 测试3. 复杂java对象转换
    //1. List：数组
    @Test
    public void test3() throws Exception {
        //1.创建Person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");
        p.setBirthday(new Date());

        Person p1 = new Person();
        p1.setName("张三");
        p1.setAge(23);
        p1.setGender("男");
        p1.setBirthday(new Date());

        Person p2 = new Person();
        p2.setName("张三");
        p2.setAge(23);
        p2.setGender("男");
        p2.setBirthday(new Date());


        //创建List集合
        List<Person> ps = new ArrayList<Person>();
        ps.add(p);
        ps.add(p1);
        ps.add(p2);


        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(ps);
        // [{},{},{}]
        //[{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"}]
        System.out.println(json);
    }

    // 测试3. 复杂java对象转换
    //2. Map：对象格式一致
    @Test
    public void test4() throws Exception {
        //1.创建map对象
        Map<String,Object> map = new HashMap<String,Object>();
        map.put("name","张三");
        map.put("age",23);
        map.put("gender","男");

        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(map);
        //{"name":"张三","age":23,"gender":"男"}
        System.out.println(json);//{"gender":"男","name":"张三","age":23}
    }

    //演示 JSON字符串转为Java对象
    @Test
    public void test5() throws Exception {
        //1.初始化JSON字符串
        String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";

        //2.创建ObjectMapper对象
        ObjectMapper mapper = new ObjectMapper();
        //3.转换为Java对象 Person对象
        Person person = mapper.readValue(json, Person.class);

        System.out.println(person);
    }

}

三、案例：校验用户名是否存在

（1）需求：校验用户名是否存在，当鼠标离焦时，查询该用户名是否已经注册

（2）服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：

  1. $.get(type):将最后一个参数type指定为"json"
  2. 在服务器端设置MIME类型
    response.setContentType(“application/json;charset=utf-8”);

（3）代码实现：

1）前端页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>
        //在页面加载完成后
        $(function () {
            // 给username绑定事件
            $("#username").blur(function () {
                // 获取文本框输入的值
                var username = $(this).val();
                /*期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
                *        {"userExsit":false,"msg":"用户名可用"}*/
                $.get("findUserServlet",{username:username},function (data) {
                    // 判断userExsit键的值是否是true
                    //alert(data);
                    var span = $("#s_username");
                    if(data.userExsit){
                        // 用户名存在
                        span.css("color","red");
                        span.html(data.msg);
                    }else{
                        // 用户名不存在
                        span.css("color","green");
                        span.html(data.msg);
                    }

                });

            });
        });



    </script>

</head>
<body>

    <form>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <span id="s_username"></span><br>
        <input type="password" name="password" placeholder="请输入密码"><br>
        <input type="submit" value="注册"><br>

    </form>

</body>
</html>

2）对应Servlet：

package cn.itcast.web.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.sun.xml.internal.ws.runtime.config.TubelineFeatureReader;
import javafx.beans.binding.ObjectExpression;

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;
import java.util.HashMap;
import java.util.Map;

/**
 * @author huan
 * @create 2020-07-07 0:17
 */
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.获取用户名
        String username = request.getParameter("username");

        //2.调用service层判断用户名是否存在

        //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
        //                         {"userExsit":false,"msg":"用户名可用"}

        //设置响应的数据格式为json
        response.setContentType("application/json;charset=utf-8");
        Map<String,Object> map = new HashMap<String, Object>();

        if("tom".equals(username)){ //假设service查询到的名字是tom
            // 存在
            map.put("userExsit", true);
            map.put("msg","此用户太受欢迎，请更换一个");
        }else {
            // 不存在
            map.put("userExit",false);
            map.put("msg","此用户名可用");
        }
        // 将map转为json，并且传递给客户端
        // 将map转为json
        ObjectMapper mapper = new ObjectMapper();
        // 并且传递给客户端
        mapper.writeValue(response.getWriter(),map);


    }

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

3）运行效果：
从Network可以看出，鼠标离开input后，即向后台发送请求。
在这里插入图片描述

H千面
关注
专栏目录
Ajax&Axiso&Json基础入门学习和使用
Wi001Yan的博客
06-20 247
Ajax&Axiso&Json基础入门学习和使用
AJAX基础操作&JSON基础学习
感谢关注
01-05 674
AJAX基础操作&JSON基础学习
Ajax&Json
weixin_45676761的博客
05-12 249
为了使前后端交互更加的快捷、轻便、流畅，提升用户体验，我们一定要学习两个必不可少的技术：Ajax和Json。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Json是一种轻量级的数据交换格式。
AJAX&JSON基础入门与提升
轻松玩编程
11-08 869
身材不好就去锻炼，没钱就努力去赚。别把窘境迁怒于别人，唯一可以抱怨的，只有不够努力的自己。你好，我是梦阳辰！快来和我一起学习吧！ 1.什么是JSON JSON(JavaScript Object Notation,JS对象标记)是一种轻量级的数据交换格式，目前使用特别广泛。 采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。 在JS语言中，一切都是对象。因此，任何JS支持的类型都.
AJAX&JSON
谁D了我的BUG
07-25 2371
原生js的AJAX应用 传统请求的缺点 我们以前的学习过程,浏览器对服务器发出的请求,都是传统的全局刷新的请求. 如果我们仅仅只需要更新页面中的某一小块的内容,我们传统的全局刷新的形式,其他的部分也会随着需要更新的这一小块内容,也刷新一次. 我们现在想要的效果是,哪一块需要更新,就刷哪一块,其他的部分保持不动.这种请求,为局部刷新的请求.在浏览器上体现就是做操作以后，刷新按钮没有动 我们现在急需...
Ajax&axios&JSON
Faye_xue的博客
11-07 471
了解Ajax技术，充分学习异步请求局部刷新能够使用 axios 发送 ajax 请求 熟悉 json 格式，并能使用 Fastjson 完成 java 对象和 json 串的相互转换。
JavaWeb学习(十)---AJAX&JSON
weixin_47109902的博客
10-23 218
JavaWeb学习(十)---AJAX&JSON
JavaWeb学习笔记之——Ajax & Json
前尘忆梦的博客
11-18 902
Ajax & Json 文章目录Ajax & Json1、Ajax1.1、概念1.2、实现方式2、Json2.1、概念2.2、语法 1、Ajax 1.1、概念 ASynchronous JavaScript And XML 异步的 JavaScript 和 XML 异步和同步：客户端和服务器端相互通信的基础上 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pDvc79CJ-1637242119112)(素材/同步和异步.png)] 同步：客户端必须等待服务器
黑马学习ajax&json 笔记
diaopitian0181的博客
05-21 1284
## 今日内容 1. AJAX： 2. JSON # AJAX： 1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步：客户端和服务器端相互通信的基础上 * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以...
JavaWeb学习之Ajax、JSON08
最新发布
hhhhhh的博客
12-24 1232
目录​​​​​​​1.概念2.JQeury实现方式Ajax方式2.JSON1.概念2.语法1.基本规则2.获取数据1.JS0N转为]ava对象2.Java对象转换JS0N异步的]avaScript和XML 1.异步和同步：客户端和服务器端相互通信的基础上 *客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 *客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。1.$.ajax（）通用方式 语法：$.ajax({键值对)； //使用$，ajax（）发送异步请求
Ajax&Json基础学习和redis基础学习.zip
07-09
通过阅读压缩包中的学习笔记和练习源码，你可以深入理解Ajax的异步通信机制、JSON的数据交换格式以及Redis的数据存储和操作。同时，参考配套博客中的内容，可以更全面地掌握这三个技术的使用场景和最佳实践。在实践...
一头扎进Ajax&Json视频教程第一讲
10-08
源码文件"一头扎进Ajax&Json视频教程源码.rar"可能包含了与视频教程配合的示例代码，你可以通过学习这些代码加深对Ajax和Json实际应用的理解。通过动手实践，你可以更好地掌握这些技术，并在自己的项目中运用自如。 ...
day03-前端(ajax&json).zip
10-07
在这一天的学习中，我们将深入探讨两个关键概念：AJAX（异步JavaScript和XML）和JSON（JavaScript Object Notation）。这两个技术极大地提升了网页的交互性和数据处理能力。 **AJAX**，全称Asynchronous JavaScript...
一头扎进Ajax&Json;视频教程 java1234出品
09-30
通过这个视频教程，学习者不仅能够理解Ajax和Json的基本概念，还能学会如何在实际项目中运用它们，提升Web应用的交互性和效率。在观看教程的同时，结合实践练习，将有助于巩固所学知识，更好地掌握这两项技术。
一头扎进Ajax&Json视频教程第三讲A
10-08
通过本讲的学习，你将对Ajax和JSON有更深入的理解，能够自如地在项目中应用这两种技术，提升Web应用的交互性和效率。 请观看[www.java1234.com]《一头扎进Ajax&Json》第三讲A.mp4，跟随教程一起实践，理论与实践相...
javaweb用户信息的增删改查
H.千面的博客
06-02 8666
需求：用户信息的增删改查操作 设计： 技术选型：Servlet+JSP+MySQL+JDBCTempleat+Duird+BeanUtilS+tomcat 数据库设计： create database day17; -- 创建数据库 use day17; -- 使用数据库 create table user( -- 创建表 id int primary key auto_increment, name varchar(20) not null, gende.
框架Bootstrap实现响应式布局
H.千面的博客
05-07 1809
响应式布局： 同一套页面可以兼容不同分辨率的设备。 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子 步骤： 定义容器。相当于之前的table、 容器分类： container：两边留白，固定宽度（每一种设备的宽度不一样） container-fluid：每一种设备都是100%宽度 定义行。相当于之前的tr 样式：row 定义元素。指定该元素在不...
javaweb用户登录案例
H.千面的博客
05-16 1742
目录用户登录案例需求：分析：开发步骤：1.创建项目，导入html页面，配置文件，jar包2. 创建数据库环境：3.创建包cn.itcast.domain,创建类User4.创建包cn.itcast.util,编写工具类JDBCUtils5.创建包cn.itcast.dao,创建类UserDao,提供login方法；6.测试类test016. 编写cn.itcast.web.servlet.LoginServlet类7. 编写FailServlet和SuccessServlet类8. login.html中f
前端静态注册页面
H.千面的博客
05-01 1161
这个注册页面是看的课程里的，所以有一样的很正常。 页面效果： 需要的图片： 背景图片register_bg.png 验证码图片verify_code.jpg： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面&...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值