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
  • 1
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值