PHP動態網站開發項目教程任務6會員管理系統項目優化子任務6.1優化跳轉目標頁面6.1.1文件跳轉時添加來源參數6.1.2讀取來源參數，并跳轉至目標頁面

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

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

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

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

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

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

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

jQuery是一種非常優秀的前端框架，在網絡上可以找到很多的使用教程。jQuery自2006年誕生以來，一共發行了1.x、2.x、3.x這3個大版本。而在這3個大版本下又細分了許多小版本。這3個大版本的簡單區別如下。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開發的插件會有兼容性問題。也就是說，當新版本的jQuery推出后，原有的插件可能無法正常使用，需要插件作者重新開發新版本。（2）選擇建議

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

6.2.4在表單中添加事件

6.2.5實現方法checkUsername()

6.2.6使用jQuery中封裝的AJAX

6.2.7制作AJAX后端文件

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

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

用戶名不可用的效果圖

圖6.2.2

用戶名可用的效果圖6.2.8在Chrome瀏覽器中調試網絡通信

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

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

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

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

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

如果執行成功，則還會執行success回調，如果執行失敗，則執行error回調。在發起請求之前，執行beforeSend回調。因此，可以在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”（全自動區分計算機和人類的圖靈測試）的縮寫，是一種區分用戶是計算機還是人的公共全自動程序。驗證碼這個詞最早于2002年由美國卡內基梅隆大學的路易斯·馮·安（LuisvonAhn）等人提出。

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

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

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

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

安裝PHP以后，默認已經包含很多的擴展。通過安裝擴展可以實現更多的功能。

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

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

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

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

PHP擴展圖6.5.3

在小皮面板的網站中開啟或關閉PHP擴展圖6.5.4

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

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

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

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

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

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

圖形驗證碼【素養小貼士】

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