AJAX基础

2021-03-06 阅读量

AJAX介绍

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。
本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。
一般的网页如果需要更新内容，必需重新加载个页面。
而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新。
异步和同步

原生JS实现AJAX

核心对象：XMLHttpRequest

用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
打开链接：open(method,url,async)

method：请求的类型 GET 或 POST。

url：请求资源的路径。

async：true(异步) 或 false(同步)。
发送请求：send(String params)

params：请求的参数(POST 专用)。
处理响应：onreadystatechange

readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪。

status：200-响应已全部 OK。
获得响应数据形式

responseText：获得字符串形式的响应数据。

responseXML：获得 XML 形式的响应数据。

JQuery的GET方式实现AJAX

核心语法：$.get(url,[data],[callback],[type]);
- url：请求的资源路径。
- data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
- callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
- type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册</title>
</head>
<body>
<form autocomplete="off">
  姓名：<input type="text" id="username">
    <!--核心代码-->
    <span id="uSpan"></span>
  <br>
  密码：<input type="password" id="password">
  <br>
  <input type="submit" value="注册">

</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
   //核心代码
  // 1.为用户名绑定失去焦点事件
  $("#username").blur(function () {
    let username = $("#username").val();
    // 2.jq的get方式实现ajax
    $.get(
        // 请求的资源路径
        "userServlet",
        // 请求参数
        "username=" + username,
        //    回调函数
        function (data) {
          //  将响应的数据显示到span标签
          $("#uSpan").html(data);
        },
        //    响应数据格式
        "text"
    );
  });

</script>
</html>

JQuery的POST方式实现AJAX

核心语法：$.post(url,[data],[callback],[type]);
- url：请求的资源路径。
- data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
- callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
- type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册</title>
</head>
<body>
<form autocomplete="off">
  姓名：<input type="text" id="username">
  <span id="uSpan"></span>
  <br>
  密码：<input type="password" id="password">
  <br>
  <input type="submit" value="注册">

</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
  // 1.为用户名绑定失去焦点事件
  $("#username").blur(function () {
    let username = $("#username").val();
    // 2.jq的post方式实现ajax
    $.post(
        // 请求的资源路径
        "userServlet",
        // 请求参数
        "username=" + username,
        //    回调函数
        function (data) {
          //  将响应的数据显示到span标签
          $("#uSpan").html(data);
        },
        //    响应数据格式
        "text"
    );
  });

</script>
</html>

JQuery的通用方式实现AJAX

核心语法：$.ajax({name:value,name:value,…});
- url：请求的资源路径。
- async：是否异步请求，true-是，false-否 (默认是 true)。
- data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
- type：请求方式，POST 或 GET (默认是 GET)。
- dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
- success：请求成功时调用的回调函数。
- error：请求失败时调用的回调函数。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册</title>
</head>
<body>
<form autocomplete="off">
  姓名：<input type="text" id="username">
  <span id="uSpan"></span>
  <br>
  密码：<input type="password" id="password">
  <br>
  <input type="submit" value="注册">

</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
  // 1.为用户名绑定失去焦点事件
  $("#username").blur(function () {
    let username = $("#username").val();
    // 2.jq的通用方式实现ajax
    $.ajax({

      //   请求的资源路径
      url: "userServlet",
      //  是否异步
      async: true,
      //  请求参数
      data: "username="+ username,
      //  请求方式
      type: "GET",
      //  数据形式
      dataType: "text",
      //  请求成功后的回调函数
      success:function (data) {
        $("#uSpan").html(data);
      },
      //  请求失败后的回调函数
      error: function () {
        alert("数据请求失败...")
      }

    });
  });

</script>
</html>

小结

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。
通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新。
同步和异步
- 同步：服务器端在处理过程中，无法进行其他操作。
- 异步：服务器端在处理过程中，可以进行其他操作。
GET 方式实现：$.get();
POST 方式实现：$.post();
- url：请求的资源路径。
- data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
- callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
- type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
通用方式实现：$.ajax();
- url：请求的资源路径。
- async：是否异步请求，true-是，false-否 (默认是 true)。
- data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
- type：请求方式，POST 或 GET (默认是 GET)。
- dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
- success：请求成功时调用的回调函数。
- error：请求失败时调用的回调函数。

JSON

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

JSON的转换

package com.yishan.json;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import java.util.ArrayList;
import java.util.HashMap;
import org.junit.Test;

/**
 * json格式的相互转换
 *
 * @Author yishan
 * @Date 2021/3/6 0006 11:50
 * @Version 1.0
 */
public class JsonTest01 {

   private ObjectMapper mapper = new ObjectMapper();

   /**
    * json格式 和 对象格式 相互转化
    *
    * @throws Exception
    */
   @Test
   public void test01() throws Exception {
      User user = new User("张三", 23);
      String json = mapper.writeValueAsString(user);
      System.out.println("json = " + json);
      User user1 = mapper.readValue(json, User.class);
      System.out.println("user1 = " + user1);
   }

   /**
    * json格式 和 泛型类型相同的map集合格式 相互转换
    *
    * @throws Exception
    */
   @Test
   public void test02() throws Exception {
      HashMap<String, String> map = new HashMap<>();
      map.put("姓名", "张三");
      map.put("性别", "男");
      String json = mapper.writeValueAsString(map);
      System.out.println("json = " + json);
      HashMap hashMap = mapper.readValue(json, HashMap.class);
      System.out.println("hashMap = " + hashMap);
   }

   /**
    * json格式 和泛型类型不同的map集合格式 相互转换
    *
    * @throws Exception
    */
   @Test
   public void test03() throws Exception {
      HashMap<String, User> map1 = new HashMap<>();
      map1.put("一班", new User("张三", 23));
      map1.put("二班", new User("李四", 24));
      String json = mapper.writeValueAsString(map1);
      System.out.println("json = " + json);
      HashMap<String, User> map2 = mapper
            .readValue(json, new TypeReference<HashMap<String, User>>() {
            });
      System.out.println("map2 = " + map2);

   }

   /**
    * json格式 和 普通list格式 相互转换
    *
    * @throws Exception
    */
   @Test
   public void test04() throws Exception {
      ArrayList<String> list = new ArrayList<>();
      list.add("张三");
      list.add("李四");
      list.add("王五");
      String json = mapper.writeValueAsString(list);
      System.out.println("json = " + json);
      ArrayList<String> list1 = mapper.readValue(json, ArrayList.class);
      System.out.println("list1 = " + list1);
   }

   /**
    * json格式 和 存对象的list集合 相互转换
    *
    * @throws Exception
    */
   @Test
   public void test05() throws Exception {
      ArrayList<User> list2 = new ArrayList<>();
      list2.add(new User("张三", 23));
      list2.add(new User("李四", 24));
      String json = mapper.writeValueAsString(list2);
      System.out.println("json = " + json);
      ArrayList<User> list3 = mapper.readValue(json, new TypeReference<ArrayList<User>>() {
      });
      System.out.println("list3 = " + list3);
   }

}