ajax json知识

随着互联网的不断发展，前后端分离的架构模式越来越受欢迎。其中，前端通过ajax获取后端返回的JSON数据成为一种非常普遍的方式。所以，在开发网页应用时，对于ajax和json的掌握至关重要。

首先，让我们来了解一下什么是ajax。Ajax全名是Asynchronous JavaScript and XML，即使用异步的JavaScript和XML技术向服务器请求数据，从而达到无刷新更新部分内容的目的。ajax可以通过XMLHttpRequest对象向服务器发送请求，获取文本、XML、JSON等数据格式，然后在页面中进行局部刷新。

    // 使用ajax向服务器发送请求
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    }
    xhr.open("GET","http://example.com/data.json",true);
    xhr.send();

接下来，我们来看一下JSON。JSON是一种数据交换格式，轻量简洁，易于阅读和编写。JSON由键值对组成，其中键必须是双引号包裹的字符串，值可以是字符串、数字、布尔值、数组、对象或null。JSON也被广泛用于存储和传输Web应用程序的数据。

    // 使用JSON解析服务器返回的数据
    let jsonStr = '{"name": "Tom","age": 18}';
    let jsonObj = JSON.parse(jsonStr);
    console.log(jsonObj.name);
    console.log(jsonObj.age);

最后，我们来结合ajax和JSON，看一下如何使用ajax获取后端返回的JSON数据。

    // 使用ajax获取后端返回的JSON数据
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            let jsonObj = JSON.parse(xhr.responseText);
            console.log(jsonObj.name);
            console.log(jsonObj.age);
        }
    }
    xhr.open("GET",true);
    xhr.send();

通过以上的代码，我们可以看出，ajax与JSON结合使用可以轻松地实现前后端数据交互，使网页应用呈现更加优秀的用户体验。