PHP动态网站开发项目教程课件 任务6 会员管理系统项目优化

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

图形验证码【素养小贴士】

网络安全和信息化是事关国家安全和国家发展、事关广大人民群众工作和生活的重大战略问题。当今世界，信息技术革命日新月异，对国际政治、经济、文化、社会、军事等领域的发展产生了深刻影响。维护网络安全是