AJAX与JSON

这篇具有很好参考价值的文章主要介绍了AJAX与JSON。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.AJAX

1.AJAX概述

AJAX(Asynchronous JavaScript And XML):异步的 JavaScript 和 XML

本身不是一种新技术,而是多个技术综合。用于快速创建动态网页的技术

一般的网页如果需要更新内容,必需重新加载个页面。

而 Ajax通过浏览器与服务器进行少量数据交换,就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下,对网页的部分内容进行局部更新

同步:服务器端在处理过程中,无法进行其他操作。

异步:服务器端在处理过程中,可以进行其他操作

总结:异步的处理网络请求的工具,可以实现局部刷新

AJAX与JSON,前端,ajax,json,前端

2.原生JS实现AJAX 与详解

package 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;

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应的乱码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //1.获取请求参数
        String username = req.getParameter("username");

        //模拟服务器处理请求需要5秒钟
        /*try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }*/

        //2.判断姓名是否已注册
        if("zhangsan".equals(username)) {
            resp.getWriter().write("<font color='red'>用户名已注册</font>");
        }else {
            resp.getWriter().write("<font color='green'>用户名可用</font>");
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<form autocomplete="off">
    姓名:<input type="text" id="username">
    <span id="uSpan"></span>
    <br>
    密码:<input type="password" id="password">
    <br>
    <input type="submit" value="注册">
</form>
</body>
<script>
    //1.为姓名绑定失去焦点事件
    document.getElementById("username").onblur = function() {
        //2.创建XMLHttpRequest核心对象
        let xmlHttp = new XMLHttpRequest();

        //3.打开链接
        let username = document.getElementById("username").value;
        xmlHttp.open("GET","userServlet?username="+username,true);
        //xmlHttp.open("GET","userServlet?username="+username,false);

        //4.发送请求
        xmlHttp.send();

        //5.处理响应
        xmlHttp.onreadystatechange = function() {
            //判断请求和响应是否成功
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                //将响应的数据显示到span标签
                document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
            }
        }
    }
</script>
</html>

核心对象: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 形式的响应数据

3.JQuery的GET方式实现AJAX

核心语法:$.get(url,[data],[callback],[type]);

url:请求的资源路径。

data:字符串类型,发送给服务器端的请求参数,格式可以是key=value,也可以是 js 对象。[可选参数]

callback:当请求成功后的回调函数,可以在函数中编写我们的逻辑代码。 [可选参数]

type:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。[可选参数]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
</head>
<body>
<form autocomplete="off">
  姓名:<input type="text" id="username">
  <span id="uSpan"></span>
  <br>
  密码:<input type="password" id="password">
  <br>
  <input type="submit" value="注册">
</form>
</body>
<script src="js/jquery-3.7.1.js"></script>
<script>
  //1.为用户名绑定失去焦点事件
  $("#username").blur(function () {
    let username = $("#username").val();
    //2.jQuery的GET方式实现AJAX
    $.get(
            //请求的资源路径
            "userServlet",
            //请求参数
            "username=" + username,
            //回调函数
            function (data) {
              //将响应的数据显示到span标签
              $("#uSpan").html(data);
            },
            //响应数据形式
            "text"
    );
  });
  btn.onclick(function(){
    alert('点我呀');
  })
</script>
</html>

4.JQuery的POST方式实现AJAX

核心语法:$.post(url,[data],[callback],[type]);

url:请求的资源路径。

data:发送给服务器端的请求参数,格式可以是key=value,也可以是 js 对象

callback:当请求成功后的回调函数,可以在函数中编写我们的逻辑代码

type:预期的返回数据的类型,取值可以是 xml, html, js, json, text等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
</head>
<body>
<form autocomplete="off">
  姓名:<input type="text" id="username">
  <span id="uSpan"></span>
  <br>
  密码:<input type="password" id="password">
  <br>
  <input type="submit" value="注册">
</form>
</body>
<script src="js/jquery-3.7.1.js"></script>
<script>
  //1.为用户名绑定失去焦点事件
  $("#username").blur(function () {
    let username = $("#username").val();
    //2.jQuery的POST方式实现AJAX
    $.post(
            //请求的资源路径
            "userServlet",
            //请求参数
            "username=" + username,
            //回调函数
            function (data) {
              //将响应的数据显示到span标签
              $("#uSpan").html(data);
            },
            //响应数据形式
            "text"
    );
  });
</script>
</html>

5.JQuery的通用方式实现AJAX 

核心语法:$.ajax({name:value,name:value,…});

url:请求的资源路径。

async:是否异步请求,true-是,false-否 (默认是 true)。

data:发送到服务器的数据,可以是键值对形式,也可以是 js 对象形式。

type:请求方式,POST 或 GET (默认是 GET)。

dataType:预期的返回数据的类型,取值可以是 xml, html, js, json, text等。

success:请求成功时调用的回调函数。

error:请求失败时调用的回调函数。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
</head>
<body>
<form autocomplete="off">
  姓名:<input type="text" id="username">
  <span id="uSpan"></span>
  <br>
  密码:<input type="password" id="password">
  <br>
  <input type="submit" value="注册">
</form>
</body>
<script src="js/jquery-3.7.1.js"></script>
<script>
  //1.为用户名绑定失去焦点事件
  $("#username").blur(function () {
    let username = $("#username").val();
    //2.jQuery的通用方式实现AJAX
    $.ajax({
      //请求资源路径
      url:"userServlet",
      //url:"userServletxxx", //测试回调函数
      //是否异步
      async:true,
      //请求参数
      data:"username="+username,
      //请求方式
      type:"POST",
      //数据形式
      dataType:"text",
      //请求成功后调用的回调函数
      success:function (data) {
        //将响应的数据显示到span标签
        $("#uSpan").html(data);
      },
      //请求失败后调用的回调函数
      error:function () {
        alert("操作失败...");
      }
    });
  });
</script>
</html>

2.JSON

1.JSON的概述

JSON(JavaScript Object Notation):是一种轻量级的数据交换格式

它是基于 ECMAScript 规范的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写,同时也易于计算机解析和生成,并有效的 提升网络传输效率

创建格式

类型 语法 说明
对象类型 {name:value,name:value,...} name是字符串类型,value可以是任意类型
数组/集合类型 [{name:value,...},{name:value,...}]
混合类型 {name:
    [{name:value,...},{name:value,...}]
}

常用方法

成员方法 说明
stringify(对象) 将指定对象转换为json格式字符串
parse(字符串) 将指定json格式字符串解析成对象

2.JSON转换工具 

我们除了可以在 JavaScript 中来使用 JSON 以外,在 JAVA 中同样也可以使用 JSON

JSON 的转换工具是通过 JAVA 封装好的一些 JAR 工具包

可以将 JAVA 对象或集合转换成 JSON 格式的字符串,也可以将 JSON 格式的字符串转成 JAVA 对象

Jackson:开源免费的 JSON 转换工具,SpringMVC 转换默认使用 Jackson

        1.导入 jar 包。

       2. 创建核心对象。

       3. 调用方法完成转换

常用类

类名 说明
ObjectMapper 是Jackson工具包的核心类,它提供一些方法来实现JSON字符串和对象之间的转换
TypeReference 对集合泛型的反序列化,使用TypeReference可以明确的指定反序列化的对象类型

ObjectMapper常用方法

方法名 说明
String writeValueAsString(Object obj) 将Java对象转换成JSON字符串
TreadValue(String json, Class valueType) 将JSON字符串转换成Java对象
TreadValue(String json,TypeReference valueTypeRef) 将JSON字符串转换成Java对象

3.JSON转换 

1.对象转 JSON, JSON 转对象

User类

package Servlet02;

public class User {
    private String name;
    private Integer age;

    public User() {
    }

    public User(String name, Integer age) {
        this.name = name;
        this.age = age;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    @Override
    public String toString() {
        return "User{" +
                "name='" + name + '\'' +
                ", age=" + age +
                '}';
    }
}
package Servlet02;

import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;

import java.util.ArrayList;
import java.util.HashMap;

/*
    JSON转换工具的使用
 */
public class ObjectMapperTest {
    private ObjectMapper mapper = new ObjectMapper();
    /*
        1.User对象转json, json转User对象
          json字符串 = {"name":"张三","age":23}
          user对象 = User{name='张三', age=23}
     */
    @Test
    public void test01() throws Exception{
        //User对象转json
        User user = new User("张三",23);
        String json = mapper.writeValueAsString(user);
        System.out.println("json字符串:" + json);

        //json转User对象
        User user2 = mapper.readValue(json, User.class);
        System.out.println("java对象:" + user2);
    }
}

2.Map转 JSON, JSON 转 Map

/*
  2.map<String,String>转json, json转map<String,String>
  json字符串 = {"姓名":"张三","性别":"男"}
  map对象 = {姓名=张三, 性别=男}
*/
@Test
public void test02() throws Exception{
    //map<String,String>转json
    HashMap<String,String> map = new HashMap<>();
    map.put("姓名","张三");
    map.put("性别","男");
    String json = mapper.writeValueAsString(map);
    System.out.println("json字符串:" + json);

    //json转map<String,String>
    HashMap<String,String> map2 = mapper.readValue(json, HashMap.class);
    System.out.println("java对象:" + map2);
}

3.Map转 JSON, JSON 转 Map 

 /*
  3.map<String,User>转json, json转map<String,User>
    json字符串 = {"一班":{"name":"张三","age":23},"二班":{"name":"李四","age":24}}
    map对象 = {一班=User{name='张三', age=23}, 二班=User{name='李四', age=24}}
 */
    @Test
    public void test03() throws Exception{
        //map<String,User>转json
        HashMap<String,User> map = new HashMap<>();
        map.put("一班",new User("张三",23));
        map.put("二班",new User("李四",24));
        String json = mapper.writeValueAsString(map);
        System.out.println("json字符串:" + json);

        //json转map<String,User>
        HashMap<String,User> map2 = mapper.readValue(json,new TypeReference<HashMap<String,User>>(){});
        System.out.println("java对象:" + map2);
    }

4.List转 JSON, JSON 转 List 

/*
  4.List<String>转json, json转 List<String>
    json字符串 = ["张三","李四"]
    list对象 = [张三, 李四]
*/
@Test
public void test04() throws Exception{
    //List<String>转json
    ArrayList<String> list = new ArrayList<>();
    list.add("张三");
    list.add("李四");
    String json = mapper.writeValueAsString(list);
    System.out.println("json字符串:" + json);

    //json转 List<String>
    ArrayList<String> list2 = mapper.readValue(json,ArrayList.class);
    System.out.println("java对象:" + list2);
}

5.List转 JSON, JSON 转 List 文章来源地址https://www.toymoban.com/news/detail-721897.html

/*
  5.List<User>转json, json转List<User>
    json字符串 = [{"name":"张三","age":23},{"name":"李四","age":24}]
    list对象 = [User{name='张三', age=23}, User{name='李四', age=24}]
     */
@Test
public void test05() throws Exception{
    //List<User>转json
    ArrayList<User> list = new ArrayList<>();
    list.add(new User("张三",23));
    list.add(new User("李四",24));
    String json = mapper.writeValueAsString(list);
    System.out.println("json字符串:" + json);

    //json转List<User>
    ArrayList<User> list2 = mapper.readValue(json,new TypeReference<ArrayList<User>>(){});
    System.out.println("java对象:" + list2);
}

到了这里,关于AJAX与JSON的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ajax & axios & json

    目录 一、ajax 1. 概念 2. 实现方式    (1)原生的JS实现方式(了解)       (2) JQeury实现方式 二、axios  1. axios 介绍 2. axios特点 3. 官方文档 4. axios使用 (1) axios的基本使用(发送get/post请求) (2)axios基本使用-获取数据 (3)axios基本使用-传参 (4)axios基本使用-发布

    2024年02月15日
    浏览(35)
  • Ajax 获取 JSON数据

    Ajax 全称“Asynchronous JavaScript and XML”,译为“异步 JavaScript 和 XML”,程序员们习惯称之为“阿贾克斯”,通过 Ajax 我们可以异步在服务器与客户端之间传递数据。在 Ajax 中,普遍使用 JSON 作为传输数据的格式。 一般情况下,我们可以通过 JavaScript 来发送 Ajax 请求,并接收响

    2023年04月12日
    浏览(38)
  • AJAX和JSON

            AJAX(Asynchronous JavaScript and XML)是一种用于创建交互式、动态网页的技术。它允许网页在不重新加载整个页面的情况下与服务器进行异步通信,从而改善用户体验。以下是关于AJAX的一些重要信息: 异步通信 :AJAX 的核心特性是异步通信,意味着在向服务器发送请

    2024年02月07日
    浏览(35)
  • AJAX与JSON

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

    2024年02月07日
    浏览(32)
  • JSON和AJAX

    AJAX(Asynchronous JavaScript and XML)是一种无需重新加载整个页面就能更新部分网页的技术。它使用JavaScript的XMLHttpRequest对象来发送异步请求,并获取服务器响应。AJAX可以用于在不刷新页面的情况下更新网页内容、与服务器交换数据并更新部分网页,提高用户体验。 JSON(JavaScr

    2024年01月24日
    浏览(33)
  • JavaWeb学习|JSON与AJAX

    所有知识点都来自互联网,进行总结和梳理,侵权必删。 引用来源:尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版 JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式,而且很

    2024年02月22日
    浏览(46)
  • AJAX异步请求&JSON数据格式

    目录 前言 1.AJAX的实现方式 1.1原生的js实现方式 1.2JQuery实现方式 2.1语法 3.JSON数据和Java对象的相互转换 3.1将JSON转换为Java对象 3.2将Java对象转换为JSON AJAX:ASynchronous JavaScript And XML    异步的JavaScript 和 XML。 Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技

    2024年02月16日
    浏览(42)
  • 异步请求(Ajax,axios,json)

    同步/异步请求 表单(前端)向后端发送请求,属于同步请求 同步 : 发一个请求, 给一个回应, 会用回应的内容 覆盖 掉浏览器中内容,这样会打断前端其他的正常操作,在现在的前端中,显得不太友好。 异步 : 不同步 前端正常输入时,可以同时与后端进行交互,后端响应的数据

    2024年02月12日
    浏览(53)
  • AJAX与JSON数据交互处理

    Ajax即 A synchronous  J avascript  A nd  X ML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3]  使用Ajax技术网页应用能够快速地将增量更新呈现在

    2024年02月09日
    浏览(47)
  • jackson库收发json格式数据和ajax发送json格式的数据

    一、jackson库收发json格式数据   jackson库是maven仓库中用来实现组织json数据功能的库。 json格式  json格式一个组织数据的字符文本格式,它用键值对的方式存贮数据,json数据都是有一对对键值对组成的,键只能是字符串,用双引号包括;值可以是字符串,数字,布尔表达式

    2024年02月13日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包