AJAX 作业1 - 必要商城分类 目标：完成如下分类切换效果 要求： 1. 默认上来展示所有一级分类数据 2. 点击一级分类切换，展示下属二级分类数据 3. 点击二级分类分类，展示下属三级分类数据

AJAX (Asynchronous JavaScript and XML) 是一种用于创建动态网页的技术，它允许在不刷新整个页面的情况下，通过后台与服务器交换数据并更新部分内容。针对这个任务，你可以按照以下步骤来实现：

1. **HTML结构**:
- 创建一个容器来显示分类数据，比如`<ul id="categoryList">`
- 对每个分类级别（一级、二级和三级），添加相应的 `<li>` 标签，并给它们设置唯一的ID或数据属性以便于JavaScript操作。

2. **JSON数据结构**:
- 假设从服务器获取的数据是一个嵌套的JSON数组，例如：

   {
     "categories": [
       { "id": 1, "name": "一级分类1", "subCategories": [ { "id": 2, "name": "二级分类1" }, ... ] },
       { "id": 3, "name": "一级分类2", "subCategories": [ ... ] },
     ]
   }

3. **JavaScript（使用jQuery为例）**:
a. 获取一级分类列表，初始化显示全部数据：

   $.getJSON('api/categories', function(data) {
     $('#categoryList').html(fillCategoryList(data.categories));
   });
   
   function fillCategoryList(categories) {
     return categories.map(category => `<li data-id="${category.id}">${category.name}</li>`);
   }

b. 给一级分类项绑定点击事件，异步加载二级分类：

   $('#categoryList li').click(function() {
     var categoryId = $(this).data('id');
     fetchSubCategories(categoryId);
   });

   function fetchSubCategories(categoryId) {
     $.getJSON(`api/categories/${categoryId}/subCategories`, function(subCategories) {
       // 更新二级分类列表
       $('#categoryList').html(fillSubCategoryList(subCategories));
     });
   }
   
   function fillSubCategoryList(subCategories) {
     return subCategories.map(subCategory => `<li data-id="${subCategory.id}">${subCategory.name}</li>`);
   }

4. **处理三级分类**:
类似地，为二级分类项添加点击事件，加载并替换三级分类列表。注意递归调用和适当的数据传递。

5. **样式优化**:
使用CSS美化分类切换效果，如hover状态、动画等。