使用JavaScript 定义自己的ajax函数

使用JavaScript 定义自己的ajax函数，可以避免使用第三方库，能够更好地对代码进行掌控，实现更精细化的交互效果。

以下是使用JavaScript 定义自己的ajax函数的完整攻略及示例说明：

定义ajax函数

我们可以使用 JavaScript 进行定义 ajax 函数，以便方便在后续的代码中使用。下面展示一个基本的 ajax 函数定义示例：

function ajax(option) {
    var xhr = new XMLHttpRequest();
    var type = option.type ? option.type.toUpperCase() : 'GET';
    var data = option.data ? JSON.stringify(option.data) : null;
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                option.success(xhr.responseText);
            } else {
                option.error(xhr.status);
            }
        }
    };
    xhr.open(type, option.url, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(data);
}

在上面的 ajax 函数中，我们先创建了一个 XMLHttpRequest 对象，然后根据调用 ajax 函数的时候传递进来的 option 参数，构造了一些默认的请求参数和对应的请求方法，之后通过 open() 方法和 send() 方法发出请求，处理请求状态的变化，并根据请求返回的状态码做出响应等操作。

ajax函数使用

定义好 ajax 函数后，我们就可以在后续的代码中方便地使用该函数进行 ajax 请求，以下是一个简单的示例：

ajax({
    type: 'GET',
    url: 'https://api.example.com/data',
    success: function (res) {
        console.log(res);
    },
    error: function (status) {
        console.log('Error:', status);
    }
});

在上面的示例中，我们调用 ajax 函数完成一个 GET 请求，在成功返回数据后，输出返回的数据；在请求失败时，输出请求的错误状态码。

以下是另一个示例，实现一个 POST 请求：

ajax({
    type: 'POST',
    url: 'https://api.example.com/data',
    data: {
        name: '张三',
        age: 18
    },
    success: function (res) {
        console.log(res);
    },
    error: function (status) {
        console.log('Error:', status);
    }
});

在上面的示例中，我们调用 ajax 函数完成一个 POST 请求，将请求数据设置为一个包含 name 和 age 字段的对象，成功返回数据后，输出返回的数据；在请求失败时，输出请求的错误状态码。

通过以上的示例介绍，相信大家已经理解了如何使用 JavaScript 定义自己的 ajax 函数的完整攻略。