JavaEE学习之走进JSON,AJAX

最新推荐文章于 2024-05-28 21:47:35 发布

ozl520

最新推荐文章于 2024-05-28 21:47:35 发布

阅读量81

点赞数

文章标签： ajax java js

本文链接：https://blog.csdn.net/ozl520/article/details/111707928

版权

JSON,AJAX

JSON概述
- 1.什么是json
- 2.json语法
JSON解析
Ajax概述

JSON概述

1.什么是json

JSON（JavaScript Object Notation JS对象标记）是一种轻量级的数据交换格式。它基于 ECMAScript(w3c制定的js的规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据，简洁和清晰的层次结构使得json成为理想的数据交换语言。易于人阅读和编写，同时也易于机器的解析和生成，并有效提升网络传输效率

2.json语法

[] 表示数组
{} 表示对象
“” 表示是属性名或字符串类型的值
：表示属性和值之间的间隔符
，表示多个属性的间隔符或者是多个元素的间隔符

JSON解析

要解析的字符串：将字符串解析为java对象

1.FASTJSON解析

Fastjson是一个Java库，可以将Java对象转换成json格式，当然它也可以将json字符串转换成java对象
提供了toJSONString()和parseObject()方法来将Java对象与JSON相互转换：
- 调用toJSONString()转换成JSON字符串
- 调用parseObject()转换成对象

public class test {
    public static void main(String[] args) {
        Admin admin = new Admin("张三", "123456", "1345", "552645");
        String s = JSON.toJSONString(admin);
        System.out.println(s);
        Admin admin1 = JSON.parseObject(s, Admin.class);
        System.out.println(admin);
    }
}

}

在这里插入图片描述

2.Jackson解析

Jackson是一个能够将java对象序列化为JSON字符串，也能够将JSON字符串反序列化为java的框架
通过方法readValue和WriteValue实现

public class test3 {
    public static void main(String[] args) throws JsonProcessingException {
        Admin simon = new Admin("simon", "123456", "123", "123");
        ObjectMapper objectMapper = new ObjectMapper();
        String s = objectMapper.writeValueAsString(simon);
        System.out.println(s);
        Admin admin = objectMapper.readValue(s, Admin.class);
        System.out.println(admin);
    }
}

在这里插入图片描述

3.浏览器处理JSON字符串

JSON.stringify()

4.浏览器转换为json对象

JSON.parse()

Ajax概述

1.什么是Ajax

Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
Ajax=Asynchronous异步 JavaScript and XML
Ajax是一种用于创建快速动态网页的技术
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载页面的情况下，对网页的某部分进行更新
传统的网页（不使用Ajax）如果需要更新内容，必须重载整个页面

2.Ajax工作原理

在这里插入图片描述

Ajax基于现有的Internet标准，并且联合使用他们
XMLHttpRequest对象（异步的服务器交换数据）
JavaScript/DOM(信息显示/交互)
CSS（给数据定义样式）
XML（作为转换数据的格式）

3.Ajax实例

在这里插入图片描述

4.创建XMLHttpRequest对象

XMLHttpRequest对象是AJAX的基础
所有现代浏览器均支持XMLHttpRequest对象（IE5，IE6使用ActiveXObject）
XMLHttpRequest用于后台与服务器之间交换数据，这意味着可以在不重新加载整个页面的情况下，对网页的某个部分进行更新
创建XMLHttpRequest语法
老版本的使用ActiveXObject对象
为了对应所有现当代的浏览器，包括ie5和ie6，请检查浏览器是否支持XMLHttpRequest对象，如果支持则创建，否则创建ActiveXObject

5.XMLHttpRequest请求

如需将请求发送到服务器，我们使用XMLRequest对象的open()和send()方法

方法	描述
open(method,url,async)	规定请求类型，url以及是否异步处理请求。method：请求类型；GET或POST；url：文件在服务器的位置；async：true异步或false同步，并且XMLHttpRequest对象如果要用于Ajax的话，open()方法的async参数必须设置为true
send(string)	将请求发送到服务器。string：仅用于post请求

get还是post？

与post相比，get更加简单也更快，并且在大部分情况下都能使用
然而，在一下环境中使用post请求
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据（post没有数据限制）
- 发送包含未知字符的用户输入时，post比get更安全也更可靠

方法	描述
setRequestHeader(header,value)	向请求头添加http头，header：规定头的名称 value：规定头的值

对于web开发人员来说，发送异步请求是一个巨大的进步。很多的服务器执行任务都相当费时，AJAX出现之前，这可能引起引用程序挂起和停止。
通过Ajax，js无需等待服务器的响应，而是:
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
当Async=true时，请规定在响应处onreadystatechange事件中的就绪状态时执行的函数：
不推荐使用async=false，但是对于一些小型请求还是可以的
请记住，js会等到服务器响应就绪才继续进行，如果服务器繁忙或缓慢，应用程序会挂起来或停止
注意：当你使用async=false时，请不要编写onreadystatechange函数-把代码放到send()语句后面即可

6.readyState

当readyState改变时，就会触发onreadyStatechange事件
在onreadyStatechange事件中，我们规定服务器响应已经做好被处理的准备时所执行的任务
readyState属性存在XMLHttpRequest的状态信息
当readyState等于4且状态为200时，表示响应就绪：
XMLHttpRequest对象的三个属性

属性	描述
onreadystatechange	存储函数（或函数名），每当readyState属性改变时，就会调用该函数
readyState	存有XMLHttpRequest的状态。从0到4发生变化，0：请求未初始化，1：服务器连接已建立，2：请求已接收，3：请求处理中，4.请求完成，且响应就绪
status	例：200：“ok”；404：未找到页面

在这里插入图片描述
get的综合运用
综合运用

@WebServlet(name = "DataServlet",value = "/data")
public class DataServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String mess="hello!Ajax";
        PrintWriter writer = response.getWriter();
        writer.println(mess);
        writer.flush;
        writer.close;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="btn">点击</button>
    <script>
        function call(){
            alert(xhr.responseText);
        }
    </script>
    <script>
        var xhr;
        if (window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else {
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr.open("get","data");
        xhr.send();
        xhr.onreadystatechange=function (){
            if (xhr.readyState==4&&xhr.status==200){
                document.getElementById("btn").addEventListener("click",call);
            }

        }

    </script>
</body>
</html>

在这里插入图片描述
post综合运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="btn">点击</button>

    <script>
        var btn=document.getElementById("btn");
        btn.addEventListener("click",function (){
            //创建xmlhttprequest
            var xhr;
            if (window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }else {
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.open("post","data");
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send("name=simon&age=16");
            xhr.onreadystatechange=function (){
                if (xhr.readyState==4 && xhr.status==200){
                    alert(xhr.responseText);
                }

            }
        })


    </script>
</body>
</html>

@WebServlet(name = "DataServlet",value = "/data")
public class DataServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        String mess="hello!Ajax";
        PrintWriter writer = response.getWriter();
        writer.println(mess+" "+name+" "+age);
    }

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

在这里插入图片描述

7.XMLHttpRequest响应

如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText或responseXML属性

属性	描述
responseText	获得字符串形式的响应数据
responseXML	获得XML形式的响应数据

responseText属性
- 如果来自服务器的响应并非XML，请使用responseText属性
- responseText属性返回字符串形式的响应
responseXML属性
- 如果来自服务器的响应是XML，而且需要作为XML对象解析，使用户responseXML属性

8.使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数
如果你的网站上存在多个Ajax的任务，那么你应该为创建XMLHttpRequest对象编写一个标准函数，并为每个Ajax任务调用该函数
该函数调用应该包含url以及发生在onreadystatechange事件执行任务（每次调用可能不尽相同）

ozl520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaEE学习之走进JSON,AJAX

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.什么是jsonJSON（JavaScript Object Notation
复制链接

扫一扫