ajax获取json图片数据

AJAX获取JSON图片数据

AJAX是一种技术，可以通过JavaScript在不刷新网页的情况下向服务器发送请求，并通过获取的数据更新网页。其中，获取JSON图片数据是一种常见的应用场景。本文将介绍如何使用AJAX获取JSON图片数据。

// 创建AJAX请求对象
var xhr = new XMLHttpRequest();

// 设置请求地址（假设服务器返回的JSON数据中包含图片地址image）
var url = 'http://www.example.com/jsonData';

// 通过AJAX获取JSON数据
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var jsonData = JSON.parse(xhr.responseText);
        var imgSrc = jsonData.image;

        // 创建img标签，并设置图片地址
        var img = document.createElement('img');
        img.src = imgSrc;

        // 将img标签插入到页面中
        document.body.appendChild(img);
    }
};
xhr.open('GET',url,true);
xhr.send();

上述代码中，通过创建XMLHttpRequest对象，设置请求地址并发送请求，最后解析获取到的JSON数据，得到图片地址并创建img标签，最终将img标签插入到页面中。