AJAX与JSON

川长思鸟来 2022-02-15 04:39 308阅读 0赞

### 什么是ajax ###

Asynchronous JavaScript And XML 异步的JavaScript和XML。  
AJAX使用异步的提交方式，浏览器与服务器可以并行操作，即浏览器后台发送数据给服务器。用户在前台还是可以继续工作。用户感觉不到浏览器已经将数据发送给了服务器，并且服务器也已经返回了数据。

### 同步和异步的区别 ###

同步方式：浏览器与服务器是串行的操作，浏览器端工作的时候，服务器在等待。服务器在处理数据的时候，浏览器在等待。缺点：工作效率低，用户体验差。

异步方式：浏览器与服务器是并行的操作，浏览器在工作的同时，后台服务器也在工作。工作效率更高，用户体验更好。我们不用等待服务器数据的返回，它是后台工作的。

### 原生ajax的访问流程 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Jvb2tpZXhpYW9NdV9h_size_16_color_FFFFFF_t_70]  
流程说明：

1.  用户在网页上通过JavaScript的后台调用创建XMLHttpRequest对象
2.  通过请求对象发送请求给服务器
3.  在服务器上执行访问数据库的操作，进行数据的交换。
4.  将服务器端的数据以XML的格式返回给浏览器
5.  在浏览器端请求对象的回调函数中处理服务器返回的数据
6.  更新页面的显示，用户看到最新的结果。

### 案例一：使用原生的AJAX判断用户名是否存在 ###

需求：用户注册时输入一个用户名，失去焦点以后，通过ajax后台判断用户名是否存在。服务器先不访问数据库，直接判断用户名，如果用户名为newboy，则表示用户已经存在，否则用户名可以注册使用。

#### 服务器端代码编写步骤 ####

1.  编写Demo1UserExistsServlet
2.  设置响应的类型为text/plain;charset=utf-8，纯文本的数据。如：<br/>不会换行
3.  得到客户端发送过来的数据：request.getParameter()
4.  如果用户名忽略大小写比较等于newboy，则向客户端打印"用户名已经存在"，否则打印"恭喜你，可以注册"

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;
    import java.io.PrintWriter;
    
    @WebServlet(name = "Demo1UserServlet", urlPatterns = "/user")
    public class Demo1UserServlet extends HttpServlet { 
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
            //plain表示服务器发送回来的是纯文本数据，不是HTML。<br/>标签是不起作用的。
            response.setContentType("text/plain;charset=utf-8");
            PrintWriter out = response.getWriter();
            //1. 得到浏览器发送的请求数据
            String name = request.getParameter("name");
            //2. 访问数据库判断用户名是否存在
            if("admin".equalsIgnoreCase(name)) { 
                //3. 如果存在打印"用户名已经存在"
                out.print("用户名已经存在");
            }
            else { 
                //4. 否则打印："恭喜你，可以注册"
                out.print("恭喜你，可以注册");
            }
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
            this.doPost(request, response);
        }
    }

#### 浏览器端代码编写步骤 ####

#### 步骤 ####

1.  文本框失去焦点，得到文本框中的姓名
2.  创建XMLHttpRequest请求对象
3.  设置请求对象的onreadystatechange事件，即"准备状态改变"事件。
4.  当readyState等于4，并且服务器status响应码为200则表示响应成功
5.  通过responseText得到响应的字符串
6.  如果用户存在，在后面的span显示"用户名已经存在"
7.  不存在，在后面的span中显示"恭喜你，可以注册"。
8.  设置请求的URL，将用户名以url参数传递
9.  调用open方法，设置提交给服务器的请求方式和访问地址
10. 调用send方法发送请求

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>判断用户是否存在</title>
    </head>
    <body>
    用户名:
    <input type="text" id="user"><span id="info"></span>
    
    <script type="text/javascript"> //文本框改变事件 document.getElementById("user").onchange = function () { //1. 得到用户名 var user = this.value; //2. 发送请求给服务器 //2.1 创建XMLHttpRequest对象 var request = new XMLHttpRequest(); //2.2 设置服务器准备状态发生改变的时候事件 request.onreadystatechange = function () { //回调函数 //3. 接收服务器返回的数据 //如果准备状态如果等于4表示，响应已经返回了数据。而且服务器的状态码必须是200 if (request.readyState == 4 && request.status == 200) { //接收服务器返回的纯文本数据 var result = request.responseText; //4. 将数据显示在span中 document.getElementById("info").innerText = result; } } //发送请求 //打开与服务器的连接 //参数：请求的方式GET或POST，访问的Servlet的地址，同步或异步(true) //GET请求数据是在URI中传递 var uri = "user?name=" + user; // 打开浏览器与服务器的连接 request.open("GET",uri,true); //发送请求 request.send(); } </script>
    </body>
    </html>

### 案例二：传统的$.get()方法的使用 ###

#### 浏览器端代码与案例一一样 ####

#### 浏览器端代码编写步骤 ####

1.  导入jQuery框架的js文件
2.  编写文本框失去焦点blur()事件
3.  得到文本框中的姓名
4.  使用$.get方法发送请求给服务器，回调函数的参数就是返回值
5.  根据返回的结果，在回调函数中设置span的text

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>判断用户是否存在</title>
        
        <script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
    用户名:
    <input type="text" id="user"><span id="info"></span>
    
    <script type="text/javascript"> //1.文本框改变事件 $("#user").change(function () { //2.调用jquery提供的$.get方法发送请求给服务器 /* 1. url: 服务器的访问地址，servlet的地址 2. data: 发送给服务器的数据，两种格式：键=值 或 使用JSON 3. 回调函数，注：回调函数的参数就是服务器返回的数据 4. 可选：指定服务器返回的数据类型，如：text */ var data = "name=" + $(this).val(); //3.在回调函数中接收服务器的返回数据 $.get("user", data, function (result) { //4.将数据显示在span标签中 $("#info").text(result); }, "text"); }); </script>
    </body>
    </html>

### 案例三：传统的$.get()方法的使用 ###

#### 浏览器端代码与案例一一样 ####

#### 浏览器端代码编写步骤 ####

1.  将浏览器端的$.get请求换成$.post请求
2.  在服务器端打印请求的方式

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>判断用户是否存在</title>
        
        <script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
    用户名:
    <input type="text" id="user"><span id="info"></span>
    
    <script type="text/javascript"> //1.文本框改变事件 $("#user").change(function () { //2.调用jquery提供的$.post方法发送请求给服务器 /* 1. url: 服务器的访问地址，servlet的地址 2. data: 发送给服务器的数据，两种格式：键=值 或 使用JSON 3. 回调函数，注：回调函数的参数就是服务器返回的数据 4. 可选：指定服务器返回的数据类型，如：text */ var data = { name: $(this).val() }; //JS这是自定义的对象，格式 键:值 //3.在回调函数中接收服务器的返回数据 $.post("user", data, function (result) { //4.将数据显示在span标签中 $("#info").text(result); }, "text"); }); </script>
    </body>
    </html>

### 什么是json ###

JSON(JavaScript Object Notation, JS对象标记) 是一种轻量级的数据交换格式，代替了以前的XML格式。简洁和清晰的层次结构使得 JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

### json的语法格式 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Jvb2tpZXhpYW9NdV9h_size_16_color_FFFFFF_t_70 1]

### JSON对象案例 ###

将对象转换成JSON字符串 ObjectMapper mapper = new ObjectMapper(); String value = mapper.writeValueAsString(user); //转换好的JSON字符串

**注：使用此功能需要导入 jackson 包**

User.java

package com.it.entity;
    
    public class User { 
    
        private int id;
        private String username;
        private int age;
    
        public User(int id, String username, int age) { 
            this.id = id;
            this.username = username;
            this.age = age;
        }
    
        @Override
        public String toString() { 
            return "User{" +
                    "id=" + id +
                    ", username='" + username + '\'' +
                    ", age=" + age +
                    '}';
        }
    
        public User() { 
        }
    
        public int getId() { 
            return id;
        }
    
        public void setId(int id) { 
            this.id = id;
        }
    
        public String getUsername() { 
            return username;
        }
    
        public void setUsername(String username) { 
            this.username = username;
        }
    
        public int getAge() { 
            return age;
        }
    
        public void setAge(int age) { 
            this.age = age;
        }
    }

Demo1JsonServlet.java

import com.fasterxml.jackson.databind.ObjectMapper;
    import com.it.entity.User;
    
    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;
    import java.util.ArrayList;
    import java.util.HashMap;
    
    @WebServlet(name = "Demo1JsonServlet", urlPatterns = "/demo1")
    public class Demo1JsonServlet extends HttpServlet { 
        /* 1. 导入jackson的三个包，放在WEB-INF/lib 2. 创建一个类：new ObjectMapper()，将任意对象转成JSON字符串的类 3. 调用ObjectMapper对象中方法：writeValueAsString(要转换的对象),即User对象 */
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
            // 将 User 对象转换为 JSON 对象
            ObjectMapper mapper = new ObjectMapper();
            User user = new User(100,"唐僧",30);
            String value = mapper.writeValueAsString(user);
            System.out.println(value);
            // 数组
            String[] arr = { "刘备","关羽","张飞"};
            System.out.println(mapper.writeValueAsString(arr));
            // 集合
            ArrayList<User> list = new ArrayList<>();
            list.add(new User(200,"玉皇大帝",35));
            list.add(new User(300,"瑶池圣母",20));
            list.add(new User(400,"沉香",40));
            System.out.println(mapper.writeValueAsString(list));
            // map集合
            HashMap<String, User> hashMap = new HashMap<>();
            hashMap.put("user",new User(500,"小昭",19));
            System.out.println(mapper.writeValueAsString(hashMap));
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
            this.doPost(request, response);
        }
    }

### $.ajax()方法的使用 ###

<table> 
 <thead> 
  <tr> 
   <th><strong>属性名称</strong></th> 
   <th><strong>解释</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>url</strong></td> 
   <td>访问服务器地址</td> 
  </tr> 
  <tr> 
   <td><strong>async</strong></td> 
   <td>表示异步或同步，true异步，默认是true</td> 
  </tr> 
  <tr> 
   <td><strong>data</strong></td> 
   <td>发送给服务器的数据</td> 
  </tr> 
  <tr> 
   <td><strong>method</strong></td> 
   <td>请求的方式</td> 
  </tr> 
  <tr> 
   <td><strong>dataType</strong></td> 
   <td>服务器返回数据类型</td> 
  </tr> 
  <tr> 
   <td><strong>success</strong></td> 
   <td>服务器正常响应的回调函数</td> 
  </tr> 
  <tr> 
   <td><strong>error</strong></td> 
   <td>服务器出现异常调用的函数</td> 
  </tr> 
 </tbody> 
</table>

#### 案例四：使用AJAX实现后台用户登录的功能 ####

##### 需求 #####

1.  页面上有用户名和密码两个文本框，点登录按钮，使用后台AJAX完成登录成功。
2.  如果用户登录成功显示登录成功，否则显示登录失败。
3.  后台服务器暂不使用数据库，如果用户名为：admin，密码为：123，则登录成功。

##### 服务器端代码步骤 #####

1.  设置响应类型text/plain;charset=utf-8，得到打印流
2.  得到用户名和密码
3.  判断用户名和密码是否正确
4.  如果正确，则打印：欢迎您，newboy，登录成功
5.  错误则打印：登录失败

Demo1LoginServlet .java

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;
    import java.io.PrintWriter;
    
    @WebServlet(name = "Demo1LoginServlet", urlPatterns = "/login")
    public class Demo1LoginServlet extends HttpServlet { 
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
            //使用纯文本打印，如果服务器指定了，浏览器端可以不用指定
            System.out.println(request.getMethod());
            response.setContentType("text/plain;charset=utf-8");
            PrintWriter out = response.getWriter();
            //1.得到用户名和密码
            String username = request.getParameter("username");
            String password = request.getParameter("password");
            //2.判断用户名和密码是否正确(应该要访问数据库)
            if ("admin".equals(username) && "123".equals(password)) { 
                //3.如果登录成功，打印成功信息
                out.print("欢迎您" + username + "，登录成功");
            }
            else { 
                //4.如果失败，打印失败
                out.print("登录失败");
                //抛出异常
                throw new RuntimeException("服务器出现异常");
            }
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
            this.doPost(request, response);
        }
    }

##### 客户端步骤 #####

1.  页面代码如下：login.html，页面上有一个登录的表单数据。注：登录按钮是一个普通的button
2.  给登录按钮添加点击事件
3.  得到表单中所有的数据项: serialize()
4.  使用$.ajax方法提交数据给服务器
    
    1.  设置url请求地址
    2.  data数据
    3.  success成功的回调函数
    4.  在回调函数中直接使用alert弹出服务器返回的数据

html代码：

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>用户登录</title>
        
        <script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
    <h2>用户登录</h2>
    
    <form id="loginForm">
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username" id="username"/></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password" id="password"/></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    
                    <input type="button" value="登录" id="btnLogin"/>
                </td>
            </tr>
        </table>
    </form>
    <script type="text/javascript"> //按钮点击事件 $("#btnLogin").click(function () { //得到表单中所有的参数 var param = $("#loginForm").serialize(); //使用ajax发送请求给服务器 $.ajax({ url: "login", //请求的地址 data: param, //发送的数据 method: "post", //指定请求的方法 success: function (data) { //访问成功的回调函数，参数：就是服务器返回数据 //在回调函数中接收返回的数据，并且alert()出来 alert(data); }, error: function () { //服务器出现异常调用的回调函数 alert("服务器出现异常，请联系管理员"); } }); }) </script>
    </body>
    </html>

### jQuery3.0的$.get()方法实现登录 ###

与$.ajax的使用方法一样,方法的参数也是一样

##### 服务器端代码与案例四一样 #####

##### 浏览器端步骤、代码 #####

1.  给登录按钮添加点击事件
2.  得到表单中所有的数据项
3.  使用$.get()方法发送请求
    
    1.  设置url请求地址
    2.  设置发送的数据
    3.  设置success回调函数
    4.  在回调函数中处理返回的数据

html代码：

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>用户登录</title>
        
        <script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
    <h2>用户登录</h2>
    
    <form id="loginForm">
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username" id="username"/></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password" id="password"/></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    
                    <input type="button" value="登录" id="btnLogin"/>
                </td>
            </tr>
        </table>
    </form>
    <script type="text/javascript"> //按钮点击事件 $("#btnLogin").click(function () { //得到表单中所有的参数 var param = $("#loginForm").serialize(); //使用get发送请求给服务器 $.get({ url: "login", //请求的地址 data: param, //发送的数据 //method: "post", //指定请求的方法，参数的优先级更高 success: function (data) { //访问成功的回调函数，参数：就是服务器返回数据 //在回调函数中接收返回的数据，并且alert()出来 alert(data); }, error: function () { //服务器出现异常调用的回调函数 alert("服务器出现异常，请联系管理员"); } }); }) </script>
    </body>
    </html>

### jQuery3.0的$.post()方式实现登录 ###

##### 服务器端代码与案例四一样 #####

##### 浏览器端代码： #####

html代码：

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>用户登录</title>
        
        <script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
    <h2>用户登录</h2>
    
    <form id="loginForm">
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username" id="username"/></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password" id="password"/></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    
                    <input type="button" value="登录" id="btnLogin"/>
                </td>
            </tr>
        </table>
    </form>
    <script type="text/javascript"> //按钮点击事件 $("#btnLogin").click(function () { //得到表单中所有的参数 var param = $("#loginForm").serialize(); //使用get发送请求给服务器 $.post({ url: "login", //请求的地址 data: param, //发送的数据 //method: "post", //指定请求的方法，参数的优先级更高 success: function (data) { //访问成功的回调函数，参数：就是服务器返回数据 //在回调函数中接收返回的数据，并且alert()出来 alert(data); }, error: function () { //服务器出现异常调用的回调函数 alert("服务器出现异常，请联系管理员"); } }); }) </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Jvb2tpZXhpYW9NdV9h_size_16_color_FFFFFF_t_70]: /images/20220215/a924dcebaeb5456580358a7f83c9e9e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Jvb2tpZXhpYW9NdV9h_size_16_color_FFFFFF_t_70 1]: /images/20220215/c41720ad8ebd4685bf3d63908f4d62a2.png