Ajax超详细学习笔记

康康要加油

已于 2022-02-25 09:23:25 修改

阅读量978

点赞数 1

文章标签： ajax javascript 学习

于 2022-02-23 23:26:23 首次发布

本文链接：https://blog.csdn.net/kangkang12221222/article/details/123088901

版权

文章目录

一、Ajax简介
二、Ajax的使用
三、 JSON详解
四、Jquery 的 Ajax 使用

一、Ajax简介

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态应用的网页开发技术，无需重新加载整个网页的情况下，能够更新页面局部数据的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下，对页面的某部分进行更新。

在这里插入图片描述

二、Ajax的使用

1、XMLHttpRequest 对象

XMLHttpRequest 是浏览器接口对象，该对象的 API 可被 JavaScript、VBScript 以及其它web 浏览器内嵌的脚本语言调用，通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或其它数据。XMLHttpRequest 可以与服务器实现异步交互，而无需让整个页面刷新，因此成为 Ajax 编程的核心对象。

2、Ajax的使用步骤

2.1、创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2.2、给定请求方式以及请求地址

xhr.open("get","http://www.example.com");

2.3、发送请求

xhr.send();

2.4、获取服务器端给客户端的响应数据

xhr.onreadystatechange = function(){
   
//0:open()没有被调用
//1:open()正在被调用
//2:send()正在被调用
//3:服务端正在返回结果
//4:请求结束，并且服务端已经结束发送数据到客户端
if(xhr.readyState == 4 && xhr.status == 200){
   
document.getElementById("span").innerHTML=xhr.responseText;
alert(xhr.responseText);
}
}

案例：
index.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
      <script>
          function but() {
   
                var xhr = new XMLHttpRequest();
                xhr.open("get","ajax.do");
                xhr.send();
                xhr.onreadystatechange = function () {
   

                    if (xhr.readyState == 4 && xhr.status == 200){
   
                        alert(xhr.responseText);
                        document.getElementById("span").innerHTML = xhr.responseText;
                    }
                }
          }
      </script>
  </head>
  <body>
 <h3>AJAX异步请求</h3>
  <hr/>
  <span id="span"></span>
  <input type="button" value="OK" onclick="but()"/>
  </body>
</html>

AjaxServlet.java:

@WebServlet("/ajax.do")
public class AjaxServlet extends HttpServlet {
   
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   
        PrintWriter pw = resp.getWriter();
        pw.println("Hello Ajax");
        pw.flush();
        pw.close();
    }
}

运行结果：
在这里插入图片描述

3、Ajax的运行原理

在这里插入图片描述

三、 JSON详解

1、JSON简介

JSON(JavaScript Object Notation) 是一种基于字符串的轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成。JSON 是 JavaScript 数据类型的子集。

2、为什么要使用JSON

在 JSON 未出现之前在 Ajax 中对于数据传递方式，会使用 XML 作为主要数据格式来传输数据。直到 JSON 出现后逐渐放弃使用 XML 作为数据传输格式。JSON 比 XML 更快，更易解析。

3、JSON的语法规则

JSON 是按照特定的语法规则所生成的字符串结构。
 大括号表示 JSON 的字符串对象。{ }
 属性和值用冒号分割。{“属性”:“value”}
 属性和属性之间用逗号分割。{“属性”:“value”,“属性”:“value”,…}
 中括号表示数组。[{“属性”:“value”…},{“属性”:“value”…}]

JSON 字符串对象：
在这里插入图片描述
数组：

4、JSON的6种数据类型

在这里插入图片描述

5、Jackson的使用

在 JDK 中并没有内置操作 JSON 格式数据的 API，因此使用处理 JSON 格式的数据需要借助第三方类库。
几个常用的 JSON 解析类库：
Gson: 谷歌开发的 JSON 库，功能十分全面。
FastJson: 阿里巴巴开发的 JSON 库，性能十分优秀。
Jackson: 社区十分活跃且更新速度很快。被称为“最好的 Json 解析器“

5.1、Jackson简介

Jackson 是一种解析 JSON 格式数据的 API，也是最流行，速度最快的 JSON API。在SpringMVC 中默认使用 Jackson API 处理 JSON 格式的数据。
Jackson 下载地址：
https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations
https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core
https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind

5.2、在响应中通过 JSON 格式传递

在这里插入图片描述
对象

5.3、通过 JSON 格式在响应中传递单个对象

需求：
定义一个 Users 类，包含 userid、username 属性。
实例化一个 Users 对象，通过 JSON 格式将 Users 对象响应到客户端浏览器。
将 Users 对象中的数据插入到页面中。

singleDemo.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script>
        function but() {
   
            var xhr = new XMLHttpRequest();
            xhr.open("get","single.do");
            xhr.send();
            xhr.onreadystatechange = function () {
   

                if (xhr.readyState == 4 && xhr.status == 200){
   
                    alert(xhr.responseText);
                    //通过JavaScript的内置对象JSON中的parse函数将JSON格式的字符串转换成JavaScript对象
                    var obj = JSON.parse(xhr.responseText);
                    alert(obj.userid+"  "+obj.username);
                    document.getElementById("span").innerHTML = obj.userid+"<br/>"+obj.username;
                }
            }
        }
    </script>
</head>
<body>
<h3>JSON格式的单个对象响应</h3>
<hr/>
<span id="span"></span>
<input type="button" value="OK" onclick="but()"/>
</body>
</html>

SingleObjectServlet.java:

//通过JSON格式响应单个对象
@WebServlet("/single.do")
public class SingleObjectServlet extends HttpServlet {
   
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   
        //创建Users对象
        Users users = new Users();
        users.setUserid(1);
        users.setUsername("Corey");

        //使用jackson的API将Users对象转换为JSON格式的字符串对象
        ObjectMapper objectMapper = new ObjectMapper();
        //将Users对象转换为JSON格式的字符串对象
        String string = objectMapper.writeValueAsString(users);
        System.out.println(string);
        //设置响应类型为application/json
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print(string);
        pw.flush();
        pw.close();
    }
}

运行结果：
在这里插入图片描述

5.4、通过 JSON 格式在响应中传递多个对象

需求：
定义一个 Users 类，包含 userid、username 属性。
实例化多个 Users 对象，通过 JSON 格式将 Users 对象响应到客户端浏览器。
将 Users 对象中的数据插入到页面中。

MultipleObjectServlet.java

//通过 JSON 格式在响应中传递多个对象
@WebServlet("/multiple.do")
public class MultipleObjectServlet extends HttpServlet {
   
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   
        Users users1 = new Users();
        users1.setUserid(1);
        users1.setUsername("Corey");
        Users users2 = new Users();
        users2.setUserid(2);
        users2.setUsername("kang");

        //将多个对象放入到集合中
        List<Users> list = new ArrayList<>();
        list.add(users1);
        list.add(users2);

        //通过jackson将List转换为JSON格式的字符串对象
        ObjectMapper objectMapper

最低0.47元/天解锁文章

康康要加油

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
Ajax超详细学习笔记

文章目录一、Ajax简介二、Ajax的使用1、XMLHttpRequest 对象2、Ajax的使用步骤2.1、创建XMLHttpRequest对象2.2、给定请求方式以及请求地址2.3、发送请求2.4、获取服务器端给客户端的响应数据3、Ajax的运行原理三、 JSON详解1、JSON简介2、为什么要使用JSON3、JSON的语法规则4、JSON的6种数据类型5、Jackson的使用5.1、Jackson简介5.2、在响应中通过 JSON 格式传递5.3、通过 JSON 格式在响应中传递单个对象5.4、
复制链接

扫一扫