ajax获取带有json数据

Ajax（Asynchronous JavaScript and XML）是一种利用JavaScript技术向服务器异步发送请求并动态更新页面的技术。在现代网站中，使用Ajax技术获取JSON数据是非常常见的做法。

// 创建XHR对象
var xhr = new XMLHttpRequest();
// 设置请求方法和请求地址
xhr.open("GET","data.json");
// 设置请求头部
xhr.setRequestHeader("Content-type","application/json");
// 监听readyState状态变化，当状态为4时表示请求完成
xhr.onreadystatechange = function() {
   if(xhr.readyState === 4 && xhr.status === 200) {
      // 将获取到的JSON数据解析为JavaScript对象
      var jsonObject = JSON.parse(xhr.responseText);
      // 获取对应DOM元素，将数据填充到相应位置
      document.getElementById("title").innerHTML = jsonObject.title;
      document.getElementById("content").innerHTML = jsonObject.content;
   }
};
// 发送请求
xhr.send();

在上述代码中，我们首先创建了XHR对象。然后我们使用open方法设置请求的方法和请求的地址，该地址指向包含JSON数据的文件。接下来我们设置请求头部为"application/json"，表示我们期望从服务器端获取JSON数据。

由于Ajax技术是一种异步技术，因此我们需要监听XHR对象的readyState状态变化，当状态变成4时，说明请求已经完成。此时我们可以将获取到的JSON数据使用JSON.parse方法解析为JavaScript对象。然后我们可以获取对应的DOM元素，将数据填充到相应的位置。

总的来说，Ajax获取带有JSON数据的文章非常简单，只需要使用XHR对象即可。借助于JSON.parse方法可以将获取到的JSON数据解析为JavaScript对象方便我们操作。