JavaWeb之前后端分离的三步骤

---

提示：以下是本篇文章正文内容，Java系列学习将会持续更新

一、Ajax (异步JavaScript和XML)

AJAX 是一种用于创建快速动态网页的技术。

XMLHttpRequest实现异步通信：用于发送 HTTP 请求，实现后台与服务器交换数据。

1-1 Ajax 发送请求的步骤

// 1. 创建请求对象
var xhr = new XMLHttpRequest();

// 2. 调用open方法，设置请求方法和请求路径
xhr.open("GET", "/data/grade-list.json");

// 3. 请求体
xhr.onload = function() {
   
   

	// 1. 将后端的响应结果(JSON数据)进行反序列化
	// this.responseText 是 JSON 格式的字符串
	var students = JSON.parse(this.responseText);

	// 2. 修改 DOM 树，将数据填充到 DOM 树中
	var oTable = document.querySelector('table');
	var html = `<tr><td>${
   
   students}</td><td>${
   
   students.size}</td></tr>`;
	oTable.innerHTML += html;
}

// 4. 发送请求
xhr.send();

1-2 如果是POST请求，则还需要设置请求头

var s = JSON.stringify(students);

var xhr = new XMLHttpRequest();

// 因为要在请求体中携带 JSON 数据，所以只能使用 POST 方法
xhr.open("POST", "/get-json-from-request-body");
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");

xhr.send(s);    // send 的参数，就是请求体

回到目录…

二、JSON的使用

2-1 概念

• JSON 是用于存储和传输数据的格式。
• JSON 通常用于服务端向网页传递数据 。
• JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
• JSON 是轻量级的文本数据交换格式
• JSON 具有自我描述性，更易理解

2-2 格式

• 大括号 { } 保存对象
• 中括号 [ ] 保存数组，数组可以包含多个对象
• 数据以 (name: value)对 保存。

[
  {
   
   
    "姓名": "张三",
    "成绩": 28
  },
  {
   
   
    "姓名": "李四",
    "成绩": 29
  }
]

2-3 JSON 和 JS 转换

// JSON.parase()方法: 将JSON数据转换为JS对象
var obj = JSON.parse('{
   
   "name":"baidu","site":"www.baidu.com" }');

// JSON.stringlfy()方法: 将 JavaScript 对象转换为字符串
var myJSON = JSON.stringify(obj);

2-4 JSON 和 Java 转换