JSON,全称JavaScript Object Notation,即JavaScript对象表示法,是一种轻量级的数据交换格式。它基于JavaScript的子集,易于人阅读和编写,同时也易于机器解析和生成。
JSON的诞生,是为了解决电子邮件传输中纯文本数据容量过大,导致邮件传输缓慢的问题。为了解决这个问题,JSON被设计为一种纯文本格式,可以用来存储和传输数据。
JSON的特点主要有以下几点:
总的来说,JSON是一种非常有用的数据格式,无论是在前端开发还是后端开发中,都扮演着重要的角色。
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式,它基于 JavaScript 对象或数组的表示法。这意味着 JSON 数据是由键值对组成的,其中键是字符串,值可以是任意的 JavaScript 数据类型,包括数字、字符串、布尔值、数组、另一个 JSON 对象或 null。
JSON 示例:
{
"name": "John Doe",
"age": 30,
"isStudent": false,
"subjects": ["Math", "English", "History"],
"scores": {
"Math": 90,
"English": 85,
"History": 95
},
"nullValue": null,
"emptyArray": []
}
代码示例:
json 快速入门案例
json 快速入门案例
JSON.stringify(json):是一个JavaScript函数,它将一个JSON对象转换为JSON字符串。这个函数的名称“stringify”来源于它的功能,即将复杂的数据结构(如对象)转换为简单的字符串表示形式。
JSON.parse(jsonString):是另一个JavaScript函数,它将一个JSON字符串转换回JSON对象。这个函数的名称“parse”来源于它的功能,即将简单的字符串表示形式解析(或解析)回复杂的数据结构(如对象)。
代码示例:
// 创建一个 JavaScript 对象
let person = {
name: "John Doe",
age: 30,
city: "New York"
};
// 使用 JSON.stringify() 将对象转换为 JSON 字符串
let jsonString = JSON.stringify(person);
console.log(jsonString); // 输出:'{"name":"John Doe","age":30,"city":"New York"}'
// 使用 JSON.parse() 将 JSON 字符串转换为对象
let parsedPerson = JSON.parse(jsonString);
console.log(parsedPerson); // 输出: { name: 'John Doe', age: 30, city: 'New York' }
这个示例首先创建了一个 person 对象,然后使用 JSON.stringify() 将它转换为 JSON 字符串。然后,它使用 JSON.parse() 将 JSON 字符串转换回 person 对象。
注意点:
在 Java 中使用 JSON,通常需要引入第三方库来帮助我们处理 JSON 数据。Gson 是一个非常流行的 Java JSON 库,它可以将 Java 对象转换为 JSON 格式,也可以将 JSON 数据转换为 Java 对象。为了使用 Gson,我们需要将其 JAR 包(gson.jar)引入到我们的项目中。
Gson 是由 Google 开发的一个开源库,它提供了一种简单的方式来在 Java 对象和 JSON 数据之间进行映射。这意味着我们可以将 Java 对象转换为 JSON 字符串,或者将 JSON 字符串转换回 Java 对象。Gson 使用起来非常简单,只需要几个 API 调用就可以完成转换。
import com.fasterxml.jackson.databind.ObjectMapper; //引入ObjectMapper
public class Student {
private String name;
private int age;
// 构造函数、getter和setter方法...
public static void main(String[] args) throws Exception {
ObjectMapper mapper = new ObjectMapper(); // 创建一个ObjectMapper对象
Student student = new Student("Tom", 20);
String json = mapper.writeValueAsString(student); // 将Java对象转换为JSON字符串
System.out.println(json); // 输出: {"name":"Tom","age":20}
}
}
import com.fasterxml.jackson.databind.ObjectMapper; //引入ObjectMapper
public class Student {
private String name;
private int age;
// 构造函数、getter和setter方法...
public static void main(String[] args) throws Exception {
ObjectMapper mapper = new ObjectMapper(); // 创建一个ObjectMapper对象
String json = "{\"name\":\"Tom\",\"age\":20}";
Student student = mapper.readValue(json, Student.class); // 将JSON字符串转换为Java对象
System.out.println(student.getName()); // 输出: Tom
}
}
对于List对象的转换,可以使用writeValueAsArray()和readValueAsList()方法。以下是一个示例:
import com.fasterxml.jackson.databind.ObjectMapper; //引入ObjectMapper
import java.util.Arrays;
import java.util.List;
public class Main {
public static void main(String[] args) throws Exception {
ObjectMapper mapper = new ObjectMapper(); // 创建一个ObjectMapper对象
List list = Arrays.asList("Apple", "Banana", "Cherry");
String json = mapper.writeValueAsString(list); // 将List对象转换为JSON字符串
System.out.println(json); // 输出: ["Apple","Banana","Cherry"]
List listFromJson = mapper.readValue(json, List.class); // 将JSON字符串转换为List对象
System.out.println(listFromJson); // 输出: [Apple, Banana, Cherry]
}
}
对于Map对象的转换,可以使用writeValueAsMap()和readValueAsMap()方法。以下是一个示例:
java复制代码
import com.fasterxml.jackson.databind.ObjectMapper; //引入ObjectMapper
import java.util.HashMap;
import java.util.Map;
public class Main {
public static void main(String[] args) throws Exception {
ObjectMapper mapper = new ObjectMapper(); // 创建一个ObjectMapper对象
Map map = new HashMap<>();
map.put("name", "Tom");
map.put("age", "20");
String json = mapper.writeValueAsString(map); // 将Map对象转换为JSON字符串
System.out.println(json); // 输出: {"name":"Tom","age":"20"}
Map mapFromJson = mapper.readValue(json, Map.class); // 将JSON字符串转换为Map对象
System.out.println(mapFromJson); // 输出: {name=Tom, age=20}
}
}
AJAX,全称“Asynchronous JavaScript and XML”(异步的 JavaScript 和 XML),是一种在网页中异步加载和更新数据的技术。简单来说,它允许网页在不重新加载整个页面的情况下,通过JavaScript发送请求到服务器,获取数据并更新页面的特定部分。这种技术提供了更快速、更流畅的用户体验,使用户可以与网页进行交互,而无需等待整个页面重新加载。
异步性:
AJAX 的“异步”性质指的是当 JavaScript 发起一个 HTTP 请求时,它不会阻塞其他代码的执行。也就是说,在等待服务器响应的时候,用户仍然可以与网页进行交互,而不是看到一个“加载中”的提示或者完全无法操作。
局部更新:
通过 AJAX,你可以只更新网页的一小部分,而不是整个页面。这提供了更流畅的用户体验,因为用户不需要等待整个页面重新加载来看到新的数据。例如,在社交媒体网站上,你可以滚动到底部并点击“加载更多”按钮来获取更多帖子,而页面的其他部分(如顶部的导航栏或侧边栏)则保持不变。
请求数据:
AJAX 允许你指定要发送到服务器的数据。这可以是简单的查询参数,也可以是复杂的 JSON 或 XML 结构。这意味着你可以根据用户的输入或其他条件来定制发送给服务器的请求。
广泛应用:
AJAX 技术广泛应用于网页开发中,用于实现动态内容加载、表单提交、实时数据更新等功能。它是现代 Web 应用的重要组成部分,使得网页变得更加交互性和响应性。
工作原理:
缺点:
工作原理:
var xhr = new XMLHttpRequest();`
xhr.open('GET', 'https://api.example.com/data', true); // true 表示异步发送
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 数据已成功返回,可以处理它
console.log(xhr.responseText); // 例如,打印返回的文本数据
} else {
// 处理错误情况
}
}
};
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText); // 假设返回的是 JSON 数据
// 使用 data 来更新页面或执行其他操作,例如:
document.getElementById('some-element-id').textContent = data.someProperty;
} else {
// 处理错误情况
}
}
};
要求:
在输入框输入用户名,点击验证用户名(使用 ajax 方式)
服务端验证该用户名是否为"king",以返回不同的提示
AjaxDemo.html
Title
用户名:
验证结果
ajaxservlet.java
package servlet;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name = "ajaxservlet", urlPatterns = "/ajaxservlet")
public class ajaxservlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
//设置 响应编码
response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("utf-8");
String uname = request.getParameter("uname");
System.out.println(uname);
//假定用户名为king,就不可用,其他用户名可以
if ("king".equals(uname)){
response.getWriter().write("输入的用户名不能为“king”!");
} else {
response.getWriter().write("输入的用户名符合规范");
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
doGet(request, response);
}
}
启动服务器
jQuery还没学,我先挖个坑,我会回来填的...( ̄▽ ̄)/