ajax获取 解析json数据格式化

AJAX（Asynchronous JavaScript and XML）的意思是使用 JavaScript 进行异步网络请求。通俗的说，我们可以在不刷新页面的情况下与服务器进行通信。AJAX 最常见的应用就是用于向服务器获取数据。在本文中，我们将使用 AJAX 获取 JSON 数据并且解析和格式化。

// AJAX 请求代码示例
var xhr = new XMLHttpRequest();
xhr.open('GET','example.json',true);
xhr.responseType = 'json';

xhr.onload = function() {
  if (xhr.status === 200) {
    // 处理获取到的 JSON 数据
    var jsonData = xhr.response;
    // 将 JSON 数据格式化并插入到页面中
  } else {
    console.log('请求失败。错误码：' + xhr.status);
  }
};

xhr.send();

在上面的代码示例中，我们使用 XMLHttpRequest 对象发起了一个 GET 请求，该请求获取一个名为 example.json 的 JSON 文件。我们使用 responseType 属性设定了响应格式为 JSON。

在请求正常返回后，我们通过 xhr.response 获取到了获取到的 JSON 数据（已格式化）。接下来，我们需要将 JSON 数据进行解析和格式化，并将其插入到页面中。

// 解析和格式化 JSON 数据示例
function formatJson(json) {
  if (typeof json !== 'string') {
    json = JSON.stringify(json,undefined,2);
  }
  return json.replace(/&/g,'&').replace(/,'<').replace(/>/g,'>');
}

var formattedJson = formatJson(jsonData); // 将 jsonData 进行格式化
document.getElementById('json-container').innerHTML = '
' + formattedJson + '
'; // 将格式化后的数据插入到页面中

在上面的代码示例中，我们编写了一个 formatJson 函数，用于将 JSON 数据格式化成易于阅读的形式。我们使用 JavaScript 的 JSON.stringify 函数将 JSON 数据进行格式化，并用正则表达式进行转义，防止任何非法字符的出现。然后，我们将已格式化的 JSON 数据插入到 id 为 json-container 的元素中。

总而言之，使用 AJAX 获取并解析 JSON 数据可以让我们更加方便地处理从服务器获取的数据。以上的代码示例也可以应用到其他数据格式的请求中，让我们的数据处理更加高效。