JavaEE学习日志(六十四): AJAX异步请求，JSON

最新推荐文章于 2022-02-10 16:09:46 发布
最新推荐文章于 2022-02-10 16:09:46 发布
阅读量352 收藏 1
点赞数 1
分类专栏： JavaEE学习日志 JavaWeb 前端 文章标签： ajax java js jquery json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sakuraaaaaaa/article/details/105246459
版权
JavaEE学习日志 同时被 3 个专栏收录
168 篇文章 8 订阅
订阅专栏
前端
29 篇文章 0 订阅
订阅专栏
JavaWeb
20 篇文章 1 订阅
订阅专栏

JavaEE学习日志持续更新----> 必看！JavaEE学习路线（文章总汇）

JavaEE学习日志（六十四）

AJAX

AJAX异步请求

A：异步
J：JavaScript
A：And
X：XML
同步请求：客户端请求到服务器，如果服务器没有响应，客户端只能等待，类似于卡死效果。
异步请求：客户端请求到服务器，如果服务器没有响应，客户端可以自由活动。

AJAX执行原理

浏览器内置了AJAX的引擎
在这里插入图片描述

原生态的JavaScript实现异步请求

实现步骤

  • 获取AJAX引擎
  • 设置回调函数。自定义函数，服务器响应成功后，自动调用。
  • 设置请求服务器路径
  • 提交
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
            原生态的js实现ajax异步请求
         */
        function fn() {
            //获取AJAX引擎对象，XMLHttpRequest
            var xmlhttp = new XMLHttpRequest();
            //引擎对象调用事件，监听AJAX引擎的状态变化
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //xmlhttp.responseText：AJAX引擎对象属性，服务器响应回来的文本数据
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
            //设置服务器路径
            xmlhttp.open("GET","/Web09/js_ajax");
            //提交请求
            xmlhttp.send();

        }
    </script>
</head>
<body>
<input type="button" value="ajax提交" onclick="fn()">
<div id="myDiv"></div>
</body>
</html>

服务器返回一个"收到"。
在这里插入图片描述
此时网页无刷新，还在这个页面。

jQuery的AJAX请求

跨浏览器操作

$.get() 函数

在这里插入图片描述
参数：

  • url：提交的服务器地址
  • data：提交到服务器的数据，以k=v&k=v的格式发送
  • callback：回调函数，服务器响应成功后，自动调用函数
  • type：服务器端响应回来的数据类型。返回内容格式，xml, html, script, json, text, _default。

前端

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        function fn() {
            /*
                jQuery中的函数get异步请求
             */
            $.get(
                //传递服务器地址路径
                "/Web09/jquery_get",
                //传递提交到服务器的参数
                "username=zhangsan&age=20",
                //回调函数，服务器响应成功
                //服务器响应回来的数据，会直接传递到参数中
                function (data) {
                    alert(data);
                },
                //服务器响应的数据格式
                "text"
            );

        }
    </script>
</head>
<body>
    <input type="button" value="get请求" onclick="fn()">
</body>
</html>

servlet

package com.itheima.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(urlPatterns = "/jquery_get")
public class Jquery_GetServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        /*
            接收客户端的异步请求
            响应文本类型的数据
         */
        String username = request.getParameter("username");
        String age = request.getParameter("age");
        System.out.println(username+"="+age);
        response.getWriter().write("hehe");
    }

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

$.post()函数

和get函数一模一样，只不过提交的数据从请求行变成了请求体
在这里插入图片描述

<script type="text/javascript">
    function fn() {
        /*
            jQuery中的函数post异步请求
         */
        $.post(
            //传递服务器地址路径
            "/Web09/jquery_post",
            //传递提交到服务器的参数
            "username=zhangsan&age=20",
            //回调函数，服务器响应成功
            //服务器响应回来的数据，会直接传递到参数中
            function (data) {
                alert(data);
            },
            //服务器响应的数据格式
            "text"
        );

    }
</script>

$.ajax()函数

$.ajax()：是get和post的底层函数，使用get或者post的时候，底层调用的都是ajax函数。

上层函数：简单，可以控制的内容少
底层函数：代码多，灵活性很大，可以控制的内容多

函数的参数：

  • url：服务器请求的地址
  • async：异步请求或者同步请求，默认是true，表示异步
  • data：请求到服务器的参数，k=v
  • dataType：接收服务器响应的数据格式，text和json类型
  • error：服务器响应失败的回调函数
  • success：服务器响应成功的回调函数
  • type：get请求或post请求

代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        function fn() {
            /*
                底层ajax函数
                格式
                 $.ajax({
                    k:v,
                    k:v
                 });
             */
            $.ajax({
                //服务器路径
                url:"/Web09/jquery_ajax",
                //提交服务器的数据
                data:"username=zhangsan&age=20",
                //设置响应失败的回调函数
                error:function () {
                    alert("服务器响应失败");
                },
                //响应成功的回调函数
                success:function (data) {
                    alert("服务器响应成功"+data);
                },
                //设置接收的响应数据格式
                dataType:"text",
                //设置请求方式
                type:"GET"
            });
        }
    </script>
</head>
<body>
    <input type="button" value="ajax提交" onclick="fn()">
</body>
</html>

ajax没有中文乱码问题

这样写完全没问题，张三可以被服务器接收到

<script type="text/javascript">
     function fn() {
         $.get(
             "/Web09/demo",
             "username=张三",
             function (data) {
                 alert(data);
             },
             "text"
         );
     }
 </script>

异步请求和同步请求的差异

同步请求：没有响应会卡死
异步请求：没有响应，自由活动

好处：速度快，用户体验好，节约资源

JSON数据格式

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，就是说不同的编程语言JSON数据是一致的。JS原生支持JSON。

JSON格式

json有两种格式：
对象格式：{"key1":obj,"key2":obj,"key3":obj...} 键必须是字符串
数组格式：[obj,obj,obj...]

注意：对象格式和数组格式可以互相嵌套

JSON练习一

<script type="text/javascript">
	/**
	 * 案例一
	 *  {key:value,key:value}
	 *  
	 * class Person{
	 * 	  String firstname = "张";
	 *    String lastname = "三丰";
	 *    Integer age = 100;
	 * }
	 * 
	 * Person p = new Person();
	 * System.out.println(p.firstname);
	 */
	//JSON数据格式，表示Java中的对象
    var person = {"firstname":"张","lastname":"三丰","age":100};
    //取出三丰
    alert(person.lastname);
	
    
  </script>

JSON练习二

<script type="text/javascript">
  	/**
	 * 案例二
	 *  [{key:value,key:value},{key:value,key:value}]
	 *  json数据本质是数组
     *  有两个元素，每个元素都是一个对象
	 */
	 var json = [
        {"firstname":"张","lastname":"三丰","age":100},
        {"firstname":"李","lastname":"四","age":150}
     ];
	 for (var i=0;i<json.length;i++){
	   alert(json[i].firstname+json[i].lastname+"=="+json[i].age);
     }
	 
  </script>

JSON练习三

<script language="JavaScript">
   /**
	 * 案例三
	 * {
	 *   "param":[{key:value,key:value},{key:value,key:value}]
	 * }
	 *  json本质是对象
    *   对应的键是param
    *   对应的值是数组
    *   数组有两个元素
    *   每个元素都是一个对象
    *
	 *  
	 */
	 var json = {
	   "param":[
         {"firstname":"张","lastname":"三丰","age":100},
         {"firstname":"李","lastname":"四","age":150}
       ]
   }
	 //取出李四
    alert(json.param[1].firstname+json.param[1].lastname);
	
	
	
  </script>

JSON练习四

<script language="JavaScript">
   /**
	 * 案例四
	 * {
	 *   "param1":[{key:value,key:value},{key:value,key:value}],
	 *   "param2":[{key:value,key:value},{key:value,key:value}],
	 *   "param3":[{key:value,key:value},{key:value,key:value}]
	 * }
	 *  
	 *  
	 */
	  var json = {
	      "param1":[
            {"firstname":"张","lastname":"三丰","age":100},
            {"firstname":"李","lastname":"四","age":150}
          ],
          "param2":[
            {"firstname":"张","lastname":"四丰","age":200},
            {"firstname":"李","lastname":"五","age":250}
          ],
          "param3":[
            {"firstname":"张","lastname":"五丰","age":300},
            {"firstname":"李","lastname":"六","age":350}
          ]
      }
	 //取出李四
    alert(json.param1[1].firstname+json.param1[1].lastname)


  </script>

AJAX响应JSON数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        function fn() {
            /*
                发送AJAX请求
                获取服务器响应的数据，使用JSON格式
             */
            $.get(
                "/Web09/jquery_json",
                "username=张三",
                function (data) {
                    alert(data.lastname);
                },
                "json"
            );
        }
    </script>

</head>
<body>
<input type="button" value="json提交" onclick="fn()">
</body>
</html>

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println(request.getParameter("username"));
        //向客户端响应JSON数据格式
        response.setContentType("text/html;charset=utf-8");
        //定义一个JSON数据    {"firstname":"张","lastname":"三丰","age":100}
        String json = "{\"firstname\":\"张\",\"lastname\":\"三丰\",\"age\":100}";
        response.getWriter().write(json);
    }

在这里插入图片描述

JSON-LIB工具

作用：把java中的数据转成JSON格式的数据
包含：对象，数组，集合…
缺点：

  • jar包太多，需要全部使用才能生效。
  • 有两个不同的方法来转换对象和集合
  1. JSON-LIB工具把对象person中的数据转成json格式
    方法：JSONObject.fromObject(person) 返回值是本类的对象，需要再次调用方法toString()来获得字符串
public void objectToJson(){
        Person person = new Person("张三",30,"浙江省杭州市");
        //JSON-LIB工具：JSONObject类静态方法fromObject
        //方法返回值是本类的对象，再次调用方法toString()
        String json = JSONObject.fromObject(person).toString();
        System.out.println(json);//{"address":"浙江省杭州市","age":30,"name":"张三"}

    }
  1. 集合或数组转成json
    方法：JSONArray.fromObject(list) 需要再次调用方法toString()来获得字符串
public void listToJson(){
        List<Person> list = new ArrayList<>();
        list.add(new Person("张三",20,"浙江省杭州市"));
        list.add(new Person("李四",33,"浙江省宁波市"));
        list.add(new Person("王五",44,"浙江省温州市"));
        //JSON-LIB工具：JSONArray类静态方法fromObject
        String json = JSONArray.fromObject(list).toString();
        System.out.println(json);
        //[{"address":"浙江省杭州市","age":20,"name":"张三"},{"address":"浙江省宁波市","age":33,"name":"李四"},{"address":"浙江省温州市","age":44,"name":"王五"}]
        String[] str = {"qq","wx","msn"};
        String json2 = JSONArray.fromObject(str).toString();
        System.out.println(json2);//["qq","wx","msn"]
    }

Gson工具（用它）

谷歌公司开发的一个转换工具和JSON-LIB工具一样
把java中的数据转成JSON格式的数据
优点：

  • 就一个jar包
  • 一个方法就能转换所有数据

使用步骤：

  1. 创建Gson对象Gson gson = new Gson();
  2. 调用方法gson.toJson(任意数据)
public void listToJson() {
        List<Person> list = new ArrayList<>();
        list.add(new Person("张三", 20, "浙江省杭州市"));
        list.add(new Person("李四", 33, "浙江省宁波市"));
        list.add(new Person("王五", 44, "浙江省温州市"));
        //gson工具实现转换
        Gson gson = new Gson();
        //对象调用一个方法叫toJson(任意数据)
        String json = gson.toJson(list);
        System.out.println(json);
        //[{"name":"张三","age":20,"address":"浙江省杭州市"},{"name":"李四","age":33,"address":"浙江省宁波市"},{"name":"王五","age":44,"address":"浙江省温州市"}]

    }
隔叶听风
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Ajax】第一课 Ajax访问Servlet解析Json格式
笔触狂放的博客
05-17 1682
概念 ajax（Web数据交互方式），Ajax即AsynchronousJavascriptAndXML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括:HTML或XHTML, CSS,JavaScript,DOM, XML,XSLT, 以及最重要的XMLHttpRequest。[3]使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得...
通过ajax实现对某个div的整体刷新替换（异步加载）
热门推荐
coder_zyz的专栏
12-27 1万+
首先吐槽下公司的框架，grid的宽度可能是根据屏幕长度自动适应，但是遇到了一个问题， 隐藏的grid.show()时，宽度变为最小宽度，未解决该问题，不使用toggle的方法，直接通过ajax异步加载该DiV,同时该方法也解决了grid的表头不确定的问题 整体异步加载DIV function loadURLWithTip(url , panel , callback , tip){
浅谈ajax异步和同步加载的区别
吃瓜群众的博客
03-16 9444
说简单点，ajax默认是异步加载的，也就是说第一个fun请求数据时，数据还未返回时便开始执行第二个fun了， 如果将其设置为同步请求，则会等第一个function执行完后才会加载第二个function了 异步请求： var flag=true; $.ajax({ url: "http://www.jb51.net/", success: function(data){ fla
Web- Jquery实现异步处理(Servlet)，局部刷新功能
qq_32938957的博客
04-13 1123
做的JAVAEE 课设的学习笔记：声明：直接复制代码是运行不了的 (1)在Java中正确得到JSONObject，需要导入JSON的JAVA支持包“json-lib-2.3-jdk15.jar”，同时需导入 JSON依赖包“commons-logging-1.0.4.jar”，“commons-lang.jar”，“commons- collections.jar”，“commons-beanu...
JavaEE【服务器端技术、异步请求ajax、json】
weixin_43923463的博客
02-10 790
1、服务器端技术 Tomcat服务器 常用的web服务器 Tomcat（Apache）：当前应用最广的JavaWeb服务器。 什么是Servlet （1）Servlet是Sun公司制定的一套技术标准，包含与Web应用相关的一系列接口，是Web应用实现方式的宏观解决方案，而具体的Servlet容器负责提供标准的实现； （2）Servlet作为服务器端的一个组件，它的本意是“服务器端的小程序”。Servlet的实例对象...
JavaWeb学习笔记——JSON、Ajax请求
MCC
12-27 222
JSON、AjaxJSON介绍JSON 在 JavaScript 中的使用定义访问方法JSON 在 Java 中的使用json 和 JavaBean 的相互转换json 和 List 的相互转换json 和 Map 的相互转换Ajax 请求介绍JavaScript 中的 Ajax 请求JQuery 中的 Ajax 请求$.ajax()$.get() 和 $.post()$.getJSON()表单序列化 serialize() JSON 介绍 JSON (JavaScript Object Notation
SpringMVC学习（八）Ajax异步请求
zhupup
03-12 139
文章目录一、Ajax简介（ Asynchronous JavaScript and XML）Ajax的使用场景：二、使用JQuery开发ajax搭建测试环境案例一：案例二：SpringMVC版案例三：注册账户提示 一、Ajax简介（ Asynchronous JavaScript and XML） Ajax就是在无需重新加载网页的情况下，能够部分更新网页的技术。 Ajax 不是一种新的编程语言...
JavaEE学习之走进JSON,AJAX
ozl520的博客
12-27 81
JSON,AJAXJSON概述1.什么是json2.json语法JSON解析1.FASTJSON解析2.Jackson解析3.浏览器处理JSON字符串4.浏览器转换为json对象Ajax概述1.什么是Ajax2.Ajax工作原理3.Ajax实例4.创建XMLHttpRequest对象5.XMLHttpRequest请求6.readyState7.XMLHttpRequest响应8.使用回调函数Ajax的使用 JSON概述 1.什么是json JSON（JavaScript Object Notation
JSON字符串、Ajax异步请求、拦截器Interceptor详解
qq_44495081的博客
03-01 2764
文章目录1、JSON1、什么是JSON2、JSON对象和JS对象的关系与转换3、Jackson工具4、测试集合输出5、fastjson工具2、Ajax1、什么是Ajax2、jQuery.Ajax3、使用原生的HttpServletResponse处理异步请求4、使用springmvc实现5、注册提示效果3、拦截器1、编写拦截器2、验证用户是否登录小案例 1、JSON 1、什么是JSON JSON（...
JavaEE学习日志(三十九): HTML表单，CSS引入方式
01-08
JavaEE学习日志持续更新—-> 必看！JavaEE学习路线（文章总汇） Java学习日志（三十九）HTML标签表单标签输入标签下拉菜单和多行文本GET和POSTdiv标签和span标签CSSCSS的作用和语法CSS的引入方式CSS的引入方式一：...
JavaEE学习日志(七十八): Linux安装jdk，安装MySQL，安装Tomcat，安装Redis，部署项目详细过程
01-09
JavaEE学习日志（七十八）LinuxLinux安装jdkLinux安装MySQLLinux安装tomcatLinux安装RedisLinux部署商城项目Linux数据库的中文乱码问题 Linux Linux安装jdk 首先卸载Linux自带的jdk 查看当前Linux系统是否已经安装...
Java学习日志(二十一): 缓冲流，转换流
01-20
JavaEE学习日志持续更新—-> 必看！JavaEE学习路线（文章总汇） Java学习日志（二十一）缓冲流原理字节缓冲输出流：BufferedOutputStream字节缓冲输入流：BufferedInputStream字符缓冲输出流：BufferedWriter字符...
JavaEE学习笔记.pdf
11-28
JavaEE学习笔记.pdf
Failed to execute ‘observe‘ on ‘MutationObserver‘: parameter 1 is not of type ‘Node‘
Sakuraaaaaaa的博客
09-18 4304
需要先引入element-ui再引入瀑布流插件，参考的博客 解决方法
vue的瀑布流组件、分享插件、cookie插件，ElementUI，嵌套布局
Sakuraaaaaaa的博客
09-15 1544
vue插件： vue的瀑布流组件， vue的分享插件， nuxt工程中使用ElementUI， vue的cookie插件， 嵌套布局
vue.js(二)：vue的生命周期、vue发送ajax请求
Sakuraaaaaaa的博客
08-14 1140
vue.js： vue的生命周期， vue发送ajax请求， vue案例。
ElementUI：ElementUI脚手架介绍与配置，elementUI执行流程分析，开发后台活动管理
Sakuraaaaaaa的博客
08-26 1072
ElementUI： 脚手架基本配置， 切换模拟数据来源， 脚手架目录结构， elementUI执行流程分析。 活动管理案例： 活动列表， 活动新增， 活动修改， 活动删除， api代码优化。
node.js(一)：node.js配置web服务器，npm命令
Sakuraaaaaaa的博客
08-22 758
node.js： 概念， 入门程序， 模块化编程， 配置web服务器。 npm： 什么是npm， npm命令。
javaee学习笔记
最新发布
08-31
JavaEE学习笔记是我自己在学习过程中总结的javaweb各项技术和知识点。它包含了JavaEE的十三种核心技术，分别是JDBC、JNDI、EJB、RMI、Servlet、JSP、XML、JMS、Java IDL、JTS、JTA、JavaMail和JAF。 JavaEE是一个开放的标准的组件体系结构，它独立于平台，但使用Java语言。一个JavaBean是一个满足JavaBeans规范的Java类，通常定义了一个现实世界的事物或概念。一个JavaBean的主要特征包括属性、方法和事件。 在支持JavaBeans规范的开发环境中，可以可视地操作JavaBean，也可以使用JavaBean构造出新的JavaBean。JavaBean的优势还在于Java带来的可移植性。所以在JavaEE学习笔记中，你可以找到关于这些核心技术和JavaBean的详细内容和示例。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [javaEE学习笔记](https://download.csdn.net/download/sugar_map/10268742)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [JavaEE学习笔记整理](https://blog.csdn.net/qq_51861704/article/details/124133294)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值