jQuery AJAX 基础
什么是AJAX？
AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。通过AJAX，网页可以实现异步数据交互，提升用户体验。
jQuery AJAX 的优势
jQuery 提供了简洁易用的AJAX方法，相比原生JavaScript的XMLHttpRequest对象，具有以下优势：
- 简化了AJAX请求的代码编写
- 自动处理浏览器兼容性问题
- 提供了丰富的回调函数处理请求状态
- 支持多种数据格式（JSON、XML、HTML等）
- 提供了便捷的方法链和错误处理机制
jQuery AJAX 核心方法
jQuery 提供了多种AJAX相关方法，其中最常用的包括：
$.ajax()
最底层、最灵活的AJAX方法，可以配置各种参数：
$.ajax({
url: 'data.json',
type: 'GET',
dataType: 'json',
success: function(data) {
console.log('成功获取数据:', data);
},
error: function(xhr, status, error) {
console.error('请求失败:', error);
}
});
$.get()
用于发送GET请求的简化方法：
$.get('data.json', function(data) {
console.log('成功获取数据:', data);
}, 'json');
$.post()
用于发送POST请求的简化方法：
$.post('submit.php', {
name: '张三',
email: 'zhangsan@example.com'
}, function(response) {
console.log('服务器响应:', response);
});
$.getJSON()
专门用于获取JSON数据的简化方法：
$.getJSON('data.json', function(data) {
console.log('成功获取JSON数据:', data);
});
$.load()
用于从服务器加载HTML并插入到指定元素：
$('#content').load('page.html #section');
AJAX 高级特性
数据序列化
jQuery 提供了便捷的方法来序列化表单数据：
// 序列化表单数据
var formData = $('#myForm').serialize();
// 发送序列化后的数据
$.post('submit.php', formData, function(response) {
console.log('服务器响应:', response);
});
跨域请求
由于浏览器的同源策略，默认情况下AJAX请求只能发送到相同域名的服务器。jQuery 提供了JSONP（JSON with Padding）来解决跨域问题：
$.ajax({
url: 'https://api.example.com/data',
dataType: 'jsonp',
jsonp: 'callback',
success: function(data) {
console.log('成功获取跨域数据:', data);
}
});
AJAX 全局事件
jQuery 提供了全局AJAX事件，可以在所有AJAX请求的不同阶段执行回调：
// AJAX请求开始时
$(document).ajaxStart(function() {
$('#loading').show();
});
// AJAX请求结束时
$(document).ajaxStop(function() {
$('#loading').hide();
});
// AJAX请求成功时
$(document).ajaxSuccess(function(event, xhr, settings) {
console.log('AJAX请求成功');
});
// AJAX请求失败时
$(document).ajaxError(function(event, xhr, settings, error) {
console.error('AJAX请求失败:', error);
});
实践案例：用户数据获取与展示
在这个案例中，我们将使用jQuery AJAX从JSONPlaceholder API获取用户数据，并在页面上展示。
// HTML结构
<button id="load-users">加载用户数据</button>
<ul id="user-list"></ul>
// JavaScript代码
$(document).ready(function() {
$('#load-users').click(function() {
$.getJSON('https://jsonplaceholder.typicode.com/users', function(users) {
var userList = $('#user-list');
userList.empty();
$.each(users, function(index, user) {
var userItem = '<li>'
+ '<strong>' + user.name + '</strong><br>'
+ '邮箱: ' + user.email + '<br>'
+ '电话: ' + user.phone + '<br>'
+ '网站: ' + user.website + '
</li>';
userList.append(userItem);
});
}).fail(function() {
$('#user-list').html('<li>加载用户数据失败</li>');
});
});
});
点击下方按钮尝试加载用户数据：
互动练习：AJAX 数据搜索
在这个练习中，你需要实现一个简单的搜索功能，使用AJAX从JSONPlaceholder API搜索帖子。
输入搜索关键词：