关于Ajax应用的课堂教学设计

梁柱森

广东石油化工学院 广东茂名 525000

Ajax即“Asynchronous JavaScript and XML”，称为异步JavaScript和XML，是一种利用JavaScript和XML实现异步数据传输的技术，在Web开发中可以实现网页的局部刷新。在网页端用JavaScript语言调用XMLHttpRequest对象与后台服务器进行数据传输，Ajax可以让Web页面实现异步刷新。也就是说浏览器可以在不刷新整个网页的情况下，对网页的局部进行更新。传统的Web开发(不使用 AJAX)如果需要更新网页内容，必须从服务器重载整个网页面， 提高了网页和用户的交互性，增强了用户体验[1]。

1 Ajax在Web前端开发技术课程中的重要地位

应用系统开发一般是服务端客户端的开发模式，服务端由Java，C#等语言实现操作数据库操作，客户端负责用户界面的展示和交互。最初的客户端只有电脑端，后来随着互联网的发展出现了网页端，近年又出现了移动端、微信小程序端等各种客户端。

面对多种客户端的开发需求，为了提高开发效率，系统开发时普遍采用前后端分离的开发方案。作为后端的服务端只有一个，前端根据需求可以有多个(安卓、iOS、计算机浏览器、手机浏览器、微信小程序、iPad)。后端只通过API接口提供数据，前端负责数据的展示。前后端之间的数据交换主要通过Ajax来实现，Ajax是前端和后端的桥梁[2]。

根据人才培养方案，第三学期学生已经学习了Web应用原理与开发基础课程，掌握了后端开发的相关技术。Web前端开发技术课程在第四学期开设，通过学习Ajax可以复习并深化上学期所学的后端开发内容。

2 存在的问题

Ajax虽然只是现有技术的组合应用，但和最近快速发展的Web前端开发技术联系紧密，也就意味着Ajax应用知识点具有内容新、范围广和实践应用性强的特点。在Ajax应用课堂上要取得好的教学效果就需要教师熟悉教学内容，有丰富的实践经验并认真做好教学设计。对学生进行了反馈调查，发现存在几点问题。

2.1 教材中关于Ajax应用的部分内容太少

目前市场上关于Web 前端开发的教材多如牛毛，但包含Ajax应用内容的教材不多，即使有Ajax应用的内容也只是简单介绍Ajax技术和Ajax函数，没有与后台进行数据交换的应用案例。

2.2 Ajax原理难理解

Ajax原理涉及同步和异步、XMLHttpRequest对象使用、回调函数、文本数据格式处理等知识点，Ajax应用授课和实验学时只有8学时，短时间内学生很难理解这些概念。

2.3 理论与实践脱节

Ajax 是实践性非常强的技术，很多原理和用法必须通过应用实践才能消化和吸收。但实际情况是Ajax综合应用案例太少，学生对知识点掌握得不牢，实际开发能力差。

3 解决方案

3.1 选择合适的教材和开发平台

3.1.1 课程内容设计

介绍完教材上的Ajax技术简介和Ajax函数内容后，为了使学生容易深刻理解Ajax技术，选择学生熟悉的新闻网站系统作为案例讲解Ajax应用。因为在JavaScript 中直接调用XMLHttpRequest对象实现Ajax的功能比较烦琐复杂，但jQuery中提供多个和 AJAX 相关的函数，通过直接调用jQuery AJAX 函数，浏览器可以通过HTTP的Get或 Post请求从Web服务器上读取文本、HTML、XML或 JSON格式的数据，同时调用jQuery的DOM操作函数可以把这些读取到的数据直接绑定网页元素进行动态展示[3]。教学中的例子都采用jQuery实现Ajax功能，大大降低了Ajax的开发难度和复杂性。

3.1.2 后端开发平台的选择

考虑到学生上学期学习WEB应用原理与开发基础课程的时候所用的开发平台是java，这次选择的案例也以java作为后端的开发平台，有利于学生复习java web的内容，保持学习的延续性。为了使用Ajax 技术，后端java web的业务逻辑代码主体不需要改动，只需要增加json数据的生成功能。

3.2 采用比较教学法进行教学设计

教师讲解知识点内容，演示案例，讲解案例的难点和实现步骤，然后让学生模仿案例自己设计程序并实现，培养学生的代码分析能力和代码编写能力。理清思路，选择适合相应层次的教学案例；并直接将教学课件制作成网站，将Ajax技术直接应用其中， 对整个教学起到良好的辅助作用。

在教学中多次贯彻了比较教学法。在讲jQuery时，将传统Ajax 与基于jQuery的方法对比，jQuery是一个被业界广泛使用的Javascript框架，它实现并简化了Web开发过程中常用的Ajaxt函数和DOM操作。用比较教学法为学生介绍，很直观地看出使用jQuery在代码上的优势。实现同样的功能和效果，使用jQuery可以减少一半以上的代码，这对于Ajax的使用起着事半功倍的作用[4]。

在讲解利用Ajax技术实现的新闻网站系统过程中，将使用了Ajax技术和未使用Ajax 技术的网页对比，指导学生如何将未使用Ajax 技术的网页转换成使用Ajax技术的网页，并总结这两种方法的优缺点。

3.3 采用案例教学法 提高学生的应用实践能力

Web前端开发技术课程侧重应用，课堂教学适合应用案例教学法，讲解Ajax 理论知识前先演示应用案例，让学生先看到网站采用Ajax技术后和用户交互的效果，对Ajax技术有了直观的认识。然后教师讲解案例采用的Ajax相关知识和应用Ajax技术的流程。教师针对演示案例，可以让学生模仿设计出一个新的、有一定难度的案例，在课堂上讨论如何实现新案例，提高学生的学习主动性，让学生理解相关知识和掌握应用Ajax技术的方法[5]。

给学生讲解完利用Ajax技术实现的新闻网站系统后，布置作业要求学生课后模仿新闻网站系统利用Ajax技术实现一个数据表的增删查改。作业的难点在于理解前端Ajax代码的编写方法和后端java web代码的修改，需要编写的代码量不大，要求每位学生独立完成，完成后需要在计算机上演示运行，教师根据运行效果进行评分。

3.4 网络资源助力课程教学

Web前端的技术发展和更新很快，半年的时间就会流行新的技术，同时为了突破“Ajax应用”授课和实验学时只有8学时的限制，教师应该鼓励学生利用网络资源学习Ajax知识。一方面，利用开源的moodle软件搭建网络课程平台(http://python.wicp.net/moodle/)，将教学资料、作业等发布出来，供学生在课余时间反复学习并交流。另一方面，Web前端资源比较丰富的网站有慕课网(www.imooc.com)、极客学院(www.jikexueyuan.com)、菜鸟教程(http://www.runoob.com/)。百度、阿里和腾讯三大互联网企业也非常重视Web前端技术的应用推广，这三大公司的前端开发团队在网上推出了自己的网站分享前端技术，例如：Baidu前端技术学院(http://ife.baidu.com)、阿里巴巴中文站UED(http://www.aliued.cn)、腾讯Web前端团队–Alloy Team URL(http://www.alloyteam.com/)。其中Baidu前端技术学院面向大学生提供初级、中级、高级的一系列前端技术课程，学院组织了一批百度在职工程师，精心编写了数十个实践编码任务，将技术知识点系统有机地串联在各个充满趣味与挑战的任务中，学生通过实际编码练习来掌握知识，再辅以互相评价、学习笔记等方式，加深对于学习内容的理解。

4 结语

授人以鱼，不如授人以渔。好的课堂教学效果并不是在课堂上填鸭式地向学生讲授知识；好的课堂教学效果应该是通过合理的教学设计，从教学内容、教学方法、实验教学等方面将理论与实践有机结合起来，提高学生的应用实践能力，让学生找到适合自己的学习方法。Web前端技术发展很快，2年左右的时间主流的技术基本上都会更换，但只要学生掌握了学习方法，就可以根据市场的需求进行知识更新，保持自己的技术优势，找到满意的工作。