AJAX详解（一）在上篇文章中，我们简单地介绍了一下AJAX是什么，今天，我们来深入探究一下AJAX,其中包括AJAX的

在上篇文章中，我们简单地介绍了一下AJAX是什么，今天，我们来深入探究一下AJAX

工作原理

一、创建XMLHttpRequest对象

AJAX的核心是XMLHttpRequest对象，这个对象允许JavaScript在后台与服务器进行异步数据交换。

开发者首先需要创建一个XMLHttpRequest实例，这是发起AJAX请求的基础。

var xhr = new XMLHttpRequest();

二、配置请求

接下来，需要配置这个请求，包括：

请求类型：最常用的两种类型是GET和POST。GET通常用于获取数据，而POST用于提交数据到服务器。
请求URL：指定要请求的服务器资源地址。
异步标志：设置为true，表示请求将是异步的，即JavaScript代码可以继续执行，不必等待服务器响应。

 xhr.open('GET',
 'https://api.example.com/data',
 true) //这里稍微折叠一下方便大家看

这里我们配置了一个GET请求到https://api.example.com/data，并且设置了请求为异步模式。

三、发送请求

使用open()方法设置了请求的基本信息后，通过send()方法发送请求。如果是POST请求，还需要在send()方法中传递请求体数据。

 xhr.send()

四、监听状态变化

XMLHttpRequest对象有一个readyState属性，它表示请求/响应过程的当前活动阶段，从0到4变化：

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中（响应中通常部分数据可获得）
4: 请求已完成，且响应已就绪

开发者可以通过监听onreadystatechange事件，来判断请求的状态变化。当readyState变为4且status为200（或者200-299范围内的其他成功状态码），表示请求成功完成。

五、处理响应

一旦请求成功，可以通过responseText或responseXML属性访问服务器返回的数据。通常是JSON或XML格式，但也可以是任何类型的数据。然后，利用JavaScript操作DOM（文档对象模型），将这些数据动态地插入到页面中，从而实现页面内容的局部更新，而无需刷新整个页面。

六、异步与同步的区别

异步：在发送请求后，JavaScript不会等待服务器响应，而是继续执行后续代码，当服务器响应到达时，通过事件回调处理响应。
同步：如果请求是同步的，则浏览器会暂停执行后续JavaScript，直到请求完成，这会导致页面冻结，用户体验极差，因此在AJAX中几乎总是使用异步模式。

四、五、六的演示代码：

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 成功获取数据后的处理逻辑
        var data = JSON.parse(xhr.responseText); // 假设服务器返回的是JSON格式的数据
        console.log(data);
        updatePage(data); // 假设updatePage是一个处理数据并更新页面的函数
    } else if (xhr.readyState === 4 && xhr.status !== 200) {
        // 错误处理
        console.error('请求失败，状态码：' + xhr.status);
    }
};

AJAX 的操作流程

首先通过PHP页面将数据库中的数据取出
取出后转成json格式的字符串，后利用ajax把字符串返还给前台
再利用json.parse解析通过循环添加到页面上
那么反之，前端的数据可以利用ajax提交到后台
但是后台是没有办法直接把这些数据插入到数据库中，所以要先提交到PHP页面上
最后再由PHP将数据插入到数据库中

应用场景

1. 动态内容加载（无限滚动）

// 监听窗口滚动事件，当用户滚动到页面底部时触发函数
window.onscroll = function() {
    // 判断用户是否已经滚动到了页面底部
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // 调用函数加载更多内容
        loadMoreContent();
    }
};

// 加载更多内容的函数
function loadMoreContent() {
    // 创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    // 初始化请求，设置请求类型为GET，请求的URL，以及异步标志为true
    xhr.open('GET', '/api/more-content', true);
    // 设置请求完成后的回调函数
    xhr.onload = function() {
        // 如果请求成功（状态码在200-299之间）
        if (xhr.status >= 200 && xhr.status < 300) {
            // 解析服务器返回的JSON格式数据
            var newData = JSON.parse(xhr.responseText);
            // 将新数据追加到页面的指定容器中
            appendDataToPage(newData);
        } else {
            // 如果请求失败，打印错误信息到控制台
            console.error('Failed to load more content');
        }
    };
    // 发送请求
    xhr.send();
}

// 将数据追加到页面的函数
function appendDataToPage(data) {
    // 假设data是一个对象数组，遍历数组
    data.forEach(function(item) {
        // 将每个item的内容（假设是HTML片段）追加到页面的某个容器内
        document.getElementById('content-container').innerHTML += item.content; // 假定item有content属性
    });
}

2. 搜索建议

Javascript
// 绑定输入框的input事件，当用户输入时触发
document.getElementById('search-box').addEventListener('input', function(e) {
    // 获取输入框的当前值
    var searchTerm = e.target.value;
    // 如果搜索词非空，则发送请求获取建议
    if (searchTerm.trim()) {
        // 创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        // 设置请求参数
        xhr.open('GET', `/api/suggestions?query=${encodeURIComponent(searchTerm)}`, true);
        // 设置请求完成后的回调函数
        xhr.onload = function() {
            // 请求成功处理
            if (xhr.status >= 200 && xhr.status < 300) {
                // 解析返回的JSON数据
                var suggestions = JSON.parse(xhr.responseText);
                // 显示搜索建议
                displaySuggestions(suggestions);
            } else {
                // 请求失败处理
                console.error('Failed to fetch search suggestions');
            }
        };
        // 发送请求
        xhr.send();
    } else {
        // 如果搜索框为空，则清空建议列表
        clearSuggestions();
    }
});

// 显示搜索建议的函数
function displaySuggestions(suggestions) {
    // 获取建议列表的DOM元素
    var suggestionsList = document.getElementById('suggestions-list');
    // 清空旧的建议
    suggestionsList.innerHTML = '';
    // 遍历建议数组
    suggestions.forEach(function(suggestion) {
        // 为每个建议创建一个新的list项
        var li = document.createElement('li');
        // 设置list项的内容为建议文本
        li.textContent = suggestion;
        // 将新创建的li元素添加到建议列表中
        suggestionsList.appendChild(li);
    });
}

// 清除建议列表的函数
function clearSuggestions() {
    // 获取建议列表的DOM元素并清空其内容
    document.getElementById('suggestions-list').innerHTML = '';
}

ok，今天的AJAX详解(一)的分享就到这了，小编还在学习中，欢迎大佬们提出建议！！！非常感谢！！！

AJAX详解（一）