AJAX&&JSON简介

最新推荐文章于 2022-05-08 06:00:00 发布

java的舔狗

最新推荐文章于 2022-05-08 06:00:00 发布

阅读量123

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43416494/article/details/104814362

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一，AJAX概念

1.异步的javascript和xml

2.异步和同步：客户端和服务器端相互通信的基础上

同步：客户端等待服务器端的响应，在等待期间客户端不能进行其他操作

异步：客户端等待服务器响应，在等待服务器处理请求的过程中，可以进行其他操作

二，AJAX实现方式

1.原生js实现

用于请求的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义方法
        function fun() {
            //1.创建核心对象
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.建立连接
            /*
            * 请求方式get，post
            * *get方式，请求参数在url后面拼接，send方法为空参
            * *post方式，请求参数在send中定义
            * 请求url
            * 同步或异步请求，true为异步
            * */
            xmlhttp.open("GET","ajaxServlet?username=tom",true);
            //3.发送请求
            xmlhttp.send();
            //4.接受并处理来自服务器的响应结果
            //获取方式，xmlhttp.responseText
            //当服务器响应成功后再获取，
            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange
            xmlhttp.onreadystatechange=function () {
                //判断readyState的就绪状态是否为4，判断states的响应状态是否为200
                if(xmlhttp.readyState==4&&xmlhttp.status==200){
                    var responsetext=xmlhttp.responseText;
                    alert(responsetext);
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步消息" onclick="fun()">
    <input type="text">
</body>
</html>

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("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.获取请求参数
        String username=req.getParameter("username");
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        //2.打印username
        System.out.println(username);
        //3.响应
        resp.getWriter().write(username);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
}

2.Jquery实现

<1>$.ajax()

*$.ajax({键值对});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            $.ajax({
                url:"ajaxServlet",//请问路径
                type:"get",//请求方式
                //data:"username=sy&age=20"
                data:{"username":"sy","age":"20"},
                success:function (data) {
                    alert(data);
                },//响应成功的回调函数,
                error:function () {
                    alert("执行错误");
                },
                dataType:"text"
            });
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input type="text">
</body>
</html>

<2>$.get()发送get请求

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

<3>$.post()发送post请求

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            // $.get("ajaxServlet",{"username":"sy"},function () {
            //     alert("成功");
            // },"text");
            $.post("ajaxServlet",{"username":"sy"},function () {
                alert("成功");
            },"text");
        }
    </script>
</head>
<body>
<input type="button"value="发送异步请求"onclick="fun();">
<input type="text">
</body>
</html>

三，JSON

1.概念：javascript对象表示法，多用于存储和交换文本信息的语法

2.语法

<1>数据在名称/值对中：json数据是由键值对构成的

*键用引号引起来

*值得取值类型

*数字(正数或者浮点数)

*字符串(在双引号中)

*逻辑值(true或者false)

*数组(在方括号中)

*对象(在花括号中)

*null()

<2>数据由逗号分隔

<3>花括号保存对象

<4>方括号保存数组

3.数据获取

<1>json对象.键名

<2>json对象[”键名"]

<3>数组对象[索引]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1.基本格式
        var person={"name":"sy",age:20};
        alert(person.name);
        alert(person["name"]);
        //2.嵌套格式
        var persons={"persons":[{"name":"sy",age:20},{"name":"sysy",age:20},{"name":"sysysy",age:20}]};
        alert(persons);
        alert(persons.persons[0].name);
    </script>
<body>
</body>
</html>

4.JSON数据和java对象的相互转换

JSON解析器：Jsonlib,Gson,fastjson,jackson

<1>JSON转换为java对象

*步骤

****导入jackson相关jar包

****创建jackson核心对象objectMapper

****调用objectmapper的相关方法进行转换

<2>java对象转换为JSON

*步骤

****导入jackson相关jar包

****创建jackson核心对象objectMapper

****调用objectmapper的相关方法进行转换

代码

Person

public class Person {
    private String name;
    private int age;
    private String gender;

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public int getAge() {
        return age;
    }

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

    public String getName() {
        return name;
    }

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

    @Override
    public String toString() {
        return "Person{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", gender='" + gender + '\'' +
                '}';
    }
}

jackson

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

public class jackson {
    //java对象转为JSON
    @Test
    public void test2() throws JsonProcessingException {
        //1.创建Person对象
        Person p=new Person();
        p.setName("sy");
        p.setAge(20);
        p.setGender("girl");
        //2.创建jakson核心对象
        ObjectMapper mapper=new ObjectMapper();
        //3.转
        /*
        * writeValue(参数1,obj)
        * *参数1
        * * *File：将obj对象转换为json字符串，并保存到指定文件1
        * * *Writer：将obj对象转换为json字符串，并将Json数据填充到字符输出流中
        * * *OutputStream：将obj对象转换为json字符串，并将json数据填充到字节输出流中
        * */
        String json=mapper.writeValueAsString(p);
        System.out.println(json);
    }
    //JSON转为java对象
    @Test
    public void test1()throws Exception {
        //
        String json="{\"name\":\"sy\",\"age\":20,\"gender\":\"girl\"}";
        ObjectMapper mapper=new ObjectMapper();
        mapper.readValue(json,Person.class);
        System.out.println("====0");
        System.out.println(mapper.readValue(json,Person.class));
    }

}