ajkx json实现局部刷新

局部刷新是一个比较常用的技术，可以提高网页的性能。实现局部刷新的方式有很多种，其中AJAX是一种很常用的方式。在AJAX技术中的JSON，可以实现数据的异步传输和解析，从而实现局部刷新。

使用AJAX和JSON实现局部刷新需要了解两个重要的概念：

• AJAX：即“Asynchronous JavaScript and XML”，是一种在不重新载入整个网页的情况下，通过后台与服务器进行数据交互的技术。
• JSON：即“JavaScript Object Notation”，是一种轻量级的数据交换格式，可以通过JavaScript进行解析。

下面是一个使用AJAX和JSON实现局部刷新的简单示例：

'use strict'

var url = '/api/data';  // 后端提供数据的接口

// 发送AJAX请求获取数据
function getData() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET',url,true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var data = JSON.parse(xhr.responseText);
      updateDOM(data);
    }
  };
  xhr.send();
}

// 更新DOM节点
function updateDOM(data) {
  var targetNode = document.getElementById('target');  // 目标节点
  targetNode.innerHTML = '';  // 清空目标节点
  // 遍历数据并创建节点
  for (var i = 0; i < data.length; i++) {
    var itemNode = document.createElement('div');
    itemNode.innerHTML = data[i];
    targetNode.appendChild(itemNode);
  }
}

// 定时获取数据
setInterval(function () {
  getData();
},2000);

以上代码中，getData函数使用XMLHttpRequest对象获取数据，然后通过JSON.parse解析数据，最后调用updateDOM函数更新DOM节点。updateDOM函数创建目标节点，并用遍历的方式创建子节点，然后将子节点添加到目标节点中。最后使用setInterval定时调用getData函数，从而实现了局部刷新。