PHP動態(tài)網(wǎng)站開發(fā)項目教程課件 任務6 會員管理系統(tǒng)項目優(yōu)化

PHP動態(tài)網(wǎng)站開發(fā)項目教程任務6會員管理系統(tǒng)項目優(yōu)化子任務6.1優(yōu)化跳轉目標頁面6.1.1文件跳轉時添加來源參數(shù)6.1.2讀取來源參數(shù)，并跳轉至目標頁面

子任務6.2注冊時使用AJAX驗證用戶名是否有效6.2.1理解異步（1）同步：瀏覽器端提交請求→服務器處理→處理完畢返回。其間瀏覽器端不能干任何事。（2）異步：瀏覽器端的請求通過事件觸發(fā)→服務器處理（這時瀏覽器端仍然可以做其他事情）→處理完畢，通過回調(diào)等方式完成結果處理。

AJAX就是一種典型的異步請求技術。AJAX（AsynchronousJavaScriptAndXML）翻譯成中文就是“異步JavaScript和XML”技術，即使用JavaScript語言與服務器進行異步交互，傳輸?shù)臄?shù)據(jù)為XML（當然，傳輸?shù)臄?shù)據(jù)不只是XML，現(xiàn)在更多使用的是JSON數(shù)據(jù)）。

AJAX不是一種新的編程語言，而是一種使用現(xiàn)有標準的新方法。

AJAX最大的優(yōu)點是在不重新加載整個頁面的情況下，可以與服務器交換數(shù)據(jù)并更新部分網(wǎng)頁內(nèi)容（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）。6.2.2初識jQuery

在Web頁面中，使用AJAX的一個比較方便的方法是使用jQuery中封裝好的AJAX操作。

jQuery是一個快速、簡潔的JavaScript框架，于2006年1月由約翰·雷西格（JohnResig）發(fā)布。jQuery設計的宗旨是“WriteLess,DoMore”，即倡導寫更少的代碼，做更多的事情。它封裝了JavaScript中常用的一些功能代碼，提供了一種簡便的JavaScript設計模式，優(yōu)化了HTML文檔操作、事件處理、動畫設計和AJAX交互。

jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的CSS選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery可兼容各種主流瀏覽器。

jQuery是一種非常優(yōu)秀的前端框架，在網(wǎng)絡上可以找到很多的使用教程。jQuery自2006年誕生以來，一共發(fā)行了1.x、2.x、3.x這3個大版本。而在這3個大版本下又細分了許多小版本。這3個大版本的簡單區(qū)別如下。1．IE的支持情況比較（1）情況分析1.x版本：支持IE6、IE7、IE8。2.x、3.x版本：只支持IE9及以上的版本。（2）選擇建議

如果需要兼容IE6、IE7、IE8，則只能選擇1.x版本。

如果不需要兼容IE6、IE7、IE8，則可以選擇2.x、3.x版本。因為1.x版本中有大部分代碼是針對“舊”瀏覽器做的兼容，所以增加了運行的負擔，影響了運行效率。2．插件的支持情況比較（1）情況分析

jQuery的版本都是不向后兼容的，導致基于jQuery開發(fā)的插件會有兼容性問題。也就是說，當新版本的jQuery推出后，原有的插件可能無法正常使用，需要插件作者重新開發(fā)新版本。（2）選擇建議

為了保證與各種插件有更好的兼容性，可以選擇1.x版本。3．新特性比較（1）2.x版本相較于1.x版本沒有增加什么新特性，主要是去除了對IE6、IE7、IE8的支持，從而提升了性能，減小了體積。（2）3.x版本相較于之前的版本，增加了許多新特性，也改變了一些以往的特性，具體內(nèi)容可以查閱網(wǎng)絡上的相關資料。6.2.3引入jQuery庫文件

6.2.4在表單中添加事件

6.2.5實現(xiàn)方法checkUsername()

6.2.6使用jQuery中封裝的AJAX

6.2.7制作AJAX后端文件

由于系統(tǒng)中已經(jīng)有一個用戶名是admin的用戶了，如果輸入這個用戶名來注冊，則當鼠標光標離開用戶名控件時，在用戶名控件后面顯示綠色的“此用戶名不可用”的提示信息，如圖6.2.1所示。

在用戶名控件中輸入admin1，確保是一個新的未被使用過的用戶名，當再次失去焦點時，會在用戶名控件后面顯示黑色的“此用戶名可用”的提示，如圖6.2.2所示。圖6.2.1

用戶名不可用的效果圖

圖6.2.2

用戶名可用的效果圖6.2.8在Chrome瀏覽器中調(diào)試網(wǎng)絡通信

（1）按“F12”鍵，可以打開或關閉瀏覽器“開發(fā)者工具”。在開發(fā)者工具中單擊上面“網(wǎng)絡”選項卡，然后把鼠標光標移至用戶名文本框中，再單擊其他地方讓用戶名控件失去焦點，此時，可以清楚地看到在“網(wǎng)絡”面板中出現(xiàn)一條網(wǎng)絡請求，如圖6.2.3所示。在名稱一欄將顯示具體請求的目標網(wǎng)址，并顯示狀態(tài)、類型等。這個狀態(tài)默認是請求成功后返回的200。如果請求的文件不存在，則返回404。具體的HTTP狀態(tài)碼有很多，大家可以查詢相關資料進一步了解。圖6.2.3

在開發(fā)者工具中查看網(wǎng)絡請求（2）在查看網(wǎng)絡請求時，默認會顯示請求圖片、JavaScript文件、CSS文件等所有的網(wǎng)絡請求，而我們在使用AJAX時，只關心異步請求后端接口文件的情況，因此，我們可以單擊“過濾”選項中的“Fetch/XHR”進行網(wǎng)絡請求的過濾顯示。（3）在網(wǎng)絡請求面板中單擊“checkUsername.php”文件，在右邊會顯示這一次網(wǎng)絡請求的詳情，圖6.2.4中顯示的是“預覽”選項卡中的內(nèi)容，其中會顯示后端文件返回的結果。可以看到，這里返回的是一個JSON對象，其中包括code和msg兩個屬性。圖6.2.4

查看網(wǎng)絡請求詳情（4）單擊“標頭”選項卡，可以查看這一次網(wǎng)絡請求的響應標志頭、請求標志頭等詳情，當訪問后端文件出現(xiàn)問題時，這個選項卡中的內(nèi)容可以幫助我們查詢請求的各種標志頭等信息，有利于判斷問題之所在。在“載荷”選項卡中可以看到前端傳遞給后端的具體參數(shù)。子任務6.3beforeSend的使用

使用AJAX方式的優(yōu)勢很明顯，即在頁面不刷新的情況下，可以直接更新頁面內(nèi)容，使得用戶體驗更好。但由于不是同步操作，所以如果網(wǎng)絡較慢等情況導致更新延遲，用戶體驗就會大打折扣。為了解決這個問題，AJAX提供了一個beforeSend回調(diào)函數(shù)，在發(fā)起請求時，可以在頁面中顯示加載中（loading）圖標，給用戶明確的提示，這樣用戶體驗會更好。

當用戶名文本框失去焦點時，執(zhí)行AJAX程序，向后端發(fā)起請求。這個請求發(fā)起后要后端程序執(zhí)行結束，并返回結果以后，前端頁面才會執(zhí)行相應的更新。在使用jQuery的AJAX時，可以在complete、success、error這3個回調(diào)函數(shù)中進行處理，也就是說，當后端程序執(zhí)行完畢，并將結果返回給前端后，complete回調(diào)一定會執(zhí)行。

如果執(zhí)行成功，則還會執(zhí)行success回調(diào)，如果執(zhí)行失敗，則執(zhí)行error回調(diào)。在發(fā)起請求之前，執(zhí)行beforeSend回調(diào)。因此，可以在beforeSend中顯示一個加載中圖標，在complete、success、error中隱藏加載中圖標。子任務6.4登錄時使用AJAX判斷用戶名是否有效6.4.1修改login.php文件6.4.2顯示異步登錄的效果

完成相關代碼后，小王同學測試了最終的結果。圖6.4.1所示是輸入正常的用戶名后，異步查詢顯示“√”的結果。

圖6.4.2所示是輸入不存在的用戶名后，異步查詢顯示“×”的結果。

圖6.4.1

輸入用戶名正確

圖6.4.2

輸入用戶名錯誤子任務6.5驗證碼的使用【知識儲備】1．驗證碼簡介

什么是驗證碼？驗證碼CAPTCHA是“CompletelyAutomatedPublicTuringtesttotellComputersandHumansApart”（全自動區(qū)分計算機和人類的圖靈測試）的縮寫，是一種區(qū)分用戶是計算機還是人的公共全自動程序。驗證碼這個詞最早于2002年由美國卡內(nèi)基梅隆大學的路易斯·馮·安（LuisvonAhn）等人提出。

卡內(nèi)基梅隆大學曾試圖申請此詞為注冊商標，但該申請于2008年4月21日被拒絕。一種常用的CAPTCHA是讓用戶輸入一張扭曲變形的圖片上顯示的文字或數(shù)字，使圖片扭曲變形是為了避免被光學字符識別（OpticalCharacterRecognition，OCR）之類的計算機程序自動辨識出圖片上的文字、數(shù)字而失去效果。由于這個測試是由計算機來考驗人類，而不是像標準圖靈測試中那樣由人類來考驗計算機，所以人們有時稱CAPTCHA是一種反向圖靈測試。2．驗證碼的類型

常見的驗證碼類型有圖像類型、語音類型、視頻類型、短信類型等。圖6.5.1所示為一個典型的圖像類型的驗證碼。圖6.5.1

圖像類型的驗證碼3．驗證碼的作用（1）防止惡意破解密碼。例如，一些黑客為了獲取用戶信息，通過不同的手段向服務器發(fā)送數(shù)據(jù)，猜測用戶的信息。（2）防止惡意刷票、論壇“灌水”。以論壇為例，可能會存在某些用戶連續(xù)不停地發(fā)布一些無意義的帖子。使用驗證碼可以降低用戶發(fā)布的頻率，同時可以避免使用機器人發(fā)帖。結合程序其他功能的限制，可以防止惡意刷票和論壇“灌水”。（3）防止惡意請求。例如，用戶提交一個表單信息，通過不斷向后臺請求數(shù)據(jù)信息造成服務器資源浪費，以及惡意攻擊。（4）提高趣味性。如果能在網(wǎng)站中設計一些有趣的驗證碼方式，則也能在一定程度上提高用戶對網(wǎng)站的喜愛程度。（5）獲取用戶信息。這一點在目前的網(wǎng)站中已經(jīng)屢見不鮮了。例如，我們注冊一個網(wǎng)站的賬號，需要通過手機驗證碼才可以注冊成功。6.5.1安裝GD庫

要在PHP中使用驗證碼，必須先保證PHP的GD擴展庫（簡稱GD庫）已經(jīng)打開。GD庫（也可以稱為GD2函數(shù)庫）是一個開源的用于創(chuàng)建圖像的函數(shù)庫，該函數(shù)庫由C語言編寫，可以在Perl、PHP等多種語言中使用。GD庫提供了一系列用來處理圖片的API，使用GD庫可以處理圖片、生成圖片，也可以給圖片加水印等。

安裝PHP以后，默認已經(jīng)包含很多的擴展。通過安裝擴展可以實現(xiàn)更多的功能。

以小皮面板為例，安裝好小皮面板以后，在“D:\phpstudy_pro\

Extensions\php\php7.3.4nts\ext”目錄下存放了PHP的各種擴展文件，如圖6.5.2所示。要安裝新的擴展，只需要將擴展文件（DLL文件）復制到這個目錄中，然后在php.ini文件中添加即可。要開啟或關閉小皮面板自帶的擴展，打開小皮面板的“網(wǎng)站”面板，然后在具體的某一個網(wǎng)站上單擊“管理”→“php擴展”命令，再選擇某個擴展進行管理即可，如圖6.5.3所示。

圖6.5.3中的“gd2”就是PHP的GD庫，對應的文件是php_gd2.

dll。此時，如果打開小皮面板的“設置”→“配置文件”→“php.ini”，然后在其中搜索“gd2”，就可以看到“extension=gd2”，這表示已經(jīng)開啟了GD庫。要關閉某個擴展，只需要在這一行前面添加一個分號（表示注釋）即可，如圖6.5.4所示。圖6.5.2

PHP擴展圖6.5.3

在小皮面板的網(wǎng)站中開啟或關閉PHP擴展圖6.5.4

PHP開啟和關閉擴展6.5.2在PHP中使用驗證碼

參數(shù)描述string必需。規(guī)定要發(fā)送的報頭字符串replace可選。指示該報頭是否替換之前的報頭，或是否添加第二個報頭。默認是

true（替換），可設為false（允許相同類型的多個報頭）http_response_code可選。把HTTP響應代碼強制設為指定的值。（PHP4.0以及更高版本可用）表6.5.1

header()函數(shù)參數(shù)詳情6.5.3判斷驗證碼是否填寫正確

人們在輸入驗證碼時，一般都不會區(qū)分大小寫，因此，為了能夠準確識別用戶輸入的驗證碼，避免大小寫的干擾，小王同學在第3行使用strtolower()函數(shù)，把Session中的驗證碼和用戶輸入的驗證碼都轉換成了小寫，再判斷兩者是否相同。意思就是，用戶在輸入驗證碼時，不用管圖片中顯示的驗證碼是大寫還是小寫，任意輸入大寫或小寫，系統(tǒng)均可正確識別。

圖6.5.5所示是小王同學最后測試的結果。圖6.5.5

圖形驗證碼【素養(yǎng)小貼士】

網(wǎng)絡安全和信息化是事關國家安全和國家發(fā)展、事關廣大人民群眾工作和生活的重大戰(zhàn)略問題。當今世界，信息技術革命日新月異，對國際政治、經(jīng)濟、文化、社會、軍事等領域的發(fā)展產(chǎn)生了深刻影響。維護網(wǎng)絡安全是