PHP-AJAX实例-经典的入门教材

选修课：PHP与AjaxAjax应用中，网络通信流量主要集中在加载的前期，无论如何，用户登录后需要一次性地将一个大而复杂的客户端交付给浏览器。但是在此之后，与服务器的通信则会有效得多。整体而言，Ajax应用的带宽消耗要比传统的Web应用低一些。——DaveCrane，EricPascarello，DarrenJames了解什么是Ajax。了解Ajax的工作原理。掌握使用Ajax编写PHP程序的方法。了解什么是Xajax。掌握Xajax的工作原理。掌握使用Xajax编写PHP程序的方法。在1011121314152PHP开发入行真功夫1617一、案例场景经常上网的读者可能会发现，当我们想要在某个论坛进行发帖或者回帖时，系统通常会提示我们必须成功登录以后才可以执行上述操作。而登录时如果输入了错误的用户名或密码，系统会立即给出相应的错误提示，这就是登录验证功能。本节我们将使用PHP实现用户的登录验证功能。1.用户登录程序创建用户登录页面，编写用户登录验证业务逻辑代码。对不合法的用户登录信息进行过滤，只有输入正确的用户名称与密码才能成功登录。项目运行后当用户不输入用户名称就提交时，给出“用户名称不能为空”的提示；当用户不输入密码就提交时提示“用户密码不能为空”；如果用户输入了错误的用户名称或密码，则给出“用户名称或密码不正确！”的提示；当用户输入的用户名称为“sunyang”，密码为“123456”时则提示“登录成功”。用户登录的页面运行结果如图1所示。图1登录界面2.我们现在能做的……我们使用PHP基本语法来完成用户登录功能的实现。创建用户登录表单。创建用户登录验证业务逻辑代码。下面将分别介绍以上两个步骤的实现过程。创建用户登录页面，该页面只包含用户名与密码两个文本框。页面代码如下：【程序13-1】光盘\codes\6\login\login.php01html02head03titleregister/title04/head05body06formaction=loginController.phpmethod=POST07tablealign=centerborder=108tr09tdcolspan=2align=centerimgsrc=denglu.jpg//td10/tr11tr12td用户名称/tdtdinputtype=textname=username/td13/tr14tr0102011011121314151617第13章PHP与Ajax315td用户密码/tdtdinputtype=passwordname=password/td16/tr17tralign=right18tdinputtype=submitvalue=提交/tdtdalign=leftinputtype=resetvalue=重置/td19/tr20/table21/form22/body23/html编写处理用户登录验证功能的代码。在用户登录的过程中要过滤空的用户名称、空的用户密码，对错误的用户名称与密码进行提示。用于处理用户登录验证功能的代码如下：【程序13-2】光盘\codes\6\login\loginController.php01?php02if(!empty($_POST['submit'])){//判断是否为提交03$username=$_POST['username'];04$password=$_POST['password'];05$name=$_POST['name'];06if(empty($username)){//验证表单是否为空07echo用户名称不能为空!br;08echoahref=login.php返回/a;09exit;10}11if(empty($password)){12echo用户密码不能为空！br;13echoahref=login.php返回/a;14exit;15}16if($username=='sunyang'&&$password=='123456'){//判断是否登录成功17echo登录成功！;18}else{19echo用户名称或密码错误，请重新登录！br;20echoahref=login.php返回/a;21}}22?在验证用户登录的数据的过程中，一旦发现验证错误，需要及时通过exit关键字结束程序，以避免系统资源的浪费。当用户再次输入用户名称与密码后，再进行数据库数据的验证，保证合理地使用系统资源。用户数据的验证是在服务器端进行的，不利于提高执行程序的速度。数据的验证次数太多，也会增加服务器的负担。将信息的部分过滤功能（比如输入信息是否为空、输入信息的格式是否正确等）转移到客户端，当确定无误后再进行服务器端数据的验证，可以提高程序的执行效率。二、Ajax简介视频精讲：光盘\video\baseVideo\13\Ajax简介.swf为了减少服务器不必要的刷新，微软的OutlookWebAccess小组推出了XMLHttpRequest技术，它021011121314154PHP开发入行真功夫1617使脚本在不刷新页面的情况下直接与服务器通信。这种技术与XHTML、CSS、DOM、XML、XSLT及JavaScript有机地结合，形成了Ajax的概念。本节将介绍Ajax的基本概念与优势。在传统的Web应用中，当用户输入信息并提交时，程序会向Web服务器发送一个请求，服务器接收此请求并处理其中的表单信息，最终返回一个新的网页。这种做法并没有什么问题，但是当多个用户同时向服务器提交数据时，服务器就会因为需要处理的业务过多而增加响应的时间，这时用户就会进入到漫长的等待中。有时用户只是提交极少量的信息，可是Web服务器却会刷新很多相关的却不必要的HTML页面，这同样会导致响应时间过长。为了解决这个问题，微软的OutlookWebAccess小组推出了XMLHttpRequest技术，XMLHttpRequest技术不仅融合了XHTML、CSS、DOM、XML、XSLT技术，此外还与JavaScript有机地结合，使得它可以使脚本在不刷新页面的情况下直接与服务器通信，因此形成了Ajax。Ajax的全称为“AsynchronousJavaScriptandXML”（异步JavaScript和XML），是一种结合了XML及JavaScript等编程技术，用于创建交互式网页应用的Web开发技术。使用Ajax可以仅向服务器发送并取回必需的数据，它使用SOAP或其他基于XML的WebService接口，在客户端则采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，应用的响应速度也变得更快。同时，大量的处理工作可以在客户端完成，所以Web服务器的处理时间也就相应地减少了，从而使得服务器可以处理更多有意义的工作，提高了系统的使用效率。纵观Ajax技术，它的优点主要体现在如下几个方面。通过异步的方式提升用户体验：Ajax可以在不更新整个页面的前提下维护数据，这种做法可以使Web应用程序更加快速地回应用户动作。减少不必要的数据往返，减少带宽占用：Ajax应用仅向服务器发送并取回必要的数据，避免了在网络上传递那些没有改变的信息。将一些本来由服务器承担的工作交给了客户端，从而减少了服务器的负载。Ajax不需要任何浏览器插件，基本上当今所有的Web浏览器都支持Ajax效果。三、Ajax基础视频精讲：光盘\video\baseVideo\13\Ajax基础.swfAjax能够异步地与服务器进行通信，离不开XMLHttpRequest与DOM。本节将具体介绍Ajax的工作原理及实现过程。1.Ajax的工作原理当用户在浏览网页的过程中需要请求网页中的部分资源时，客户端通过Ajax引擎与服务器进行连接并发送请求。服务器接收Ajax引擎发送的请求后，调用应用程序与数据库进行交互并取得数据处理结果，然后将处理结果回应客户端的请求。客户端的Ajax引擎获得了服务器的响应数据显示到页面中，此时用户就可以浏览到刚刚发送请求而刷新的数据。在整个过程中只有页面很少的内容进行了刷新，而大部分的静态页面内容并没有得到刷新，由于服务器只需要刷新很少的内容，所以客户1011121314151617第13章PHP与Ajax5端在浏览网页的过程中就可以得到很快的响应速度。Ajax的工作原理如图2所示。2.XMLHttpRequestXMLHttpRequest是由微软开发的可以在不刷新页面的情况下直接进行脚本与服务器通信的技术。XMLHttpRequest完成了Ajax的主要功能，即异步向服务器进行数据传输，没有了它Ajax技术就没有存在的意义。XMLHttpRequest同样得到了大多数浏览器的支持。XMLHttpRequest对象按照执行脚本浏览器的不同分为以下两种创建方式：01varrequest=newActiveXObject(Microsoft.XMLHTTP);//第1种创建方式02varrequest=newXMLHttpRequest();//第2种创建方式其中，第1种方式是使用ActiveXObject创建XMLHttpRequest对象，这种方法适用于IE5及其以上版本的浏览器，第2种方法是使用XMLHttpRequest创建，这种方法适用于非IE浏览器。3.DOMDOM（DocumentObjectModel）是文档对象模型的英文缩写，是W3C制定的一套规范。DOM规范指定了很多的内容，其中规范的文件就相当广泛，包括XML文件及HTML文件等。各种平台、浏览器及语言都可以使用DOM。各种编程语言都可以根据DOM的规范来实现其提供的接口，以此来完成相关的功能。1998年8月，W3C通过了DOM的第1个版本（Level1）。Level1支持XML1.0和HTML，每个HTML元素都被表示成一个接口。这些接口中包含了负责添加、编辑、移动、读取节点等功能的多个方法。遗憾的是，这些接口没有提供对XML名称空间（XMLNamespaces）的支持。2000年3月，W3C公布了第2个版本（Level2），该版本包括了更广泛的W3C推荐技术，例如层叠样式表（CSS）和XMLNamespaces等，允许开发人员检测和使用可能适用于某个节点的命名空间信息。此外，Level2版本还支持W3C的“事件”，例如文件能对诸如鼠标移动之类的“事件”做出响应。总而言之，DOM是一种与浏览器平台语言无关的、可以使用户访问页面的其他标准的组件。它解决了JavaScript和Jscript之间的冲突，给Web开发者一个标准方法，使之可以访问他们站点中的数据、脚本和表现层对象。在Ajax中DOM用于在不刷新页面的情况下对已载入页面进行动态更新，实现数据的动态显示和交互。4.体验Ajax本节以一个简单的HelloWorld案例讲述如何在PHP中使用Ajax。这个案例首先给用户呈现一个由文本框和按钮组成的页面，如图3所示。如果用户在页面文本框中输出“Sunyang”并单击【hello】按钮则会在按钮下方显示信息：“hellosunyang”，如图4所示。1011121314156PHP开发入行真功夫1617图3HelloWorld初始页面图图4HelloWorld结果页面我们可以按照如下几个步骤进行操作。初始化XMLHttpRequest。使用JavaScript对XMLHttpRequest进行初始化操作，首先需要判断当前用户的浏览器是否为IE浏览器，从而得知使用哪个方法进行初始化操作。请看下面初始化XMLHttpRequest的代码片段：01functioncreateXMLHttp(){//创建XMLHttpRequest的函数02varrequest;03varbrowser=navigator.appNa