PHP動(dòng)態(tài)網(wǎng)站開發(fā)項(xiàng)目教程課件 任務(wù)6 會(huì)員管理系統(tǒng)項(xiàng)目?jī)?yōu)化

PHP動(dòng)態(tài)網(wǎng)站開發(fā)項(xiàng)目教程任務(wù)6會(huì)員管理系統(tǒng)項(xiàng)目?jī)?yōu)化子任務(wù)6.1優(yōu)化跳轉(zhuǎn)目標(biāo)頁(yè)面6.1.1文件跳轉(zhuǎn)時(shí)添加來(lái)源參數(shù)6.1.2讀取來(lái)源參數(shù)，并跳轉(zhuǎn)至目標(biāo)頁(yè)面

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

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

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

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

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

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

jQuery的核心特性可以總結(jié)為：具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口；具有高效靈活的CSS選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展；擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。jQuery可兼容各種主流瀏覽器。

jQuery是一種非常優(yōu)秀的前端框架，在網(wǎng)絡(luò)上可以找到很多的使用教程。jQuery自2006年誕生以來(lái)，一共發(fā)行了1.x、2.x、3.x這3個(gè)大版本。而在這3個(gè)大版本下又細(xì)分了許多小版本。這3個(gè)大版本的簡(jiǎn)單區(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版本。因?yàn)?.x版本中有大部分代碼是針對(duì)“舊”瀏覽器做的兼容，所以增加了運(yùn)行的負(fù)擔(dān)，影響了運(yùn)行效率。2．插件的支持情況比較（1）情況分析

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

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

6.2.4在表單中添加事件

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

6.2.6使用jQuery中封裝的AJAX

6.2.7制作AJAX后端文件

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

在用戶名控件中輸入admin1，確保是一個(gè)新的未被使用過的用戶名，當(dāng)再次失去焦點(diǎn)時(shí)，會(huì)在用戶名控件后面顯示黑色的“此用戶名可用”的提示，如圖6.2.2所示。圖6.2.1

用戶名不可用的效果圖

圖6.2.2

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

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

在開發(fā)者工具中查看網(wǎng)絡(luò)請(qǐng)求（2）在查看網(wǎng)絡(luò)請(qǐng)求時(shí)，默認(rèn)會(huì)顯示請(qǐng)求圖片、JavaScript文件、CSS文件等所有的網(wǎng)絡(luò)請(qǐng)求，而我們?cè)谑褂肁JAX時(shí)，只關(guān)心異步請(qǐng)求后端接口文件的情況，因此，我們可以單擊“過濾”選項(xiàng)中的“Fetch/XHR”進(jìn)行網(wǎng)絡(luò)請(qǐng)求的過濾顯示。（3）在網(wǎng)絡(luò)請(qǐng)求面板中單擊“checkUsername.php”文件，在右邊會(huì)顯示這一次網(wǎng)絡(luò)請(qǐng)求的詳情，圖6.2.4中顯示的是“預(yù)覽”選項(xiàng)卡中的內(nèi)容，其中會(huì)顯示后端文件返回的結(jié)果?？梢钥吹?，這里返回的是一個(gè)JSON對(duì)象，其中包括code和msg兩個(gè)屬性。圖6.2.4

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

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

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

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

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

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

圖6.4.1

輸入用戶名正確

圖6.4.2

輸入用戶名錯(cuò)誤子任務(wù)6.5驗(yàn)證碼的使用【知識(shí)儲(chǔ)備】1．驗(yàn)證碼簡(jiǎn)介

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

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

常見的驗(yàn)證碼類型有圖像類型、語(yǔ)音類型、視頻類型、短信類型等。圖6.5.1所示為一個(gè)典型的圖像類型的驗(yàn)證碼。圖6.5.1

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

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

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

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

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

圖6.5.3中的“gd2”就是PHP的GD庫(kù)，對(duì)應(yīng)的文件是php_gd2.

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

PHP擴(kuò)展圖6.5.3

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

PHP開啟和關(guān)閉擴(kuò)展6.5.2在PHP中使用驗(yàn)證碼

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

true（替換），可設(shè)為false（允許相同類型的多個(gè)報(bào)頭）http_response_code可選。把HTTP響應(yīng)代碼強(qiáng)制設(shè)為指定的值。（PHP4.0以及更高版本可用）表6.5.1

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

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

圖6.5.5所示是小王同學(xué)最后測(cè)試的結(jié)果。圖6.5.5

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

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