基本的封装Ajax之一(Ajax基础封装详解：入门必读之一)

原创

ithorizon 6个月前 (10-21) 阅读数 30 #后端开发

基本的封装Ajax之一：Ajax基础封装详解：入门必读之一

Ajax（Asynchronous JavaScript and XML）技术，自从诞生以来，已经成为前端开发中不可或缺的一部分。它允许浏览器与服务器进行异步通信，实现页面的局部更新，从而节约了用户体验。本文将详细介绍怎样封装基本的Ajax，帮助初学者迅速掌握Ajax的使用。

一、Ajax简介

Ajax技术的核心是XMLHttpRequest对象。它允许JavaScript向服务器发送HTTP请求，并接收响应。通过使用Ajax，可以在不重新加载整个页面的情况下，与服务器交换数据和更新部分网页内容。

二、创建XMLHttpRequest对象

创建XMLHttpRequest对象是使用Ajax的第一步。以下是创建该对象的代码示例：


var xhr;
if (window.XMLHttpRequest) {
    // 非IE6浏览器
    xhr = new XMLHttpRequest();
} else {
    // IE6浏览器
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

三、配置Ajax请求

创建XMLHttpRequest对象后，需要对其进行配置，包括请求方法、URL以及是否异步等。以下是一个配置GET请求的示例：


xhr.open("GET", "example.txt", true);

其中，"GET"描述请求方法，"example.txt"描述请求的URL，"true"描述异步请求。

四、发送Ajax请求

配置完请求后，需要发送请求。以下是发送GET请求的代码示例：


xhr.send();

五、处理服务器响应

当服务器响应请求后，需要采取响应导致进行相应的处理。以下是处理响应的代码示例：


xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // 请求胜利，处理响应导致
        document.getElementById("myDiv").innerHTML = xhr.responseText;
    }
};

其中，"onreadystatechange"事件会在请求的状态出现变化时触发。当readyState为4且status为200时，描述请求胜利，此时可以将服务器返回的数据显示在页面上。

六、封装基本的Ajax函数

为了方便使用，我们可以将上述步骤封装成一个函数。以下是一个易懂的封装示例：


function sendAjax(url, method, data, callback) {
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (method == "GET") {
        xhr.open(method, url + "?" + data, true);
        xhr.send();
    } else if (method == "POST") {
        xhr.open(method, url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
    }
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            callback(xhr.responseText);
        }
    };
}