JavaScript 进阶篇3：Ajax、JSON、Prototype介绍

本文将向你介绍 JavaScript 中常用的 Ajax、JSON、Prototype 相关概念以及用法。

Ajax

Ajax 是 Asynchronous JavaScript and XML 的简写，意为“异步 JavaScript 和 XML”。它是一种用于创建快速动态网页的技术，它使得在不刷新整个页面的情况下从服务器获取数据的实现成为可能。

XMLHttpRequest

Ajax 通常使用 XMLHttpRequest 对象来与服务器进行通信。该对象提供了 open()、send() 等方法以及 readyState、status 等属性来控制 Ajax 请求的进展和获取返回数据。

以下是一个简单的获取远程资源的实例：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.open('GET', '/api/data', true);
xhr.send();

Fetch API

除了使用原生 XMLHttpRequest 对象外，还可以使用 Fetch API 来发送 Ajax 请求。相比原生 XMLHttpRequest 对象，Fetch API 编写起来更加简洁，且可以直接返回 Promise 对象，便于使用异步操作。

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fetch Error:', error));

JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。与 XML 相比，JSON 更加简洁易读，可以被 JavaScript 直接解析，被广泛应用于前后端数据交互。

以下是一个 JSON 数据的示例：

{
  "name": "John",
  "age": 30,
  "city": "New York"
}

JSON.parse() 和 JSON.stringify()

在 JavaScript 中，可以使用 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象，使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串。

const jsonStr = '{"name":"John","age":30,"city":"New York"}';
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name); // "John"

const jsonObj2 = { name: 'Tom', age: 20, city: 'London' };
const jsonStr2 = JSON.stringify(jsonObj2);
console.log(jsonStr2); // '{"name":"Tom","age":20,"city":"London"}'

Prototype

在 JavaScript 中，原型（Prototype）是面向对象编程中非常重要的概念，通过原型可以实现对象之间的继承关系。

原型链

JavaScript 中的对象都有一个内部属性：[[Prototype]]。当读取对象的一个属性时，如果对象本身没有该属性，则会沿着该对象的 [[Prototype]] 链继续查找，直到找到该属性或最后一级 [[Prototype]] 上没有该属性为止。

const person = {
  name: 'Tom',
  sayHello() {
    console.log(`Hello! My name is ${this.name}.`);
  },
};
const student = {
  id: '001',
  __proto__: person,
};
console.log(student.id); // "001"
student.sayHello(); // "Hello! My name is Tom."

Object.create()

为了实现对象的继承，可以使用 Object.create() 方法创建一个新对象，并将其原型指向指定的对象。

const person = {
  name: 'Tom',
  sayHello() {
    console.log(`Hello! My name is ${this.name}.`);
  },
};
const student = Object.create(person, {
  id: {
    value: '001',
  },
});
console.log(student.id); // "001"
student.sayHello(); // "Hello! My name is Tom."

示例说明

示例 1：使用 Fetch API 获取数据

以下示例展示了如何使用 Fetch API 发送 Ajax 请求，并解析返回的 JSON 数据：

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fetch Error:', error));

示例 2：原型继承

以下示例展示了如何使用原型实现对象的继承关系：

const person = {
  name: 'Tom',
  sayHello() {
    console.log(`Hello! My name is ${this.name}.`);
  },
};
const student = Object.create(person, {
  id: {
    value: '001',
  },
});
console.log(student.id); // "001"
student.sayHello(); // "Hello! My name is Tom."

以上就是本篇文章对 Ajax、JSON 和 Prototype 的详细介绍和相关示例说明。