用原生JS对AJAX做简单封装的实例代码

关于用原生JS对AJAX做简单封装的实例代码，具体使用步骤如下：

1. 创建XMLHttpRequest对象

首先，我们需要在JavaScript中，创建一个XMLHttpRequest对象。XMLHttpRequest对象是AJAX的核心，它提供了与服务器交互的能力。

var xhr=null;
if(window.XMLHttpRequest) {
    xhr=new XMLHttpRequest(); // 创建XMLHttpRequest对象，针对现代浏览器
} else {
    xhr=new ActiveXObject("Microsoft.XMLHTTP"); // 创建XMLHttpRequest对象，针对IE6及其以下版本浏览器
}

2. 发送请求和接收响应信息

然后，我们需要使用XMLHttpRequest对象，发送HTTP请求并接收响应信息。

function sendRequest(url, callback) {
    var xhr=null;
    if(window.XMLHttpRequest) {
        xhr=new XMLHttpRequest();
    } else {
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4 && xhr.status==200){
            callback(xhr.responseText); // 调用回调函数，并传入服务器响应的数据
        }
    };
    xhr.open("GET", url, true); // 发送HTTP请求
    xhr.send(null); // 接收响应信息
}

在上述代码中，sendRequest()函数接收两个参数- AJAX请求的URL和一个回调函数。当XMLHttpRequest对象的readyState属性发生改变时，我们的回调函数将被调用，readyState=4代表请求已完成，status=200代表HTTP请求已成功处理。

3. 示例1：使用AJAX获取Json文件数据并解析

下面，我们来看一个简单的示例，说明如何使用我们封装的AJAX函数，获取一个JSON格式的数据：

function loadJson(url) {
    sendRequest(url,function(responseText){
        var json=JSON.parse(responseText); // 将JSON格式的字符串解析为JavaScript对象
        console.log(json); // 输出解析后的JSON数据
    });
}

在上述代码中，我们使用了JSON.parse()方法将JSON格式的字符串解析为JavaScript对象，并在控制台中输出了解析后的JSON数据。

4. 示例2：使用AJAX获取HTML文件并更新页面

接下来，我们看一个例子，它演示了如何使用我们的AJAX函数，获取HTML文件并更新页面。

假设我们的页面有一个id为"content"的元素，我们的Ajax请求将获取一个HTML格式的文件，内容包括一个表格的HTML代码，我们的目的是将这些代码插入到页面的content元素中。我们可以这样做：

function loadTable(url) {
    sendRequest(url,function(responseText){
        var table=document.createElement('table');
        table.innerHTML=responseText; // 将服务器响应的HTML代码插入到table元素之中
        document.getElementById('content').appendChild(table); // 在页面中插入表格
    });
}

在上述代码中，我们创建一个table元素，插入服务器响应的HTML代码，并将其添加到id为"content"的元素中，实现了将HTML内容更新到页面中的效果。