Ajax中数据传递的另一种模式 javascript Object Notation思想（JSON）

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。由于 JSON 具有比 XML 更加简单、更加易读、更加易于书写，越来越多的 Web 服务开始采用 JSON 作为数据交换的标准格式。

JSON 的基本语法格式为键值对，即“key:value”格式，用“{}”表示一个对象，用“[]”表示数组，JSON中的数据类型支持 string、number、boolean、null、array、object。通过 JavaScript 代码，可以自由的生成和解析 JSON 数据。在 AJAX 技术中，JSON 也经常被用来传递数据。下面我们来看一个使用 JSON 进行数据传递的实际示例。

示例1

假如我们有一个后端接口 api/getInfo ，返回的数据格式为：

{
    "name": "张三",
    "age": 25,
    "gender": "男"
}

我们可以通过 AJAX 请求获取这个接口返回的 JSON 数据，然后在前端展示出来。

// 封装 AJAX 请求函数
function ajaxGet(url, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
            fn(xhr.responseText);
        }
    };
    xhr.send();
}

// 发送 AJAX 请求获取数据
ajaxGet('api/getInfo', function(responseText) {
    // 将返回的 JSON 数据解析为 JavaScript 对象
    var data = JSON.parse(responseText);
    // 获取前端内容的 DOM 节点
    var nameNode = document.getElementById('name');
    var ageNode = document.getElementById('age');
    var genderNode = document.getElementById('gender');
    // 将数据展示到页面上
    nameNode.innerHTML = data.name;
    ageNode.innerHTML = data.age;
    genderNode.innerHTML = data.gender;
});

示例2

假如我们要向后端发送一个 POST 请求，包含一条数据：

{
    "title": "JSON 教程",
    "author": "张三",
    "content": "JSON 是..."
}

我们可以通过 AJAX 发送 POST 请求，将这个 JSON 数据作为请求体发送给后端。

// 封装 AJAX 请求函数
function ajaxPost(url, data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
            fn(xhr.responseText);
        }
    };
    xhr.send(JSON.stringify(data));
}

// 发送 POST 请求
var data = {
    "title": "JSON 教程",
    "author": "张三",
    "content": "JSON 是..."
};
ajaxPost('api/sendData', data, function(responseText) {
    // 处理返回数据
    console.log(responseText);
});

在以上两个示例中，我们使用 JSON 格式进行了数据的传递和解析。使用 JSON 格式可以让数据更加简单易读，同时也方便了数据的处理和传递。