梁柱森

廣東石油化工學(xué)院 廣東茂名 525000

Ajax即“Asynchronous JavaScript and XML”，稱為異步JavaScript和XML，是一種利用JavaScript和XML實現(xiàn)異步數(shù)據(jù)傳輸?shù)募夹g(shù)，在Web開發(fā)中可以實現(xiàn)網(wǎng)頁的局部刷新。在網(wǎng)頁端用JavaScript語言調(diào)用XMLHttpRequest對象與后臺服務(wù)器進行數(shù)據(jù)傳輸，Ajax可以讓W(xué)eb頁面實現(xiàn)異步刷新。也就是說瀏覽器可以在不刷新整個網(wǎng)頁的情況下，對網(wǎng)頁的局部進行更新。傳統(tǒng)的Web開發(fā)(不使用 AJAX)如果需要更新網(wǎng)頁內(nèi)容，必須從服務(wù)器重載整個網(wǎng)頁面， 提高了網(wǎng)頁和用戶的交互性，增強了用戶體驗[1]。

1 Ajax在Web前端開發(fā)技術(shù)課程中的重要地位

應(yīng)用系統(tǒng)開發(fā)一般是服務(wù)端客戶端的開發(fā)模式，服務(wù)端由Java，C#等語言實現(xiàn)操作數(shù)據(jù)庫操作，客戶端負責用戶界面的展示和交互。最初的客戶端只有電腦端，后來隨著互聯(lián)網(wǎng)的發(fā)展出現(xiàn)了網(wǎng)頁端，近年又出現(xiàn)了移動端、微信小程序端等各種客戶端。

面對多種客戶端的開發(fā)需求，為了提高開發(fā)效率，系統(tǒng)開發(fā)時普遍采用前后端分離的開發(fā)方案。作為后端的服務(wù)端只有一個，前端根據(jù)需求可以有多個(安卓、iOS、計算機瀏覽器、手機瀏覽器、微信小程序、iPad)。后端只通過API接口提供數(shù)據(jù)，前端負責數(shù)據(jù)的展示。前后端之間的數(shù)據(jù)交換主要通過Ajax來實現(xiàn)，Ajax是前端和后端的橋梁[2]。

根據(jù)人才培養(yǎng)方案，第三學(xué)期學(xué)生已經(jīng)學(xué)習(xí)了Web應(yīng)用原理與開發(fā)基礎(chǔ)課程，掌握了后端開發(fā)的相關(guān)技術(shù)。Web前端開發(fā)技術(shù)課程在第四學(xué)期開設(shè)，通過學(xué)習(xí)Ajax可以復(fù)習(xí)并深化上學(xué)期所學(xué)的后端開發(fā)內(nèi)容。

2 存在的問題

Ajax雖然只是現(xiàn)有技術(shù)的組合應(yīng)用，但和最近快速發(fā)展的Web前端開發(fā)技術(shù)聯(lián)系緊密，也就意味著Ajax應(yīng)用知識點具有內(nèi)容新、范圍廣和實踐應(yīng)用性強的特點。在Ajax應(yīng)用課堂上要取得好的教學(xué)效果就需要教師熟悉教學(xué)內(nèi)容，有豐富的實踐經(jīng)驗并認真做好教學(xué)設(shè)計。對學(xué)生進行了反饋調(diào)查，發(fā)現(xiàn)存在幾點問題。

2.1 教材中關(guān)于Ajax應(yīng)用的部分內(nèi)容太少

目前市場上關(guān)于Web 前端開發(fā)的教材多如牛毛，但包含Ajax應(yīng)用內(nèi)容的教材不多，即使有Ajax應(yīng)用的內(nèi)容也只是簡單介紹Ajax技術(shù)和Ajax函數(shù)，沒有與后臺進行數(shù)據(jù)交換的應(yīng)用案例。

2.2 Ajax原理難理解

Ajax原理涉及同步和異步、XMLHttpRequest對象使用、回調(diào)函數(shù)、文本數(shù)據(jù)格式處理等知識點，Ajax應(yīng)用授課和實驗學(xué)時只有8學(xué)時，短時間內(nèi)學(xué)生很難理解這些概念。

2.3 理論與實踐脫節(jié)

Ajax 是實踐性非常強的技術(shù)，很多原理和用法必須通過應(yīng)用實踐才能消化和吸收。但實際情況是Ajax綜合應(yīng)用案例太少，學(xué)生對知識點掌握得不牢，實際開發(fā)能力差。

3 解決方案

3.1 選擇合適的教材和開發(fā)平臺

3.1.1 課程內(nèi)容設(shè)計

介紹完教材上的Ajax技術(shù)簡介和Ajax函數(shù)內(nèi)容后，為了使學(xué)生容易深刻理解Ajax技術(shù)，選擇學(xué)生熟悉的新聞網(wǎng)站系統(tǒng)作為案例講解Ajax應(yīng)用。因為在JavaScript 中直接調(diào)用XMLHttpRequest對象實現(xiàn)Ajax的功能比較煩瑣復(fù)雜，但jQuery中提供多個和 AJAX 相關(guān)的函數(shù)，通過直接調(diào)用jQuery AJAX 函數(shù)，瀏覽器可以通過HTTP的Get或 Post請求從Web服務(wù)器上讀取文本、HTML、XML或 JSON格式的數(shù)據(jù)，同時調(diào)用jQuery的DOM操作函數(shù)可以把這些讀取到的數(shù)據(jù)直接綁定網(wǎng)頁元素進行動態(tài)展示[3]。教學(xué)中的例子都采用jQuery實現(xiàn)Ajax功能，大大降低了Ajax的開發(fā)難度和復(fù)雜性。

3.1.2 后端開發(fā)平臺的選擇

考慮到學(xué)生上學(xué)期學(xué)習(xí)WEB應(yīng)用原理與開發(fā)基礎(chǔ)課程的時候所用的開發(fā)平臺是java，這次選擇的案例也以java作為后端的開發(fā)平臺，有利于學(xué)生復(fù)習(xí)java web的內(nèi)容，保持學(xué)習(xí)的延續(xù)性。為了使用Ajax 技術(shù)，后端java web的業(yè)務(wù)邏輯代碼主體不需要改動，只需要增加json數(shù)據(jù)的生成功能。

3.2 采用比較教學(xué)法進行教學(xué)設(shè)計

教師講解知識點內(nèi)容，演示案例，講解案例的難點和實現(xiàn)步驟，然后讓學(xué)生模仿案例自己設(shè)計程序并實現(xiàn)，培養(yǎng)學(xué)生的代碼分析能力和代碼編寫能力。理清思路，選擇適合相應(yīng)層次的教學(xué)案例；并直接將教學(xué)課件制作成網(wǎng)站，將Ajax技術(shù)直接應(yīng)用其中， 對整個教學(xué)起到良好的輔助作用。

在教學(xué)中多次貫徹了比較教學(xué)法。在講jQuery時，將傳統(tǒng)Ajax 與基于jQuery的方法對比，jQuery是一個被業(yè)界廣泛使用的Javascript框架，它實現(xiàn)并簡化了Web開發(fā)過程中常用的Ajaxt函數(shù)和DOM操作。用比較教學(xué)法為學(xué)生介紹，很直觀地看出使用jQuery在代碼上的優(yōu)勢。實現(xiàn)同樣的功能和效果，使用jQuery可以減少一半以上的代碼，這對于Ajax的使用起著事半功倍的作用[4]。

在講解利用Ajax技術(shù)實現(xiàn)的新聞網(wǎng)站系統(tǒng)過程中，將使用了Ajax技術(shù)和未使用Ajax 技術(shù)的網(wǎng)頁對比，指導(dǎo)學(xué)生如何將未使用Ajax 技術(shù)的網(wǎng)頁轉(zhuǎn)換成使用Ajax技術(shù)的網(wǎng)頁，并總結(jié)這兩種方法的優(yōu)缺點。

3.3 采用案例教學(xué)法 提高學(xué)生的應(yīng)用實踐能力

Web前端開發(fā)技術(shù)課程側(cè)重應(yīng)用，課堂教學(xué)適合應(yīng)用案例教學(xué)法，講解Ajax 理論知識前先演示應(yīng)用案例，讓學(xué)生先看到網(wǎng)站采用Ajax技術(shù)后和用戶交互的效果，對Ajax技術(shù)有了直觀的認識。然后教師講解案例采用的Ajax相關(guān)知識和應(yīng)用Ajax技術(shù)的流程。教師針對演示案例，可以讓學(xué)生模仿設(shè)計出一個新的、有一定難度的案例，在課堂上討論如何實現(xiàn)新案例，提高學(xué)生的學(xué)習(xí)主動性，讓學(xué)生理解相關(guān)知識和掌握應(yīng)用Ajax技術(shù)的方法[5]。

給學(xué)生講解完利用Ajax技術(shù)實現(xiàn)的新聞網(wǎng)站系統(tǒng)后，布置作業(yè)要求學(xué)生課后模仿新聞網(wǎng)站系統(tǒng)利用Ajax技術(shù)實現(xiàn)一個數(shù)據(jù)表的增刪查改。作業(yè)的難點在于理解前端Ajax代碼的編寫方法和后端java web代碼的修改，需要編寫的代碼量不大，要求每位學(xué)生獨立完成，完成后需要在計算機上演示運行，教師根據(jù)運行效果進行評分。

3.4 網(wǎng)絡(luò)資源助力課程教學(xué)

Web前端的技術(shù)發(fā)展和更新很快，半年的時間就會流行新的技術(shù)，同時為了突破“Ajax應(yīng)用”授課和實驗學(xué)時只有8學(xué)時的限制，教師應(yīng)該鼓勵學(xué)生利用網(wǎng)絡(luò)資源學(xué)習(xí)Ajax知識。一方面，利用開源的moodle軟件搭建網(wǎng)絡(luò)課程平臺(http://python.wicp.net/moodle/)，將教學(xué)資料、作業(yè)等發(fā)布出來，供學(xué)生在課余時間反復(fù)學(xué)習(xí)并交流。另一方面，Web前端資源比較豐富的網(wǎng)站有慕課網(wǎng)(www.imooc.com)、極客學(xué)院(www.jikexueyuan.com)、菜鳥教程(http://www.runoob.com/)。百度、阿里和騰訊三大互聯(lián)網(wǎng)企業(yè)也非常重視Web前端技術(shù)的應(yīng)用推廣，這三大公司的前端開發(fā)團隊在網(wǎng)上推出了自己的網(wǎng)站分享前端技術(shù)，例如：Baidu前端技術(shù)學(xué)院(http://ife.baidu.com)、阿里巴巴中文站UED(http://www.aliued.cn)、騰訊Web前端團隊–Alloy Team URL(http://www.alloyteam.com/)。其中Baidu前端技術(shù)學(xué)院面向大學(xué)生提供初級、中級、高級的一系列前端技術(shù)課程，學(xué)院組織了一批百度在職工程師，精心編寫了數(shù)十個實踐編碼任務(wù)，將技術(shù)知識點系統(tǒng)有機地串聯(lián)在各個充滿趣味與挑戰(zhàn)的任務(wù)中，學(xué)生通過實際編碼練習(xí)來掌握知識，再輔以互相評價、學(xué)習(xí)筆記等方式，加深對于學(xué)習(xí)內(nèi)容的理解。

4 結(jié)語

授人以魚，不如授人以漁。好的課堂教學(xué)效果并不是在課堂上填鴨式地向?qū)W生講授知識；好的課堂教學(xué)效果應(yīng)該是通過合理的教學(xué)設(shè)計，從教學(xué)內(nèi)容、教學(xué)方法、實驗教學(xué)等方面將理論與實踐有機結(jié)合起來，提高學(xué)生的應(yīng)用實踐能力，讓學(xué)生找到適合自己的學(xué)習(xí)方法。Web前端技術(shù)發(fā)展很快，2年左右的時間主流的技術(shù)基本上都會更換，但只要學(xué)生掌握了學(xué)習(xí)方法，就可以根據(jù)市場的需求進行知識更新，保持自己的技術(shù)優(yōu)勢，找到滿意的工作。