JS部分笔记

使用AJAX加载数据

AJAX是一种异步加载数据的技术，可以在不刷新整个页面的情况下向服务器请求数据。以下是一个使用AJAX加载JSON数据的示例：

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json");
xhr.onload = function() {
  if(xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

使用Promise处理异步操作

Promise是一种处理异步操作的方法，它可以让我们更方便地处理回调函数和错误处理。以下是一个简单的Promise示例：

function getData() {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "data.json");
    xhr.onload = function() {
      if(xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        resolve(data);
      } else {
        reject(Error(xhr.statusText));
      }
    };
    xhr.onerror = function() {
      reject(Error("Network Error"));
    };
    xhr.send();
  });
}

getData().then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.log(error);
});

使用Async/Await处理异步操作

Async/Await是一种基于Promise的异步操作处理方法，它可以让我们更方便地处理异步操作。以下是一个简单的Async/Await示例：

async function getData() {
  try {
    var response = await fetch("data.json");
    var data = await response.json();
    console.log(data);
  } catch(error) {
    console.log(error);
  }
}

getData();

使用ES6模板字符串

ES6模板字符串是一种更方便的字符串拼接方法，可以使用${}来插入变量。以下是一个简单的ES6模板字符串示例：

var name = "John";
var age = 25;
console.log(`My name is ${name} and I am ${age} years old.`);