JSON和AJAX手拉手，点亮前端数据交互的新高度！

JSON：轻盈的数据交换利器

JSON（JavaScript Object Notation）是一种轻量级的、基于文本的数据交换格式，特点就是简洁明了、易于解析，尤其擅长对象和数据结构的表达。

举个例子，要传输这样一个对象：

{
  "name": "张三",
  "age": 20,
  "hobby": ["打球", "唱歌"]
}

如果用JSON来表示，就是：

{
  "name": "张三",
  "age": 20,
  "hobby": ["打球", "唱歌"]
}

是不是一目了然，清爽利落？

JSON与对象的珠联璧合

JavaScript中的对象和JSON的数据结构非常相似，因此二者之间可以实现无缝转换。

const obj = {
  name: "李四",
  age: 30,
  hobby: ["旅游", "摄影"]
};

const json = JSON.stringify(obj); // 将对象转换为JSON字符串
console.log(json); // 输出：{"name":"李四","age":30,"hobby":["旅游","摄影"]}

const newObj = JSON.parse(json); // 将JSON字符串转换为对象
console.log(newObj); // 输出：{name: "李四", age: 30, hobby: ["旅游", "摄影"]}

AJAX：跨界数据获取的利刃

AJAX（Asynchronous JavaScript and XML），全称为异步JavaScript和XML，是Web开发中实现异步数据交互的一种技术。它允许JavaScript在不重新加载整个页面的情况下，与服务器进行数据交换，极大地提高了用户体验。

function getJSON(url) {
  const xhr = new XMLHttpRequest();

  xhr.open("GET", url, true);
  xhr.send();

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      // 对数据进行处理和显示
    }
  };
}

getJSON("data.json");

JSONP：跨域数据交互的妙招

由于浏览器的同源策略限制，AJAX只能用于同源数据获取。为了解决跨域数据交互的问题，JSONP（JSON with Padding）应运而生。

function getJSONP(url) {
  const script = document.createElement("script");

  script.src = `${url}?callback=myCallback`;

  document.body.appendChild(script);

  window.myCallback = function(data) {
    // 对数据进行处理和显示
  };
}

getJSONP("data.json");

AJAX和JSONP工具函数的锦上添花

为了简化AJAX和JSONP的使用，我们可以封装一些工具函数：

function getJSON(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    xhr.open("GET", url, true);
    xhr.send();

    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject(new Error(`请求失败，状态码：${xhr.status}`));
        }
      }
    };
  });
}

function getJSONP(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");

    script.src = `${url}?callback=myCallback`;

    window.myCallback = function(data) {
      resolve(data);
    };

    script.onerror = function() {
      reject(new Error("脚本加载失败"));
    };

    document.body.appendChild(script);
  });
}

结语

JSON、AJAX和JSONP是前端开发中的三大神器，它们紧密配合，共同构建了数据交互的坚实桥梁。掌握了这三项技能，你将如虎添翼，在前端开发的道路上畅通无阻。