ajax 既加载html 又加载json

AJAX是Asynchronous JavaScript and XML的缩写，意思是通过JavaScript和XML来进行异步数据交互的技术。

在前端开发中，有时还需要同时加载HTML和JSON数据。下面是一个使用AJAX同时加载HTML和JSON的示例代码：

var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open('GET','example.html',true); // 发起HTML文件的GET请求
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById('html-content').innerHTML = xhr.responseText; // 将获取到的HTML内容插入页面
    }
};
xhr.send(); // 发送请求

var xhr2 = new XMLHttpRequest(); // 再创建一个XMLHttpRequest对象
xhr2.open('GET','example.json',true); // 发起JSON文件的GET请求
xhr2.onreadystatechange = function() {
    if (xhr2.readyState === 4 && xhr2.status === 200) {
        var data = JSON.parse(xhr2.responseText); // 将获取到的JSON数据解析为JavaScript对象
        document.getElementById('json-content').innerHTML = 'The title is ' + data.title + '.'; // 将解析后的JSON内容插入页面
    }
};
xhr2.send(); // 发送请求

在这段代码中，我们首先创建了两个XMLHttpRequest对象xhr和xhr2，分别用于获取HTML和JSON数据。这里的GET请求都设置成了异步请求，即第三个参数为true。

每当一个请求的状态发生变化时，都会触发对应的回调函数onreadystatechange。当两个请求的状态都变成了4，即服务器已经成功返回响应数据，就可以从xhr和xhr2中获取到分别对应的HTML和JSON数据了。

对于HTML数据，我们直接将其作为文本插入到页面中的某个元素中（这里是id为html-content的元素）。对于JSON数据，我们使用JSON.parse()将其解析为JavaScript对象，然后可以根据需要将其插入到页面中。本例中，我们只将解析后的title字段插入到了id为json-content的元素中。