关键词

用原生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内容更新到页面中的效果。

本文链接:http://task.lmcjl.com/news/8190.html

展开阅读全文