PHP博客-为了忘却的纪念-文章分类-xajaxhttp://www.phpweblog.net/fuyongjie/category/376.html言己及众zh-cnSat, 17 Nov 2007 05:58:39 GMTSat, 17 Nov 2007 05:58:39 GMT60xAjax初体验-验证用户注册 http://www.phpweblog.net/fuyongjie/articles/2329.htmlbesthostbesthostSat, 17 Nov 2007 02:45:00 GMThttp://www.phpweblog.net/fuyongjie/articles/2329.htmlhttp://www.phpweblog.net/fuyongjie/comments/2329.htmlhttp://www.phpweblog.net/fuyongjie/articles/2329.html#Feedback0http://www.phpweblog.net/fuyongjie/comments/commentRss/2329.htmlhttp://www.phpweblog.net/fuyongjie/services/trackbacks/2329.html

xAjax,验证用户.
check.php

<?php
require_once ("xajax/xajax_core/xajax.inc.php");
$xajax = new xajax("check.server.php");
//想要使用的函数所在的文件
$xajax->registerFunction("CheckName");
//想要使用的函数.
echo '<?xml version="1.0" encoding="UTF-8"?>'
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<?php $xajax->printJavascript('xajax/'); //这里指明xajax_js所在的那个文件夹. ?>
<script type="text/javascript">
  function submitSignup()
  {
   xajax.$('notice').innerHTML="Processing,please wait."
   xajax_CheckName(xajax.getFormValues("signupForm"));
   return false;
  }
</script>
</head>

<body>
<form id="signupForm" name="signupForm" action="javascript:void(null);" onsubmit="submitSignup();">
<div id="notice"></div>
  <input name="username" type="text" id="username" />

  <input name="password" type="text" id="password" />

  <input name="subOK" type="submit" id="subOK" value="submit" />

</form>
</body>
</html>

check.server.php
<?php
require_once ("xajax/xajax_core/xajax.inc.php");
$xajax = new xajax("check.server.php");
$xajax->registerFunction("CheckName");
function CheckName($formValues)
{
 $objResponse = new xajaxResponse();  //这个对象去google查一下吧,巨好用.或者是官方看看API手册也成.
 $username = $formValues['username'];
 if($username=="")
 {
  $notice="Please input all the required information";
  $color = "red";
 }
 else
 {
  $notice="OK";
  $color = "green";
 }
 $objResponse->assign("notice","innerHTML",$notice);
 $objResponse->assign("notice","style.color",$color);
 return $objResponse;
}
$xajax->processRequest();

?>

OK了.当然,在创建文件的时候要注意选择页面编码,选择utf-8但是不要包括unicode(BOM)签名的,否则会很容易出现xml无效的错误.


besthost 2007-11-17 10:45 发表评论
]]>xajax+smarty范例http://www.phpweblog.net/fuyongjie/articles/2328.htmlbesthostbesthostSat, 17 Nov 2007 02:26:00 GMThttp://www.phpweblog.net/fuyongjie/articles/2328.htmlhttp://www.phpweblog.net/fuyongjie/comments/2328.htmlhttp://www.phpweblog.net/fuyongjie/articles/2328.html#Feedback0http://www.phpweblog.net/fuyongjie/comments/commentRss/2328.htmlhttp://www.phpweblog.net/fuyongjie/services/trackbacks/2328.html

网上关于XAJAX的教程很少，出现最多的就是那个七步使用XAJAX的文档。不过那个东西没有提到一下东西，我就简单说一下。都是自己摸索的，有不对的地方还请指教。

一切说明都以0.25版本为基础，0.5BETA的用户请顺藤摸瓜照葫芦画瓢照猫画虎举一反三……

第一个问题，我怎么才能实现逻辑和表现分离啊？（HTML代码和程序代码分离）

要做到这个我们必然需要一个模板引擎了（当然也可以写一个超级简单的，不过再简单也叫模板引擎吧……）

目前比较火的是SMARTY吧？咱们就用SMARTY+XAJAX开说。

比如我们现在要制作一个用户信息页面，简单的左右两边的页面。左边是导航，右边是具体的内容。

HTML我简单写一个：

  1. <div id="main">
  2.   <div id="left">
  3.    <li><a href="#" mce_href="#" onClick="xajax_showDetail();"></li>
  4.    <li><a href="#" mce_href="#" onClick="xajax_showUserinfo();"></li>
  5.   </div> 
  6.   <div id="right"> 
  7.   </div> 
  8. </div>

分别表示左右两个部分。左边有两个链接，点击后右边通过AJAX取得数据并且重新填充。
现在我们构建两个模板页面，对应上面链接。

detai.htm:

  1. <div>
  2. {|$detail|}<!--这个$detail是smarty要替换的内容-->
  3. </div>

userinfo.htm:

  1. <div>
  2. {|$userinfo|}<!--这个$userinfo是smarty要替换的内容-->
  3. </div>

好了准备工作结束

开始xajax server的编写

server.php:

  1. <?php
  2.  
  3. $xajax = new xajax();
  4.  
  5. $smarty = new smarty();
  6.  
  7. function Detail()
  8.  
  9. {
  10.  
  11. $objResponse = new xajaxResponse();
  12.  
  13. $detail = "测试XAJAX";
  14.  
  15. /*********这里是重点部分***************/
  16.  
  17.  $smarty -> assign('detail',$detail);//替换模板的数据
  18.  
  19. $content = $smarty -> fetch('detail.htm');//这里是最重要的一步，smarty把动态数据替换模板，并且返回已经替换过后的模板HTML数据
  20.  
  21. /****接着我们用替换过的数据通过AJAX填充页面*****/
  22.  
  23. $objResponse -> addAssign('right','innerHTML',$content);
  24.  
  25. retuen $objResponse ;
  26.  
  27. }
  28.  
  29. $xajax -> registerFunction('detail');//注册函数
  30. $xajax -> processRequests();//接管请求
  31.  
  32. ?>

server.php编写结束，当然无视了userinfo这个东西，因为东西是一样的。

到此为止，我们实现了XAJAX和SMARTY结合实现AJAX效果的目的。

接着再说说如何实现更炫的效果

见过很多使用AJAX技术的网站在读取数据的时候都会出现一个进度条写着读取中吧？感觉很COOL是吧，XAJAX照样也能做！

其实很简单，在要出现进度条的页面上首先放上如下代码：

  1. <!--loding-->
  2. <div id="loadingContainer"><div id="loading">页面载入中，请稍候<br/><img src="src/images/common/loader.gif" mce_src="src/images/common/loader.gif" /></div></div>
  3. <!--loding end-->

这样就做出了来了一个显示等待条的方块。

接着在页面里面写上如下JS代码：

  1. <script languege="javascript/text">
  2. loadingpic = document.getElementById('loadingContainer');
  3.  
  4. loadingpic.style.display = 'none';// 初始化进度条为不可见
  5.  
  6.  /*****这两句话比较重要*****/
  7. xajax.loadingFunction = loading; // 定义XAJAX在等待请求时候调用的函数
  8. xajax.doneLoadingFunction = loadingDone; //定义XAJAX在或得请求数据以后调用的函数
  9.  
  10. function loading()
  11. {
  12.     loadingpic.style.display = 'block'; //设置请求数据的时候可见
  13. }
  14. function loadingDone()
  15. {
  16.    loadingpic.style.display = 'none'; //设置请求结束以后消失
  17. }
  18. </script>

就这么简单的几句，状态条功能就实现了。

注意，如果从请求到获得数据的时间小于400毫秒的话，XAJAX默认不调用定义的函数，这主要是为了保证良好的效果。毕竟条一闪即逝没什么意思，还不如不显示。如果非得想要让用户看见，可以在PHP里面SLEEP(1) 一下，嘿嘿。

最后一个问题，使用了XAJAX以后鼠标箭头频繁闪动怎么办？

这个问题一般出现需要频繁和后台沟通的情况下。比如我们定义每0.5秒请求一次服务器。这时候你会发现一个问题，就是鼠标箭头每隔0.5秒都会变成等待中（带个沙漏）的样子一下，闪的人心烦，并且让人产生页面一直都在刷新的可耻想法。

要解决这个问题非常的简单其实……

只要在实体化XAJAX以后加上一句话就可以了：

  1. $xajax->waitCursorOff();

这样就可以避免鼠标闪动了。

基本就是这些吧，希望大家可以有所启发。没事的时候可以多看看他的代码，会发掘出更多高级的功能~~~这里就不说了，太多了。

下面是完成后的效果演示：


初始界面


请求数据中


AJAX填充数据


besthost 2007-11-17 10:26 发表评论
]]>