AJAX 和 Json处理

最新推荐文章于 2024-06-13 11:04:47 发布

acwing

最新推荐文章于 2024-06-13 11:04:47 发布

阅读量148

点赞数

文章标签： ajax json jquery

本文链接：https://blog.csdn.net/acwing/article/details/120554561

版权

AJAX(Asynchronous JavaScript And XML)

异步的JavaScript和XML

多种技术综合用于快捷创建东陶网页的技术
一般的网页如果需要更新内容必须重新加载整个页面

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

同步在客户端请求服务器过程中客户端只能处于等待过程
同步在客户端请求服务器过程中客户端可以执行其他的操作

Jquery 实现对应的异步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
      <form autocomplete="off">
        姓名 ： <input type="username" id="username">
        <span id="uSpan" ></span>
        <br>
        密码： <input type="password" id="password">
        <br>
        <input type="submit" value="注册">
      </form>
</body>
<script>
      //  围殴姓名绑定失去焦点
      document.getElementById("username").onblur=function () {
         //  创建XMLRquet核心对象
          //  会存在let 对应的报错 在settings中的JavaScript 提高对应的js版本
            let xmlHttp = new XMLHttpRequest();
        //    打开链接
          let username = document.getElementById("username").value;
          //   提交方式  提交的资源路径  true 代表着 是否异步
          xmlHttp.open("GET","userServlet?username="+username,true);
        //   发送请求
          xmlHttp.send();
        //   处理响应
          xmlHttp.onreadystatechange = function () {
                    //  判断请求状态和响应状态是否成功
              if(xmlHttp.readyState  == 4 && xmlHttp.status == 200){
                  // 将响应的数据显示到span标签中
                  document.getElementById("uSpan").innerHTML =xmlHttp.responseText;
              }
          }
      }
</script>
</html>

Servket层进行处理响应

package com.example.AJAX;


import javax.servlet.ServletException;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
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");

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

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

        // 判断姓名是否以及注册过   在页面进行展示
        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);
    }
}

利用Get和Post实现对应的异步操作

在这里插入代码片

<!-- Jquery的Get方式实现AJAX-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
      <form autocomplete="off">
        姓名 ： <input type="username" id="username">
        <span id="uSpan" ></span>
        <br>
        密码： <input type="password" id="password">
        <br>
        <input type="submit" value="注册">
      </form>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
      //  用户名绑定失去焦点
        $("#username").blur(function () {
            // 获取到所填写的数据
          let username = $("#username").val();
          //  JQuery的GEt或者POST  方式实现AJAX
            $.get(
                // 请求资源路径
                "userServlet",
                // 请求参数
                "username=" + username,
                function (data) {
                    // 将响应数据显示到span标签
                    $("#uSpan").html(data);
                },
                // 响应数据
                "text"
            );
      });
</script>
</html>

通用的异步操作

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

核心对象 XMlHttpRequest
用于在后台服务器交换数据可以在不重新加载整个网页的情况下对网页的某部分进行更新

打开链接 open(method ,url , async)
请求类型请求的类型GET和POST
请求的资源路径如果是get请求需要在资源路径上拼接上如果是POST方法需要在send中进行传递
异步true或者同步false
发送请求 send (String params)
params 请求的参数(POST专用)

处理响应 onreadystatechange
readyState 0 请求为初始化 1 服务器连接已建立 2 请求处理中 3 请求处理中 4 请求已完成且已经响应

status 200 响应已全部ok

获得响应数据形式
responseText 获得字符串形式的响应数据
reponseXML 获得XML形式的响应数据

JQuery 的POST方式实现AJAX

$.post{url, [data], [callback], [type]};
url 请求的资源路径
data 发送给服务器的请求参数格式可以实key=value 也可以是js对象
callback 当请求成功后的回调函数可以在函数中编写我们的逻辑代码
type 预期返回数据的类型取值可以是xml html js json text

核心语法 $,ajax(name.value , name,vlaue …)
url 请求的资源路径
async 是否异步请求 true 是 false 否默认是true
data 发送到服务器的数据可以是键值对形式也可以是js对象形式
type 请求方式 PIOST或GET 默认是GET
dataType 预期返回数据的类型取值可以实xml html js json text
success 请求成功事件调用的回调函数
error 请求失败时调用的回调函数

对应的Json处理

json 是一种轻量级的数据交换格式

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

Stringfy （对象）将指定对象转为为json 格式字符串
parse (字符串) 将指定json字符串解析成对象

json转换工具
jackson 开源免费JSON转换工具 SPringMVC 转换默认使用jackson

objectMapper 是jackson 工具包的核心类他提供一些方法实现json字符串和对象之间转换
TypeReference 对集合范型的凡序列化使用TypeReference可以明确的指定反序列化的对象类型

objectMapper

String writeValueAsString(Object obj ) 将java对象转换成json字符串
T readValue(String json , Class valueType) 将json字符串转换成java对象
T readValue(String json, TypeReference valueTypeRef) 将json字符串转换成json对象

package com.example.AJAX;

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;

public class ObjectMapperTest {
    private ObjectMapper mapper = new ObjectMapper();
    /**
     *
     *   User对象转json json转User对象
     *   json 字符串 = { “name”: "zhangsan","age": 23}
     *   User 对象 = User{name=’zhangsan‘ ,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);
    }

    @Test
    public void test02() throws Exception{
        // HashMap 对象转json
        HashMap<String,String > map = new HashMap<>();
        map.put("姓名","张三");
        map.put("性别","男");

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

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

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

    @Test
    public void test04() throws Exception{
        // List<User>(自定义类型) 对象转json
        ArrayList<User> list  = new ArrayList<>();
        list.add(new User("张三",34));
        list.add(new User("李四",23));
        String json = mapper.writeValueAsString(list);
        System.out.println("json字符串 :" +json);


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

acwing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX 和 Json处理

AJAX(Asynchronous JavaScript And XML)异步的JavaScript和XML多种技术综合用于快捷创建东陶网页的技术一般的网页如果需要更新内容必须重新加载整个页面而AJAX通过浏览器与服务器进行少量数据交换就可以使网页实现异步更新也就是在不重新加载整个页面的情况下对网页部分内容进行局部更新同步在客户端请求服务器过程中客户端只能处于等待过程同步在客户端请求服务器过程中客户端可以执行其他的操作Jquery 实现对应的异步<!DOCT
复制链接

扫一扫