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

牟奇春主编;任务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版本相较于之前的版本，增加了许多新特性，也改变了一些以往的特性，具体内容可以查阅网络上的相关资料。

;;由于系统中已经有一个用户名是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