js原生Ajax的封装和原理详解

下面是关于"js原生Ajax的封装和原理详解"的完整攻略：

什么是Ajax

Ajax是指异步JavaScript和XML（Asynchronous Javascript and XML）技术，主要用于异步加载数据，是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。

使用Ajax技术，通过XMLHttpRequest对象向服务器发送请求，并进行异步通信，获取服务器返回的数据后，再利用JavaScript来改变页面内容，是实现动态网页的重要技术。

Ajax的原理

Ajax的原理是基于原生的XMLHttpRequest对象来实现的，其主要流程可以分为4个步骤：

1. 创建XMLHttpRequest对象

使用JavaScript中的new XMLHttpRequest()创建XMLHttpRequest对象。

var xhr = new XMLHttpRequest();

1. 向服务器发送请求

使用XMLHttpRequest对象的open()方法指定请求的方法和地址，使用send()方法发送请求，并携带需要发送的数据。

xhr.open('GET', 'url', true); // true表示异步请求
xhr.send(data);

1. 接收服务器返回的数据

利用XMLHttpRequest对象的onreadystatechange事件监听接收服务器返回数据的状态，并在数据接收完成后，使用responseText或responseXML属性获取服务器返回的数据。

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = xhr.responseText;
        // 对服务器返回的数据进行处理
    }
}

1. 使用JavaScript改变页面内容

根据服务器返回的数据，使用JavaScript改变页面内容。

封装Ajax函数

由于原生的XMLHttpRequest对象使用起来不太方便，我们通常需要将其进行封装，便于使用。以下是一个基于原生Ajax封装的Ajax函数。

function ajax(options) {
    var defaults = {
        method: 'GET',
        url: '',
        data: '',
        async: true,
        success: function (response) {},
        error: function (response) {}
    };
    var xhr = new XMLHttpRequest();
    // 合并用户配置参数和默认参数
    var settings = Object.assign({}, defaults, options);

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                settings.success(xhr.responseText);
            } else {
                settings.error(xhr.responseText);
            }
        }
    }

    xhr.open(settings.method, settings.url, settings.async);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
    xhr.send(settings.method === 'GET' ? null : settings.data);
}

使用封装的Ajax函数

调用封装好的Ajax函数，使用以下格式传递参数：

ajax({
    method: 'POST', // 请求方法
    url: 'url', // 请求地址
    data: 'name=jack&age=20', // 发送的数据
    async: true, // 是否异步
    success: function (response) {
        // 数据请求成功后的处理
    },
    error: function (response) {
        // 数据请求失败后的处理
    }
});

示例1：使用Ajax获取JSON数据

调用封装好的Ajax函数，获取JSON类型的数据，并在请求成功后打印数据内容。

<button onclick="loadJson()">获取JSON数据</button>
<script>
    function loadJson() {
        ajax({
            method: 'GET',
            url: 'data.json',
            success: function (response) {
                var data = JSON.parse(response);
                console.log(data);
            },
            error: function (response) {
                console.log('请求失败：' + response);
            }
        });
    }
</script>

示例2：使用Ajax提交表单

调用封装好的Ajax函数，将表单数据发送到服务器。

<form id="myform">
    <label>姓名：</label><input type="text" name="name"><br>
    <label>年龄：</label><input type="text" name="age"><br>
    <input type="button" value="提交" onclick="submitForm()">
</form>
<script>
    function submitForm() {
        var form = document.getElementById('myform');
        var data = new FormData(form);
        ajax({
            method: 'POST',
            url: 'submit.php',
            data: data,
            success: function (response) {
                console.log('提交成功：' + response);
            },
            error: function (response) {
                console.log('提交失败：' + response);
            }
        });
    }
</script>

以上就是关于"js原生Ajax的封装和原理详解"的完整攻略。