Ajax是一种在网页上动态加载数据的技术，它能够在不刷新整个页面的情况下，通过发送异步请求与服务器交换数据。在使用Ajax的过程中，通过给Ajax对象的on事件绑定函数可以实现在不同阶段对数据的处理。 在Ajax中，可以使用.on方法添加样式。例如，当点击一个按钮时，通过Ajax发送一个请求并获取到数据后，可以通过.on方法给某个元素添加一个特定的样式，来改变这个元素的外观。比如，当点击一个按钮后，想要改变某个div的背景颜色为红色，可以使用以下代码：

// HTML代码
<div id="target">这是一个div</div>
<button id="btn">点击我</button>
// JavaScript代码
$('#btn').on('click', function() {
$.ajax({
url: 'example.com/data',
success: function(data) {
$('#target').css('background-color', 'red');
}
});
});

在上述代码中，当点击按钮时，会通过Ajax发送一个请求并获取到数据，然后成功时在回调函数中使用.on方法绑定样式。在这个例子中，成功后将目标div的背景颜色设置为红色。 除了改变背景颜色，还可以通过.on方法来修改元素的其他样式属性，例如文字颜色、字体大小、边框样式等等。这些样式的修改可以更好地适应用户对于界面交互的反馈需求。 另外，在Ajax加载过程中，可以使用.on方法来显示加载中的状态。例如，当用户点击一个按钮后，需要获取一些数据进行处理，这个过程可能需要一些时间。为了提高用户体验，在等待数据加载完成的过程中，可以通过.on方法给用户显示一个加载中的提示。示例如下：

// HTML代码
<div id="loading">正在加载中...</div>
<button id="btn">点击我</button>
// JavaScript代码
$('#btn').on('click', function() {
$('#loading').show();  // 显示加载中提示
$.ajax({
url: 'example.com/data',
success: function(data) {
// 数据加载成功后的处理
$('#loading').hide();  // 隐藏加载中提示
}
});
});

在这个例子中，当点击按钮时，首先显示一个加载中的提示，并通过Ajax发送请求获取数据。当数据加载成功后，在回调函数中再隐藏加载中的提示。这样用户就可以清楚地知道数据正在加载中，避免了用户的不确定性。 总之，通过在Ajax中使用.on方法添加样式，可以实现在不同阶段对元素样式的修改，使用户能够更好地感知到页面的变化和交互，并提升用户体验。无论是改变特定元素的外观，还是显示加载中的提示，都可以通过.on方法来实现。