PHP Ajax实例 经典的入门教材


选修课: PHP 与 Ajax Ajax 应用中,网络通信流量主要集中在加载的前期,无论如何,用户登录后 需要一次性地将一个大而复杂的客户端交付给浏览器。但是在此之后,与服 务器的通信则会有效得多。整体而言,Ajax 应用的带宽消耗要比传统的 Web 应用 低一些。 ——Dave Crane,Eric Pascarello,Darren James 了解什么是 Ajax。 了解 Ajax 的工作原理。 掌握使用 Ajax 编写 PHP 程序的方法。 了解什么是 Xajax。 掌握 Xajax 的工作原理。 掌握使用 Xajax 编写 PHP 程序的方法。 在 10 11 12 13 14 15 2 PHP 开发入行真功夫 16 17 一、案例场景 经常上网的读者可能会发现,当我们想要在某个论坛进行发帖或者回帖时,系统通常会提示我们必 须成功登录以后才可以执行上述操作。而登录时如果输入了错误的用户名或密码,系统会立即给出相应 的错误提示,这就是登录验证功能。本节我们将使用 PHP 实现用户的登录验证功能。 1.用户登录程序 创建用户登录页面,编写用户登录验证业务逻辑代码。对不合法的用户登录信息进行过滤, 只有输入正确的用户名称与密码才能成功登录。 项目运行后当用户不输入用户名称就提交时,给出“用户名称不能为空”的提示;当用户不 输入密码就提交时提示“用户密码不能为空”;如果用户输入了错误的用户名称或密码,则给出 “用户名称或密码不正确!”的提示;当用户输入的用户名称为“sunyang”,密码为“123456”时 则提示“登录成功”。用户登录的页面运行结果如图 1 所示。 图 1 登录界面 2.我们现在能做的…… 我们使用 PHP 基本语法来完成用户登录功能的实现。 创建用户登录表单。 创建用户登录验证业务逻辑代码。 下面将分别介绍以上两个步骤的实现过程。 创建用户登录页面,该页面只包含用户名与密码两个文本框。页面代码如下: 【程序 13-1】光盘\codes\6\login \login.php 01 02 03 register 04 05 06
07 08 09 10 11 12 13 14 01 02 01 10 11 12 13 14 15 16 17 第 13 章 PHP与 Ajax 3 15 16 17 18 19 20
用户名称
用户密码
21
22 23 编写处理用户登录验证功能的代码。在用户登录的过程中要过滤空的用户名称、空的用户密码, 对错误的用户名称与密码进行提示。用于处理用户登录验证功能的代码如下: 【程序 13-2】光盘\codes\6\login\loginController.php 01 "; 08 echo "返回"; 09 exit; 10 } 11 if (empty($password)) { 12 echo "用户密码不能为空!
"; 13 echo "返回"; 14 exit; 15 } 16 if ($username=='sunyang'&&$password=='123456') { //判断是否登录成功 17 echo "登录成功!"; 18 }else { 19 echo "用户名称或密码错误,请重新登录!
"; 20 echo "返回"; 21 }} 22 ?> 在验证用户登录的数据的过程中,一旦发现验证错误,需要及时通过 exit 关键字结束 程序,以避免系统资源的浪费。当用户再次输入用户名称与密码后,再进行数据库数 据的验证,保证合理地使用系统资源。 用户数据的验证是在服务器端进行的,不利于提高执行程序的速度。数据的验证次数 太多,也会增加服务器的负担。将信息的部分过滤功能(比如输入信息是否为空、输 入信息的格式是否正确等)转移到客户端,当确定无误后再进行服务器端数据的验证, 可以提高程序的执行效率。 二、Ajax 简介 视频精讲:光盘\video\baseVideo\13\ Ajax 简介.swf 为了减少服务器不必要的刷新,微软的 Outlook Web Access 小组推出了 XMLHttpRequest 技术,它 02 10 11 12 13 14 15 4 PHP 开发入行真功夫 16 17 使脚本在不刷新页面的情况下直接与服务器通信。这种技术与 XHTML、CSS、DOM、XML、XSLT 及 JavaScript 有机地结合,形成了 Ajax 的概念。本节将介绍 Ajax 的基本概念与优势。 在传统的 Web 应用中,当用户输入信息并提交时,程序会向 Web 服务器发送一个请求,服务器接 收此请求并处理其中的表单信息,最终返回一个新的网页。这种做法并没有什么问题,但是当多个用户 同时向服务器提交数据时,服务器就会因为需要处理的业务过多而增加响应的时间,这时用户就会进入 到漫长的等待中。有时用户只是提交极少量的信息,可是 Web 服务器却会刷新很多相关的却不必要的 HTML 页面,这同样会导致响应时间过长。为了解决这个问题,微软的 Outlook Web Access 小组推出了 XMLHttpRequest 技术,XMLHttpRequest 技术不仅融合了 XHTML、CSS、DOM、XML、XSLT 技术, 此外还与 JavaScript 有机地结合,使得它可以使脚本在不刷新页面的情况下直接与服务器通信,因此形 成了 Ajax。 Ajax 的全称为“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),是一种结合了 XML 及 JavaScript 等编程技术,用于创建交互式网页应用的 Web 开发技术。 使用 Ajax 可以仅向服务器发送并取回必需的数据,它使用 SOAP 或其他基于 XML 的 Web Service 接口,在客户端则采用 JavaScript 处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量 减少,应用的响应速度也变得更快。同时,大量的处理工作可以在客户端完成,所以 Web 服务器的处 理时间也就相应地减少了,从而使得服务器可以处理更多有意义的工作,提高了系统的使用效率。 纵观 Ajax 技术,它的优点主要体现在如下几个方面。 通过异步的方式提升用户体验:Ajax 可以在不更新整个页面的前提下维护数据,这种做法可 以使 Web 应用程序更加快速地回应用户动作。 减少不必要的数据往返,减少带宽占用:Ajax 应用仅向服务器发送并取回必要的数据,避免 了在网络上传递那些没有改变的信息。 将一些本来由服务器承担的工作交给了客户端,从而减少了服务器的负载。 Ajax 不需要任何浏览器插件,基本上当今所有的 Web 浏览器都支持 Ajax 效果。 三、Ajax 基础 视频精讲:光盘\video\baseVideo\13\ Ajax 基础.swf Ajax 能够异步地与服务器进行通信,离不开 XMLHttpRequest 与 DOM。本节将具体介绍 Ajax 的工 作原理及实现过程。 1.Ajax 的工作原理 当用户在浏览网页的过程中需要请求网页中 的部分资源时,客户端通过 Ajax 引擎与服务器进 行连接并发送请求。服务器接收 Ajax 引擎发送的 请求后,调用应用程序与数据库进行交互并取得 数据处理结果,然后将处理结果回应客户端的请 求。客户端的 Ajax 引擎获得了服务器的响应数据 显示到页面中,此时用户就可以浏览到刚刚发送请求而刷新的数据。在整个过程中只有页面很少的内容 进行了刷新,而大部分的静态页面内容并没有得到刷新,由于服务器只需要刷新很少的内容,所以客户 10 11 12 13 14 15 16 17 第 13 章 PHP与 Ajax 5 端在浏览网页的过程中就可以得到很快的响应速度。Ajax 的工作原理如图 2 所示。 2.XMLHttpRequest XMLHttpRequest 是由微软开发的可以在不刷新页面的情况下直接进行脚本与服务器通信的技术。 XMLHttpRequest 完成了 Ajax 的主要功能,即异步向服务器进行数据传输,没有了它 Ajax 技术就 没有存在的意义。XMLHttpRequest 同样得到了大多数浏览器的支持。 XMLHttpRequest 对象按照执行脚本浏览器的不同分为以下两种创建方式: 01 var request=new ActiveXObject(Microsoft.XMLHTTP); //第 1 种创建方式 02 var request=new XMLHttpRequest (); //第 2 种创建方式 其中,第 1 种方式是使用 ActiveXObject 创建 XMLHttpRequest 对象,这种方法适用于 IE 5 及其以 上版本的浏览器,第 2 种方法是使用 XMLHttpRequest 创建,这种方法适用于非 IE 浏览器。 3.DOM DOM(Document Object Model)是文档对象模型的英文缩写,是 W3C 制定的一套规范。DOM 规 范指定了很多的内容,其中规范的文件就相当广泛,包括 XML 文件及 HTML 文件等。各种平台、浏 览器及语言都可以使用 DOM。各种编程语言都可以根据 DOM 的规范来实现其提供的接口,以此来完 成相关的功能。 1998 年 8 月,W3C 通过了 DOM 的第 1 个版本(Level 1)。Level1 支持 XML 1.0 和 HTML,每 个 HTML 元素都被表示成一个接口。这些接口中包含了负责添加、编辑、移动、读取节点等功能的多 个方法。遗憾的是,这些接口没有提供对 XML 名称空间(XMLNamespaces)的支持。 2000 年 3 月,W3C 公布了第 2 个版本(Level 2),该版本包括了更广泛的 W3C 推荐技术,例 如层叠样式表(CSS)和 XMLNamespaces 等,允许开发人员检测和使用可能适用于某个节点的命名 空间信息。此外,Level 2 版本还支持 W3C 的“事件”,例如文件能对诸如鼠标移动之类的“事件” 做出响应。 总而言之,DOM 是一种与浏览器平台语言无关的、可以使用户访问页面的其他标准的组件。它解 决了 JavaScript 和 Jscript 之间的冲突,给 Web 开发者一个标准方法,使之可以访问他们站点中的数据、 脚本和表现层对象。 在 Ajax 中 DOM 用于在不刷新页面的情况下对已载入页面进行动态更新,实现数据的 动态显示和交互。 4.体验 Ajax 本节以一个简单的 Hello World 案例讲述如何在 PHP 中使用 Ajax。这个案例首先给用户呈现一个由 文本框和按钮组成的页面,如图 3 所示。 如果用户在页面文本框中输出“Sunyang”并单击【hello】按钮则会在按钮下方显示信息:“hello sunyang”,如图 4 所示。 10 11 12 13 14 15 6 PHP 开发入行真功夫 16 17 图 3 Hello World 初始页面图 图 4 Hello World 结果页面 我们可以按照如下几个步骤进行操作。 初始化 XMLHttpRequest。 使用 JavaScript 对 XMLHttpRequest 进行初始化操作,首先需要判断当前用户的浏览器是否为 IE 浏 览器,从而得知使用哪个方法进行初始化操作。请看下面初始化 XMLHttpRequest 的代码片段: 01 function createXMLHttp(){ //创建 XMLHttpRequest 的函数 02 var request; 03 var browser=navigator.appName; //得到当前浏览器 04 if(browser=="Microsoft Internet Explorer"){ //如果是 IE 浏览器 05 request=new ActiveXObject("Microsoft.XMLHttp"); 06 return request; 07 }else{ //非 IE 浏览器 08 request=new XMLHttpRequest(); 09 return request; 10 } 11 } 12 var xhr=createXMLHttp(); //定义 XMLHttpRequest 变量 其中的 createXMLHttp()函数将 XMLHttpRequest 实例返回,然后在函数外部使用该返回值对变量 xhr 赋值。 页面设计。 页面中包括一个文本框及一个按钮,文本框用于让用户输入文本信息,单击按钮后会调用 JavaScript 函数对此文本信息进行处理,页面显示部分代码如下: 01 02 03 04 09 13
hello sunyang
05
06 your name: 07
08
10 11 12
14 02 01 10 11 12 13 14 15 16 17 第 13 章 PHP与 Ajax 7 返回信息的显示位置。 既然需要在不刷新整个页面的情况下显示用户需要的信息,那么我们需要在页面中指定用于接收返 回信息的位置,这个位置使用 div 标签来完成,将上面代码修改如下: 01 02 03 04 09 13 14
hello sunyang
05
06 your name: 07
08
10 11 12
15 我们在代码中添加了一个
标签,并设置其 id 属性为 hello,这样就可以在 JavaScript 中通过标 签的 id 属性来指定响应的返回位置 3。 处理异步请求的 JavaScript。 页面代码中按钮 button 标签的“onclick”属性指定了单击时调用的函数 HelloSunyang(),此函数将 请求发送到指定的路径,并设置响应结束后的回调函数,具体代码如下: 01 function HelloSunyang(){ 02 var url="hello.php?name=" + document.forms[0].name.value; // 跳转路径 03 xhr.open("GET",url,true); //跳转 04 xhr.onreadystatechange=getHello; //设置回调函数为 getHello 05 xhr.send(); //将请求发送 06 } 这段代码首先定义了请求的跳转路径,同时将页面文本框的信息作为参数传入,然后使用 XMLHttpRequest 中的 open()函数定义一个请求,使用“onreadystatechange”属性定义该请求的回调函 数,最后使用 send()函数将请求发送到服务器。 以上 3 个函数和属性的具体说明如下。 open(DOMString method, DOMString uri, boolean async[, DOMString username, DOMString password]):此函数用于初始化一个 XMLHttpRequest 请求对象,其参数“method”指定了这 个请求是使用 GET 方法还是 POST 方法,参数 uri 指定此请求的路径,参数“async”是“Boolean” 类型,用于设置这个请求是否是异步动态,参数“username”和“password”是可选参数,用 于指定用户名和口令。 onreadystatechange :“ readystate ”属性发生变化时 XMLHttpRequest 对象会激发一次 readystatechange 事件,同时调用“onreadystatechange”属性所指的函数。“readystate”属性告 知我们当前 XMLHttpRequest 的状态。 send():此函数用于将 open 函数定义的请求发送到服务器,只有在 XMLHttpRequest 处于发送 状态时才可以使用 send()函数,否则会出现异常。当 open 函数的参数“async”值为 true 时, send 函数会将这个请求立即发送,从而得到服务器端响应。 03 04 10 11 12 13 14 15 8 PHP 开发入行真功夫 16 17 由于函数 open()的参数“async”值为“true”,所以在请求发送完毕后会直接得到响应,并调用回 调函数对该响应进行处理,回调函数 getHello()的代码如下: 01 function getHello(){ 02 if(xhr.readyState==4){ //判断 XMLHttpRequest 状态 03 var helloStr = xhr.responseText; //设置变量 helloStr 的值为响应返回值 04 document.getElementById("hello").innerHTML=helloStr; 05 //将响应返回值显示在名为 hello 的 div 标签中 06 } 07 } 该函数首先使用 readyState 属性判断 XMLHttpRequest 的状态,如果这个属性的值为 4 则说明 XMLHttpRequest 处于已加载状态,并定义变量“helloStr”值为响应的文本,然后将这个文本显示在名 为“hello”的 div 标签中,上段代码中出现的属性及函数的说明如下。 readyState 属性:该属性用于得到当前 XMLHttpRequest 的状态,它有 5 个值,分别代表着不同 的状态,具体如表 1 所示。 表 1 XMLHttpRequest 状态表 取值 状态 描述 0 未初始化 已经创建 XMLHttpRequest 对象,但是还没有初始化 1 发送 代码已经调用了 XMLHttpRequest open()方法并且 XMLHttpRequest 已经准备好把一个请求发送到服务器 2 发送 已经通过 send()方法把一个请求发送到服务器端,但是还没有收到响应 3 正在接收 已经接收到响应信息,但是消息体部分还没有完全接收 4 已加载 响应已经被完全接收 responseText 属性:用于存放当前响应中包含的文本。 请求页面 hello.php。 在第 4 步中编写的函数 HelloSunyang()将请求发送到了页面 hello.php,该页面得到随请求参数一起 发送的表单数据,将其经过一些处理后显示,代码如下: 01 四、Xajax 视频精讲:光盘\video\baseVideo\13\ Xajax .swf Xajax 是一个开源的 PHP 运行库,它可以让开发者结合 HTML、CSS、JavaScript、PHP 轻而易举 地开发出功能强大的 Ajax 应用。 1.安装 Xajax 要在应用中使用 Xajax,需要添加 Xajax 的运行库。打开 IE 浏览器并在地址栏中输入 “http://www.xajaxproject.org/download.php”,下载 Xajax 的最新版本。笔者写本书时 Xajax 已经发布了 05 10 11 12 13 14 15 16 17 第 13 章 PHP与 Ajax 9 0.5 版,单击如图 5 所示的页面中的“0.5 RC 1 Full”链接开始下载。 图 5 下载 Xajax 运行库 将下载的文件解压,解压后的文件夹 xajax_core 和 xajax_js 即为 Xajax 的运行库,将其复制到工程 根目录下,即可在此工程中使用 Xajax。 2.Xajax 的工作原理 Xajax 可以使开发者异步调用 PHP 函数。其运行库封装了 JavaScript 函数,当使用 Xajax 时,其封 装的函数使用 JavaScript 和 XMLHttpRequest 对象与服务器进行异步通信,同时调用 PHP 函数。调用结 束后,PHP 函数返回的数据经由 Xajax 处理后转换为 XML 响应,并传递给相应的程序,最后由 Xajax 的 JavaScript 消息分析器解析,显示到客户端页面上。Xajax 的工作原理如图 6 所示。 PHP函数 Xajax 运行库 用户表单 接收响应的 DIV标签 页 面 解析 XML响 应并显 示到接 收响应 的DIV标 签中 返回 XML响 应 调用PHP函数 请求函数 图 6 Xajax 工作原理 3.在 PHP 程序中应用 Xajax 本节我们通过编写一个问候程序,介绍如何在 PHP 中使用 Xajax。本案例中,当用户进入页面后首 先看到了一个文本框和按钮,如图 7 所示。 10 11 12 13 14 15 10 PHP 开发入行真功夫 16 17 然后当用户在文本框中输入名称后,单击【Hello】按钮,会在页面上显示相应的文本,如图 8 所示。 图 7 Xajax 的 Hello World 初始页面 图 8 Xajax 的 Hello World 结果页面 用于完成图 8 页面功能的 Xajax 核心函数说明如下。 configure($sName,$mValue):用于指定会影响 Xajax 正常运行的函数库路径,可以用这个函数 设置 Xajax 的根源包、请求插件包、响应插件包及 JS 包。其中参数“$sName”用于指定函数 库名称,“$mValue”用于指定函数路径。 assign($sTarget,$sAttribute,$sData):用于将指定数据显示在页面中的指定元素中(多指 DIV 标 签),其中“$sTarget”参数用于指定显示数据的元素的 id 值,“$sAttribute”用于指定显示方 式,“$sData”用于指定需要显示的数据。 完成图 8 功能的页面代码如下: 01 configure('javascript URI', './include/'); //设置 xajax 的 javascript 路径 05 function helloWorld($user) { //定义 xajax 函数 06 $text = "Hello ".$user; 07 $objResponse = new xajaxResponse(); //定义 xajax 响应 08 $objResponse->assign('hello', 'innerHTML', $text); //设置响应返回位置 09 return $objResponse; //将响应返回 10 } 11 $xajax->registerFunction("helloWorld"); //对 helloWorld 函数进行注册 12 $xajax->processRequest(); //发送 xajax 请求同时得到响应 13 echo ''; 14 ?> 15 16 17 xajax hello world 18 printJavascript(); //初始化 xajax 20 ?> 21 29 30 31

32
10 11 12 13 14 15 16 17 第 13 章 PHP与 Ajax 11 33 34 35
36 37 上述代码的执行流程如图 9 所示(其中代码书写流程用实线表示,运行流程用虚线表示)。 包含Xajax函数库 定义Xajax实例化变量 设置JavaScript路径 定义Xajax函数 注册Xajax函数 发送Xajax请求, 同时返回响应 初始化Xajax 获得提交的表单数据 调用Xajax函数 输出响应信息 Xajax部分: 页面部分: 图 9 Xajax 的 Hello World 执行流程 Xajax 编写的问候程序的执行流程说明如下。 Xajax 部分:首先,包含 Xajax 函数库文件,实例化 Xajax 类的变量,设置 Xajax 的 JavaScript 路径。然后,需要编写 Xajax 函数的具体逻辑,定义 Xajax 函数的名称,并设置响应返回的位 置及返回响应的信息。最后,注册 Xajax 函数,并发送 Xajax 请求,同时返回响应信息。 页面部分:首先,编写用于输入内容的表单,然后,初始化 Xajax,定义需要调用的 Xajax 中的 JavaScript 函数,该函数可以得到页面表单中的内容,最后,调用 Xajax 函数并获得 响应的信息。 五、回到案例场景 视频精讲:光盘\video\baseVideo\13\登录验证.swf 本节将使用 Xajax 类库编写 PHP 代码,实现登录验证功能。 1.基本思路 本节通过使用 Xajax 完成登录验证的案例来学习 Xajax 的实际应用。 编写用户登录验证表单页面。 编写用户登录验证业务逻辑代码。 下面将分别介绍以上步骤。 首先创建一个用于输入用户名称与密码的页面。该页面中只有两个 文本框与一个“提交”按钮。创建好的页面如图 10 所示。 编写业务逻辑。用户可以在如图 10 所示的页面中进行登录操作。 当用户登录时,如果用户名和密码两个文本框中有一个为空,则单 击【登录】按钮,就会给出相应的错误提示,同时“登录”按钮状态变为 不可用,按钮文本变为“请稍候”。当用户单击【确定】按钮以后,系统告 知用户登录失败,“登录”按钮将变为初始状态,如图 11 所示。 01 02 02 图 10 登录页面 10 11 12 13 14 15 12 PHP 开发入行真功夫 16 17 图 11 用户名或密码为空 如果用户在用户名和密码文本框中都输入“sunyang”字符串并单击【登录】按钮,会得到登录成 功的提示,同时“登录”按钮状态变为不可用,按钮文本变为“你好”,如图 12 所示。 如果用户在文本框内输入其他内容,则会给出提示:“用户名或密码错误,请重新登录”,如图 13 所示。 图 12 登录成功 图 13 登录失败 以上两个步骤编写的代码请参考下一节的代码演练。 2.代码演练 由于本案例使用了 Xajax 进行登录的判断,所以要将 Xajax 的运行库引入。此外,还需要引入 xajax_core 和 xajax_js 这两个运行库,在脚本文件的同级目录下建立文件夹 include,然后将两个运行库 复制到其中。 此案例中的页面表单、JavaScript、Xajax 3 个部分的调用流程如图 14 所示。 10 11 12 13 14 15 16 17 第 13 章 PHP与 Ajax 13 页面表单 接收响应的 DIV标签 页面JavaScript Xajax部分 页面显示部分 图 14 3 部分调用流程 1)页面显示部分 本案例的页面十分简单,仅包含两个文本框和一个提交按钮,三者在一个表单内,此表单发出的 action 请求由 JavaScript 处理,并且设置在提交时调用 JavaScript 函数 loginSubmit(),其后加入了用于接 收 Xajax 异步请求所返回响应的 div 标签。页面显示代码片段如下: 【程序 13-3】光盘\codes\6\xajaxlogin\ xajax_login.php 01 02
03
用户名:
04
密码:
05
06 07
08
09
10 在上面的代码中,body 标签中对 onload 属性赋值“loginForm.username.focus()”,意为当页面加载 时将焦点放在 id 值为 loginForm 的表单中的 username 文本框上。 2)页面 JavaScript 部分 上节中提到的 JavaScript 函数 loginSubmit()用于进行 Xajax 函数的调用。页面 JavaScript 的部分代 码如下: 01 上面的代码定义了 JavaScript 函数 loginSubmit(),其中将提交按钮状态设置为不可用,将其显示文 本设为“请稍候”,然后调用 Xajax 函数 xajax_checkUser()进行用户登录的验证,同时将表单内容作为 参数传入。 3)Xajax 部分 Xajax 函数 checkUser()用于对用户登录信息进行验证,验证内容及处理方式包括: 验证用户名是否为空,如果用户名为空,则给出提示。 10 11 12 13 14 15 14 PHP 开发入行真功夫 16 17 验证用户密码是否为空,如果用户密码为空,则给出提示。 验证用户登录信息是否合法,如果用户信息不合法,则给出提示(此处合法的意义为用户名和 密码皆不为空)。 如果用户登录信息合法,那么,验证用户名与密码是否匹配,匹配则给出登录成功提示,否则 给出登录失败提示。 Xajax 编写的代码的执行流程:首先将 Xajax 的函数库文件包含在脚本中,然后定义 Xajax 实例, 并设置 JavaScript 路径,同时设置其编码集。然后,定义对用户登录信息进行一系列处理的函数 checkUser(),在其中返回 Xajax 响应。最后将此函数注册,发送 Xajax 请求得到响应。Xajax 部分流程 如图 15 所示。 ? ? Xajax? ????? ??Xajax???? ??JavaScript?? ??Xajax??? ??Xajax?? ?????? ??????? ????? ???????? ???? ??Xajax?? ?????? ???????? 图 15 Xajax 处理流程 代码使用了清除函数 clear(),其语法格式如下: 01 function clear($sTarget,$sAttribute) clear()函数的作用为清除指定对象的指定元素,其参数“$sTarget”指定了一个对象,参数“$sAttribute” 指定需要被清除的元素。在 Xajax 编写的代码部分函数 clear("username","value")指的是清除 username 对象中名为 value 的元素,即将 name 属性为 username 的文本框清空。 Xajax 编写的部分代码如下: 01 configure('javascript URI', './include/'); //设置 xajax 的 javascript 路径 06 $xajax->setCharEncoding("gb2312"); //设置 xajax 编码集 07 function checkUser($userForm){ //判断用户登录的函数 08 $objResponse = new xajaxResponse(); //定义 xajax 响应 09 $ifNull=false; //定义标志变量 10 if (trim($userForm['username']) == "") { //判断用户名是否为空 11 $objResponse->alert("请输入用户名"); 12 $ifNull=true; 13 } 14 if (trim($userForm['password']) == "") { //判断用户密码是否为空 15 $objResponse->alert("请输入密码"); 16 $ifNull=true; 17 } 10 11 12 13 14 15 16 17 第 13 章 PHP与 Ajax 15 18 if ($ifNull) { 19 $objResponse->assign("submit","value","登录"); 20 $objResponse->assign("submit","disabled",false); 21 $objResponse->assign("resultDiv","innerHTML","登录失败"); 22 //显示登录按钮文本,并将其设置为可用,同时给出登录失败提示 23 }else { 24 if ((trim($userForm['username'])=="sunyang")&& 25 (trim($userForm['password'])=="sunyang")) { 26 //如果用户名为 sunyang 密码也为 sunyang 则给出登录成功提示 27 $objResponse->assign("submit","value","你好"); 28 //将按钮文本改为你好 29 $objResponse->assign("resultDiv","innerHTML","登录成功"); 30 //给出登录成功提示 31 $objResponse->clear("username","value"); 32 $objResponse->clear("password","value"); 33 } //将两个文本框清空 34 else { //否则给出登录失败提示 35 $objResponse->assign("submit","value","登录"); 36 //将按钮设为可用,并显示为登录 37 $objResponse->assign("submit","disabled",false); 38 $objResponse->assign("resultDiv","innerHTML", 39 "用户名或密码错误,请重新登录"); //给出登录失败提示 40 $objResponse->clear("password","value"); 41 //将密码文本框清空 42 } 43 } 44 return $objResponse; //返回 Xajax 响应 45 } 46 $xajax->registerFunction("checkUser"); //将 checkUser 函数注册 47 $xajax->processRequest(); //发送 xajax 请求同时得到响应 48 echo ''; 49 ?> 六、本章小结与习题 本章介绍了 PHP 与 Ajax、Xajax 的使用。首先给出了 Ajax 的简介,包括什么是 Ajax 及其优势。 然后介绍了 Ajax 的基础内容,讲解了 Ajax 的工作原理、XMLHttpRequest 与 DOM 技术,并编写体验 Ajax 的欢迎程序。接下来介绍了 Xajax 的内容,包括下载与安装 Xajax 及其工作原理,以及如何使用 Xajax 结合 PHP 编写欢迎程序。最后介绍了如何使用 Xajax 编写用户登录验证的程序,指引读者实战性 地学习 Xajax。 1.重点回顾 Ajax 全称为“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),是指一种结合了 PHP、XML 及 JavaScript 等编程技术,用于创建交互式网页应用的 Web 开发技术。 XMLHttpRequest 完成了 Ajax 的主要功能,即异步向服务器进行数据传输,没有了它 Ajax 技 术就没有存在的意义。 应用 Xajax 时需要正确添加 Xajax 的运行库。 Xajax 可以让开发者结合 HTML、CSS、JavaScript、PHP 轻而易举地开发功能强大的 Ajax 10 11 12 13 14 15 16 PHP 开发入行真功夫 16 17 应用。 Xajax 封装了 JavaScript 函数,当使用 Xajax 时,其封装的函数使用 JavaScript 和 XMLHttpRequest 对象与服务器进行异步通信,同时调用 PHP 函数。 2.课后习题 1.Ajax 的全称是______,其核心技术包括______、______、______、_______、______等。 2.简述 Ajax 的工作原理。 3.简述 Xajax 的工作原理。 4.使用 Ajax 编写一段欢迎程序。 5.使用 Xajax 编写用户名称验证的程序。 3.实训 技能实训目的: 掌握 Ajax 的使用方法。 掌握 Xajax 的使用方法。 技能实训内容: 编写一段使用 Ajax 实现的用户注册程序,要求程序首先预存储一个用户名称,如果用户填写 的用户名称与该名称相同,则立即给出错误提示。 使用 Xajax 实现上一个用户注册程序,要求可以对用户注册的名称进行验证。
还剩15页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 1 人已下载

下载pdf

pdf贡献者

Agony

贡献于2012-07-25

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf