JavaWeb_Ajax&Json

最新推荐文章于 2024-07-20 16:47:57 发布
最新推荐文章于 2024-07-20 16:47:57 发布
阅读量164 收藏
点赞数
文章标签： ajax json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43589563/article/details/119790908
版权

Ajax

1.概念

ASynchronous JavaScript And XML 异步的JavaScript 和 XML

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
提升用户的体验

举例说明：
在这里插入图片描述
Servlet中对请求的处理无非三个过程：
1.获取请求参数
2.处理业务逻辑
3.对客户端做出响应

在处理业务逻辑的时候，是消耗时间的，如果是同步请求，在处理业务逻辑的过程中，浏览器客户端的web页面是无法做任何操作的；
而如果是异步请求，不会影响客户端别的位置的交互操作

2.异步和同步

客户端和服务器端相互通信的基础上

  • 同步： 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
  • 异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

3.Ajax实现方式

3.1 js实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        //定义方法  发送异步请求
        function fun(){
            //todo 1.根据浏览器的不同来创建核心对象
            var xmlhttp;

            if (window.XMLHttpRequest){
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            } else{// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            //todo 2. 建立连接
            /*
                参数：
                    1. 请求方式：GET、POST
                        * get方式，请求参数在URL后用？拼接。send方法为空参
                        * post方式，请求参数在send方法中定义
                    2. 请求的URL：
                    3. 同步或异步请求：true（异步）或 false（同步）

             */
            xmlhttp.open("GET","ajaxServlet?username=tom",true);

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

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

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

    
</head>
<body>

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

</body>
</html>

xmlhttp对象的四种状态
在这里插入图片描述

3.2Jquery实现Ajax

  1. $.ajax(): 通过参数来设置发送get还是post请求
  2. $.get()：发送get请求
  3. $.post()：发送post请求

1. $.ajax()
语法：$.ajax({键值对});

 //使用$.ajax()发送异步请求
   $.ajax({
       url:"ajaxServlet1111" , // 请求路径
       type:"POST" , //请求方式
       //data: "username=jack&age=23",//请求参数
       data:{"username":"jack","age":23},
       success:function (data) {
           alert(data);
       },//响应成功后的回调函数
       error:function () {
           alert("出错啦...")
       },//表示如果请求响应出现错误，会执行的回调函数

       dataType:"text"//设置Servlet接受到的响应数据的格式
   });

2. $.get()
语法：$.get(url, [data], [callback], [type])
参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型

3. $.post()
语法：$.post(url, [data], [callback], [type])
参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型

Json

1. 概念

JavaScript Object Notation JavaScript对象表示法

Java表示一个对象：
	Person p = new Person();
	p.setName("张三");
	p.setAge(23);
	p.setGender("男");

Json格式表示一个对象：
	var p = {"name":"张三","age":23,"gender":"男"};

* json现在多用于存储和交换文本信息的语法
* 进行数据的传输
* JSON 比 XML 更小、更快，更易解析。

2. 语法：

1. 基本规则

  • 数据在名称/值对中：json数据是由键值对构成的
  • 键用引号(单双都行)引起来，也可以不使用引号
  • 值得取值类型：
1. 数字（整数或浮点数）
2. 字符串（在双引号中）
3. 逻辑值（true 或 false）
4. 数组（在方括号中）	{"persons":[{},{}]}
5. 对象（在花括号中） {"address":{"province"："陕西"....}}
6. null
  • 数据由逗号分隔：多个键值对由逗号分隔
  • 花括号保存对象：使用{}定义json 格式
  • 方括号保存数组：[]

2. 获取数据

  1. json对象.键名

  2. json对象[“键名”]
    注意，第二种方式可以获取key为字符串形式的，第一种不行；
    ps.name可以 ps."name"不行
    ps[“name”]行

  3. 数组对象[索引]

  4. 遍历

示例

//1.定义基本格式
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){
		//这样的方式获取不行。因为相当于  person."name"
		 //alert(key + ":" + person.key);
		     alert(key+":"+person[key]);
	}*/
		
 //获取ps中的所有值
  for (var i = 0; i < ps.length; i++) {
      var p = ps[i];
      for(var key in p){
          alert(key+":"+p[key]);
      }
  }

注意： ps.key 这里不行，因为key在这里是字符串格式的，所以相当于：
ps.“name”, ps.“age”…
用ps[“name”]就可以获取

3.JSON数据和Java对象的相互转换

1.JSON解析器
常见的解析器：Jsonlib，Gson，fastjson(阿里)，jackson（SpringMVC内置解析器）

Jackson相关依赖

      <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.12.3</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.12.3</version>
        </dependency>
        
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.12.3</version>
        </dependency>

2. JSON转为Java对象

  1. 导入jackson的相关jar包
  2. 创建Jackson核心对象 ObjectMapper
  3. 调用ObjectMapper的相关方法进行转换
    1. readValue(json字符串数据,Class)

2. Java对象转换JSON

  1. 导入jackson的相关jar包
  2. 创建Jackson核心对象 ObjectMapper
  3. 调用ObjectMapper的相关方法进行转换
    转换方法：
(1) writeValue(参数1，obj):
参数1：
  File：将obj对象转换为JSON字符串，并保存到指定的文件中
  Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
  OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中

(2) String writeValueAsString(obj):将对象转为json字符串

Java对象转Json字符串

代码演示：

    @Test
    public void test1() throws Exception {
        //1.创建Person对象
        Person p  = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");

        //2.创建Jackson的核心对象  ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        //3.转换
        String json = mapper.writeValueAsString(p);
        System.out.println(json);//{"name":"张三","age":23,"gender":"男"}


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

        //5.writeValue.将数据关联到Writer中
        //mapper.writeValue(new FileWriter("d://b.txt"),p);
    }
(1)Jackson注解
  1. @JsonIgnore：排除属性。 这样在json字符串中就不会出现该key-value
  2. @JsonFormat：属性值得格式化
    比如：@JsonFormat(pattern = “yyyy-MM-dd”)
public class Person {

    private String name;
    private int age ;
    private String gender;

    //@JsonIgnore // 忽略该属性
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date birthday;
}

    @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"}
    }
(2)复杂java对象转换
  1. List：数组
  2. Map：和对象格式一致

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);
        System.out.println(json);
    }

输出：

[{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},
{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},
{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"}]

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对象

   //演示 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);
    }

案例
在这里插入图片描述
注册页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src = "./js/jquery-1.4.2.min.js"></script>

    <script>
        $(function(){
            $("#username").blur(function(){
                //获取username文本框值
                var username = $(this).val();
                //发送ajax请求，验证用户是否存在
                $.get("findUserServlet",{username:username},
                        function(data){//data是servlet处理完数据的返回值
                            //判断key: userExist 的value是否为true
                            var span = $("#s_username");
                            if(data.userExist){
                                //存在
                                span.css("color","red");
                                span.html(data.msg);
                            }else{
                                span.css("color","green");
                                span.html(data.msg);
                            }
                        },"json");
            });
        });

    </script>
</head>
<body>

Servlet

package cn.itcast.web.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;

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;

@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)){
            //存在
            map.put("userExsit",true);
            map.put("msg","此用户名太受欢迎,请更换一个");
        }else{
            //不存在
            map.put("userExsit",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);
    }
}
败给你的黑色幽默丶
关注
专栏目录
ajax json
hqc_xds的博客
11-26 352
## 今日内容     1. AJAX：     2. JSON     # AJAX：     1. 概念： ASynchronous JavaScript And XML    异步的JavaScript 和 XML         1. 异步和同步：客户端和服务器端相互通信的基础上             * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。      ...
1. AJAX： 2. JSON
羽扬 -- YYDCYY
09-16 332
内容 1. AJAX： 2. JSON AJAX： 1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步：客户端和服务器端相互通信的基础上 * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 ...
JSON与AJAX：网页交互的利器
最新发布
2301_79420857的博客
07-20 333
在这个示例中，当用户点击“获取数据”按钮时，JavaScript会发送一个GET请求到服务器上的data.json文件。服务器返回JSON格式的响应后，JavaScript使用JSON.parse()方法将JSON字符串解析为JavaScript对象，并遍历对象数组来构建HTML字符串。通过掌握JSON和AJAX的原理和应用方法，我们可以开发出更加优秀和用户体验更好的Web应用。JSON是一种轻量级的数据交换格式，它基于ECMAScript的一个子集，采用完全独立于语言的文本格式来存储和表示数据。
ajax、json
whatisthespring的博客
06-29 505
ajax，json
AJAX（JSON）
W_jin的博客
10-04 255
1、什么是 AJAX： AJAX 是一种用于创建快速动态网页的技术（局部更新数据） 传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页面 AJAX 通过在后台与服务器进行少量的数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 2、AJAX的使用：（前端代码） 1）请求对象的创建（做浏
day22_Ajax&amp;Json.zip
02-19
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分...
demo6(2).zip_ajax_direction166_html_javaweb_silverl8z
09-21
综上，这个项目涵盖了前端Ajax与后端JavaWeb的集成，是学习如何在实际项目中使用Ajax通信的好例子。通过分析和实践这个项目，开发者可以深入理解前后端数据交互的流程，提高Web应用的用户体验。
JavaWeb通过ajax、json实现省市二级联动
04-09
总的来说，JavaWeb通过AJAX和JSON实现省市二级联动，涉及了前端的JavaScript技术、后端的JavaServlet处理和数据库操作。这一过程体现了前后端分离的思想，提高了页面的交互性和响应速度。理解并掌握这些技术，对于...
ajax_javaweb_
10-02
**Ajax技术详解与JavaWeb应用** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，大大提升了...
Javaweb项目ajax请求Json实例
03-31
此项目实例"Javaweb项目ajax请求Json实例"旨在演示如何将服务器端的数据以JSON（JavaScript Object Notation）格式发送到客户端，并在JSP页面上进行解析和展示。JSON是一种轻量级的数据交换格式，因其简洁性和易读性...
Ajax之【Json】
weixin_48485216的博客
05-06 334
一、简介 1、json分类 （1）json对象，JSONObject （1）这种对象的格式是： 名称：值 （2）相当于键值对（key:value） （2）json数组，JSONArray （1）基本格式：[{},{},{}...] 2、为什么使用json （1）json格式好理解。 （2）json格式数据在多种语言中，比较容易处理。使用java，javascript读写json格式的数据比较容易。 （3）json格式数据占用的空间小，在网路传输快，用户体...
ajax&json
xuda_2012的专栏
06-22 208
1.HttpServletResponse 不需要配置解析器2.springMVC处理json
Ajax&Json初识
qq_43812744的博客
10-09 205
Ajax: 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 异步和同步：客户端和服务器端相互通信的基础上 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网
Ajax+JSON
Ein_Blatt的博客
12-02 237
Ajax:无刷新:不断刷新整个页面,只刷新局部(只更新部分页面，有效利用带宽，提供连续的用户体验,提供类似C/S的交互效果，操作更方便) XMLHttpRequest 事件 （onreadystatechange）:指定回调函数 常用属性(readyState):XMLHttpRequest的状态信息 整个Ajax技术的核心 提供异步发送请求的能力 常用方法 方...
使用Ajax请求Json
tianxingege_的博客
07-12 2327
第一种方法 //创建请求对象 var request = new XMLHttpRequest(); //配置请求参数，请求方式，请求地址 request.open("get", "..js/aap.json", true); //请求处理函数 request.onreadystatechange = function() { if (request.readyState == 4
AJAX和JSON
weixin_65824274的博客
04-28 1162
AJAX（ASynchronous JavaScript And XML）异步的JavaScript 和 XML；由Jesse James Garrett 在他的文章AJAX：A New Approoch to Web Applications中首次提出。ajax（Web数据交互方式）_百度百科使用XHTML+CSS 来看表示信息。使用 JavaScript 操作 D OM 进行动态显示及交互。使用 XML 和 XSLT 进行数据交互及相关操作。
Ajax和JSON的基本用法
m0_52226803的博客
03-09 691
会将原来的页面销毁掉，重新生成另一张页面，但是在原来的页面中有不需要刷新的页面，我们想要的效果只是小部分区域进行显示刷新出来的内容，这时就要用到Ajax。结果：当send执行没有结束，没有收到响应，不会执行console.log("请求已经发送");解决：中途导入的jar包和依赖没有被out出来，最后允许的目录在Out,如果jar添加了，out没有，那么此时需要手动添加。注意：ajax请求返回的不再与展现相关，而是纯纯的数据，浏览器接受后要考虑如何展示。解决：tomcat选择的时候选错了。
驾校学员管理系统开发教程：Servlet+Ajax+JSON
"本文档详细介绍了开发一个驾校...通过这个详细的步骤，初学者可以逐步学习并实践JavaWeb开发，理解前后端分离、三层架构的设计思想，以及如何利用Ajax和JSON进行数据传输，同时还能掌握数据库设计和管理的基本技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值