Ajax技術(shù)在網(wǎng)上生鮮商城的設計與應用

朱瑩芳，吳 莉

（江蘇信息職業(yè)技術(shù)學院，江蘇 無錫214000）

1 引言

鮮日達網(wǎng)上生鮮商城是一個搭建于Windows之上，以PHP為后端開發(fā)語言，以MySQL作為關(guān)系型數(shù)據(jù)庫，Apache為Web服務器的項目。作為一個建立在生鮮企業(yè)和用戶之間的電商網(wǎng)站，該商城屬于B2C類型，本質(zhì)上是一個B/S結(jié)構(gòu)的Web軟件，用戶通過該商城可以方便快速地查找所需的商品信息，并進行注冊登錄、網(wǎng)絡購物、訂單管理等操作。商城前臺功能主要包括用戶管理、生鮮商品顯示、購物管理、收藏夾管理等四部分，商城后臺功能主要包括注冊登錄、生鮮商品管理、訂單管理、公告管理等。其中，商城前臺的用戶管理模塊主要包括用戶注冊、用戶登錄、用戶信息修改、退出等功能。

2 網(wǎng)站中存在的問題

用戶注冊作為網(wǎng)站中用戶使用頻度較高的一個功能，其一般流程為：打開注冊頁面，填寫用戶名、登錄密碼、聯(lián)系電話以及驗證碼等注冊信息，單擊注冊按鈕完成用戶注冊過程。但如果用戶已經(jīng)存在，會提示該用戶名已存在；同樣，如果驗證碼輸入錯誤，會提示驗證碼輸入錯誤。此時，都需要全部重新填寫用戶注冊信息。針對此問題，如何提升用戶體驗度呢？Ajax技術(shù)可以解決這個問題。

3 Ajax技術(shù)簡介

Ajax全稱為“Asynchronous JavaScript and XML”（異步 JavaScript和 XML），是指一種結(jié)合了JavaScript和XML等編程技術(shù)，用于創(chuàng)建交互式網(wǎng)頁應用的Web開發(fā)技術(shù)。Ajax是使用客戶端腳本與Web服務器異步交換數(shù)據(jù)的Web應用開發(fā)方法。使用Ajax可以在不中斷交互流程的情況下，重新加載Web頁，從而實現(xiàn)無刷新的頁面動態(tài)更新，減少了用戶等待時間，大大提高了用戶體驗度。使用Ajax工作原理如圖1所示。

圖1 Ajax工作原理

在傳統(tǒng)Web應用中，HTML頁面直接和服務器的PHP文件進行交互；基于Ajax的Web應用中，Ajax腳本負責HTML頁面和服務器之間的通信，采用異步交互模式。Ajax并非是一項全新的技術(shù)，它由 XMLHttpRequest、Javascript、XML、DOM等技術(shù)組成，其中XMLHttpRequest是Ajax的核心對象。Ajax功能十分強大，但只有在合適的地方使用，才能發(fā)揮其優(yōu)勢，進而改善系統(tǒng)性能和用戶體驗，絕不能為了技術(shù)而濫用。根據(jù)Ajax異步交互、動態(tài)更新web頁面等特點，它的適用范圍是交互較多、頻繁讀取數(shù)據(jù)的web應用，主要應用有：數(shù)據(jù)驗證、按需取數(shù)據(jù)、自動更新頁面[1]。

3.1 XMLHttpRequest對象

由于JavaScript本身并不具有向服務器發(fā)送請求的能力，所以只能在使用window.open（）方法重新打開一個頁面、使用XMLHttpRequest對象發(fā)送請求這兩者中取其一，兩者的最顯著差異在于：前者采用同步交互模式，后者采用異步交互模式。使用XMLHttpRequest對象，Ajax可以像桌面應用程序一樣只和服務器進行數(shù)據(jù)層面的交互，而不用每次都刷新頁面，也無需每次都將數(shù)據(jù)處理的工作交給服務器來做，這樣不僅減輕了服務器的負擔，還加快了服務器的響應速度，縮短用戶等待時間，提高了用戶體驗[2]。

3.1.1 XMLHttpRequest對象的常用方法

XMLHttpRequest對象的常用方法有open（）方法、send（）方法和abort（）方法。其中Open（）方法用來打開一個新的HTTP請求，并指定請求方式（POST或GET）、URL、是否允許異步傳輸、請求用戶名、請求密碼等信息；send（）方法用于將open（）方法定義的請求發(fā)送到服務器；abort（）方法用于在客戶端接收到響應之前，取消異步請求。

3.1.2 XMLHttpRequest對象的常用屬性

XMLHttpRequest對象的常用屬性有readyState屬性、onreadyStateChange屬性、status屬性，以及responseText。其中，readyState屬性表示當前XMLHttpRequest對象的狀態(tài)，取值為0-4之間的整數(shù)，當值為4表示客戶端已接收到全部響應數(shù)據(jù)，而且已經(jīng)可以在客戶端使用。當XMLHttpRequest對象的readyState屬性發(fā)生變化時，XMLHttpRequest對象就會激發(fā)一次readyStateChange事件，同時調(diào)用onreadyStateChange屬性所指的函數(shù)。不同于readyState屬性用于表示Ajax腳本執(zhí)行的過程，status屬性用于表示服務器端執(zhí)行的過程，它返回的是服務器響應的HTTP狀態(tài)碼，其中200表示成功。XMLHttpRequest對象接收成功返回的信息有兩種處理方式，當使用其responseText屬性時，將傳回的信息作為字符串處理；當使用其responseXML屬性時，則將傳回的信息作為XML文檔使用，可以用DOM處理。

3.2 XMLHttpRequest對象與服務器的交互

XMLHttpRequest對象與服務器的交互包括三步，分別為初始化XMLHttpRequest對象、向服務器發(fā)送請求、處理服務器響應。在執(zhí)行第二步向服務器發(fā)送請求時，需要注冊回調(diào)函數(shù)、使用open方法設置和服務器端交互的基本信息、設置發(fā)送的數(shù)據(jù)并開始和服務器端交互。在執(zhí)行第三步處理服務器響應時，需要在回調(diào)函數(shù)中判斷交互是否結(jié)束，響應是否正確，并根據(jù)需要獲取服務器返回的數(shù)據(jù)，更新頁面內(nèi)容[3]。

4 基于Ajax技術(shù)的用戶注冊程序

在傳統(tǒng)的用戶注冊過程中，需要創(chuàng)建用戶注冊頁面和實現(xiàn)注冊的PHP程序頁面，其中注冊頁面負責收集用戶信息，PHP程序頁面負責接收并檢查用戶注冊信息，若無誤則將信息插入數(shù)據(jù)庫，若用戶名已注冊或驗證碼輸入錯誤則給出提示，并跳轉(zhuǎn)回注冊頁面重新輸入[4]。由于用戶名是否已注冊以及驗證碼輸入正確與否，都需在與服務器交互后方能判斷，所以必須先提交表單。而基于Ajax的用戶注冊過程則需要創(chuàng)建三個頁面，除注冊頁面和實現(xiàn)注冊的PHP程序頁面之外，增加了一個Ajax程序頁面，與之前不同的主要有以下兩點。首先，用戶填寫注冊信息后，先交給Ajax程序，Ajax程序再將信息交給PHP程序頁面，并將返回的結(jié)果顯示在注冊頁面；其次，在注冊頁面中，還需為用戶名文本框、驗證碼文本框添加onblur事件，當用戶填寫完用戶名或驗證碼，焦點離開文本框后，將觸發(fā)文本框的onblur事件，調(diào)用Ajax程序頁面。Ajax程序頁面從注冊頁面中取出用戶填寫的用戶名和驗證碼，并傳給檢查用戶名是否存在或驗證碼輸入正確與否的PHP程序頁面，最后再將PHP程序頁面返回的結(jié)果顯示到注冊頁面。一個PHP程序頁面中負責接收Ajax頁面?zhèn)鬟f過來的用戶名并查詢數(shù)據(jù)庫的用戶表中是否存在用戶名為該值的記錄，另一個負責接收Ajax頁面?zhèn)鬟f過來的驗證碼（用戶輸入的）、對比服務器端驗證碼（Session實際存儲的）并判斷用戶輸入是否正確。

4.1 Ajax實現(xiàn)無刷新檢測用戶名

4.1.1 用戶注冊頁面

在用戶注冊頁面中加入包含引用ajax.js文件的代碼，為用戶名文本框增加onblur事件，并在其后增加用于顯示用戶查詢結(jié)果的span，如下代碼所示。

4.1.2 Ajax程序頁面

Ajax程序頁面實現(xiàn)用戶注冊頁面和用戶查詢頁面的通信處理，頁面代碼主要是JS腳本，如下代碼所示。首先，接收用戶輸入的用戶名，并實例化一個XMLHttpRequest對象，然后通過調(diào)用其open（）方法打開一個HTTP連接請求，將用戶填寫的用戶名傳遞給用來判定用戶名是否存在的程序checkuname.php，再設置回調(diào)函數(shù)xmlHttp.onreadyStatechange=fun_res;目的是當該XMLHttpRequest對象的狀態(tài)發(fā)生變化時，會激發(fā)一次readyStatechange事件，同時調(diào)用onreadyStatechange屬性所指的函數(shù)fun_res（），最后調(diào)用send（）方法將之前用open（）方法定義的請求發(fā)送到服務器，并接收響應。在回調(diào)函數(shù)中，當HTTP響應已經(jīng)被完全接收，且服務器端返回的頁面沒有錯誤時，就將PHP程序頁面返回的結(jié)果顯示到注冊頁面的指定區(qū)域。

4.1.3 PHP程序頁面（checkuser.php）

PHP程序頁面是進行數(shù)據(jù)庫處理的頁面，負責接收Ajax頁面?zhèn)鬟f過來的用戶名，并查詢數(shù)據(jù)庫fresh_db中tbl_user表中是否存在該用戶名對應的記錄，并分別給出不同的字符串輸出內(nèi)容，如下代碼所示。最終，這些服務器響應結(jié)果將根據(jù)Ajax程序的指定，顯示到用戶注冊頁面的指定區(qū)域。

4.2 Ajax實現(xiàn)驗證碼無刷新驗證

4.2.1 用戶注冊頁面

在用戶注冊頁面中加入包含引用ajax2.js文件的代碼，為用戶名文本框增加onblur事件，并在其后增加用于顯示用戶查詢結(jié)果的span，如下代碼所示。

4.2.2 Ajax程序頁面

創(chuàng)建Ajax程序頁面，實現(xiàn)用戶注冊頁面和驗證碼驗證頁面的通信處理，頁面代碼中主要是JS腳本，代碼如下所示。首先，接收用戶輸入的驗證碼，并實例化一個XMLHttpRequest對象，然后通過調(diào)用其open（）方法打開一個HTTP連接請求，將用戶填寫的驗證碼傳遞給用來判定驗證碼輸入正確與否的程序checkcaptcha.php，再設置回調(diào)函數(shù)fun_res2（），最后調(diào)用send（）方法將請求發(fā)送到服務器，并接收響應。在回調(diào)函數(shù)中，當HTTP響應已經(jīng)被完全接收，同時服務器端返回的頁面沒有錯誤時，就將PHP程序頁面返回的結(jié)果顯示到注冊頁面的指定區(qū)域。

4.2.3 PHP程序頁面（checkcaptcha.php）

用來驗證碼輸入正確與否的程序checkcaptcha.php，負責接收Ajax頁面?zhèn)鬟f過來的驗證碼（用戶輸入的），將其與服務器端驗證碼（Session實際存儲的）進行比對，并根據(jù)比對結(jié)果分別給出不同的字符串輸出內(nèi)容，如下代碼所示。和checkuser.php一樣，這些服務器響應結(jié)果將根據(jù)Ajax程序的指定顯示到用戶注冊頁面驗證碼圖片后的區(qū)域。

5 結(jié)語

Ajax作為一種異步傳輸?shù)募夹g(shù)，可以實現(xiàn)在不重新加載頁面的情況下完成部分或者全部頁面內(nèi)容更新，大大提高了程序效率，減輕了服務器負擔。如今，Ajax的應用越來越廣泛，并已成為開發(fā)Web應用程序的首選。在本案例中，使用Ajax技術(shù)成功解決了商城中用戶注冊頁面中無刷新驗證用戶名和驗證碼的問題，提升了用戶體驗度。