JS的Ajax与后端交互数据的实例

JS的Ajax与后端交互数据的实例攻略分以下几个部分：

1. 基本概念及工作原理介绍
2. 使用XMLHttpRequest对象进行Ajax请求发送和数据接收
3. 使用Fetch API进行Ajax请求发送和数据接收
4. 实例说明
5. 小结

下面我一一讲解。

1. 基本概念及工作原理介绍

Ajax全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于在web页面中无需刷新的技术。通过Ajax技术，可以在用户与服务器交互的同时，动态地更新网页内容，极大地增强了网站的交互性能。

Ajax的工作原理是通过JavaScript的XMLHttpRequest对象，向服务器发起异步请求，获取服务器返回的数据，并以此来实现动态更新网页内容的效果。

1. 使用XMLHttpRequest对象进行Ajax请求发送和数据接收

XMLHttpRequest对象是Ajax的核心，在浏览器中使用JavaScript语言进行异步访问服务器的接口。可以使用它发送HTTP请求（GET、POST等），并获得服务器响应的数据。下面是一个基本的XMLHttpRequest请求代码：

var xhr = new XMLHttpRequest();     // 创建一个xhr对象
xhr.onreadystatechange = function(){     // 处理响应
    if(xhr.readyState == 4){     // 判断响应状态
        if(xhr.status == 200){     // 判断http状态码
            // 服务器返回的数据在responseText属性中
            console.log(xhr.responseText);
        }else{
            console.log("Request was unsuccessful: "+xhr.status); // 输出请求失败信息
        }
    }
};
xhr.open("GET", "http://example.com/ajax.php", true);     // 准备发送请求
xhr.send(null);     // 发送请求

在上面的代码中，我们就通过XMLHttpRequest对象向http://example.com/ajax.php发送了一次GET请求，当服务器响应后，我们可以使用xhr.responseText属性获取到服务器返回的数据。

1. 使用Fetch API进行Ajax请求发送和数据接收

Fetch API是ES6中的新特性，它提供了更简单、更强大、更灵活的方式来发送Ajax请求和接收服务器返回的数据。Fetch API使用Promise对象来管理异步操作，代码如下：

fetch('http://example.com/ajax.php')
    .then(function(response){
        if(response.ok){    // 判断响应状态码是否正常
            return response.text();    // 将response对象转化为文本格式，并返回
        }else{
            console.log("Request was unsuccessful: "+response.status); // 输出请求发送失败的提示信息
        }
    })
    .then(function(text){
        console.log(text);    // 输出服务器返回的数据
    })
    .catch(function(error){
        console.log(error);    // 输出捕获到的异常信息
    });

在上述代码中，我们通过fetch()方法向http://example.com/ajax.php发送了一次请求，并在返回Promise对象后使用了.then()和.catch()方法进行处理。

1. 实例说明

下面，我们通过两个实例说明如何使用Ajax与后端交互数据。

示例1：基于jQuery的Ajax表单提交

$(document).on('submit', 'form', function(e) {
    e.preventDefault();
    var form = $(this);
    var url = form.attr('action');
    var formData = new FormData(form[0]);
    $.ajax({
        url: url,
        type: 'POST',
        contentType: false,
        processData: false,
        data: formData,
        dataType: 'json',
        success: function(res) {
            if(res.status == 'success'){
                alert('提交成功！');
            }
        },
        error: function() {
            console.log('请求发送失败！');
        }
    });
});

在这个例子中，我们首先使用了jQuery的事件委托方法来监听form表单的提交事件，在提交事件被触发后，我们取消了默认的表单提交行为，并使用FormData对象来获取表单数据，然后，我们通过$.ajax()方法来发送POST请求并将表单数据附加在请求中，{contentType: false, processData: false}这两个属性设置将在发送前序列化FormData对象。在服务器响应后，我们根据返回的数据中的状态码(results.status)来确认是否提交成功，如果成功将弹出一个提示框。如果请求发送失败，则在控制台输出“请求发送失败”字啊话。

示例2：基于Fetch API的Ajax数据交互

fetch('api/users')
    .then(function(response) {
        return response.json();
    })
    .then(function(data) {
        var table = document.createElement('table');
        var trFirst = document.createElement('tr');
        var thName = document.createElement('th');
        var thAge = document.createElement('th');
        thName.textContent = '姓名';
        thAge.textContent = '年龄';
        trFirst.appendChild(thName);
        trFirst.appendChild(thAge);
        table.appendChild(trFirst);
        data.forEach(function(user){
            var tr = document.createElement('tr');
            var tdName = document.createElement('td');
            var tdAge = document.createElement('td');
            tdName.textContent = user.name;
            tdAge.textContent = user.age;
            tr.appendChild(tdName);
            tr.appendChild(tdAge);
            table.appendChild(tr);
        });
        document.body.appendChild(table);
    })
    .catch(function(e) {
        alert('获取数据失败！');
    });

在这个例子中，我们使用Fetch API来向服务器请求用户数据，当服务器响应后，我们使用response.json()方法将响应数据解析为JSON数据格式，并使用JavaScript创建了一个HTML表格，以展现数据。如果请求发送失败，将弹出一个提示框。

5.小结

本文通过介绍Ajax的基本概念、工作原理以及代码示例，让大家了解了如何使用Ajax来与后端进行数据交互，并通过实例说明了如何使用XMLHttpRequest对象和Fetch API来进行Ajax数据交互。掌握了这些内容，相信大家在开发web应用时，会更加得心应手。