JAVAEE知识整理之AJAX、JSON

AJAX

AJAX是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
主要特征：异步通信、局部更新、只传输必要数据、响应更快
工作原理：

• 创建XMLHttpRequest对象：variable = new XMLHttpRequest();
• 配置请求参数：open(method, url, async)
  • method：请求get或post
  • url：文件位置
  • async：同步false或异步true
• 发送请求：send(string)
  注意：string：仅用于 POST 请求
• 处理响应：
  • responseText：获得字符串形式的响应数据
  • responseXML：获得 XML 形式的响应数据

AJAX参数说明：

• open()：携带参数
• setRequestHeader(）：携带头部信息
• send()：发送get/post请求
  创建AJAX请求：

  // 1. 创建 XMLHttpRequest 对象
  var xhr = new XMLHttpRequest();
  
  // 2. 配置请求
  xhr.open('GET', 'https://api.example.***/data', true);
  
  // 3. 设置回调函数
  xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) { // 请求完成
          if (xhr.status === 200) { // 成功响应
              // 处理响应数据
              console.log(xhr.responseText);
          } else {
              // 处理错误
              console.error('请求失败: ' + xhr.status);
          }
      }
  };
  
  // 4. 发送请求
  xhr.send();
  

jQuery中的AJAX

$.ajax({
    url: 'url', // 目标URL
    type: 'GET', // 请求类型，可以是GET、POST、PUT、DELETE等
    dataType: 'json', // 预期服务器返回的数据类型
    data: {param1: 'value1', param2: 'value2'}, // 发送到服务器的数据
    beforeSend: function(xhr) {
        // 发送请求前可以在这里做些什么，例如设置自定义HTTP头部
    },
    su***ess: function(response) {
        // 请求成功时的回调函数
        console.log(response);
    },
    error: function(xhr, status, error) {
        // 请求失败时的回调函数
        console.log(error);
    },
    ***plete: function(xhr, status) {
        // 请求完成时的回调函数（无论成功或失败）
    }
});

JSON

JSON是一种轻量级的数据交换格式。
结构组成：键值对组成或有序值列表。
基本规则：

• 形式：“key”:value
• 有逗号隔开
• 大括号{}保存对象
• 中括号[]保存数组
• 字符串必须使用双引号
• 值可以是：字符串、数字、布尔值、数组、对象、null

示例：
name": “张三”, “age”: 30, “isStudent”: false, “hobbies”: [“读书”, “游泳”], “address”: { “city”: “北京”, “street”: “朝阳路” }, “scores”: [85, 92, 78], “graduate”: null }

js中使用JSON

将json字符串转换为js对象（解析）：JSON.parse()

const jsonString = '{"name":"张三","age":25}';
const obj = JSON.parse(jsonString);
console.log(obj.age); // 输出: 25

将js对象转换为json字符串（序列化）：JSON.stringigy()

const person = {
  name: "李四",
  age: 28,
  isEmployed: true
};
const jsonString = JSON.stringify(person);
console.log(jsonString); // 输出: {"name":"李四","age":28,"isEmployed":true}