Sajax实例分析一

  很早就听说了Ajax,一直感觉是很厉害的技术,前一段时间使用Sajax,才发现,原来Ajax也可以这么简单的使用啊:icon_em04:~这里就不提Ajax的技术原理了,网上有很多,直接进入正题——Sajax

  先说一下什么是SajaxSajax就是“Simple Ajax Toolkit”的简写也就是“简单Ajax工具包”。特点就是简单,还有可以支持ASP、Cold Fusion、Perl、PHP、Python、Ruby、IO、LUA 等八种语言,厉害吧,后两种我都根本没有听说过。因为我对PHP研究的最多,所以这里只介绍其中的PHP部分。例子呢就选择最简单的乘法计算example_multiply.php。

  首先先看一下example_multiply.php的实际功能:http://www.modernmethod.com/sajax/sajax-0.10/php/example_multiply.php,一个简单的计算器,功能极其简单,不用Ajax,或者不用PHP直接用Javascript也可以轻易实现,正因为足够简单,所以更有利于快速的学会到底应该如何使用Sajax。这个文件的源代码可以直接在官方取得,你可以下载下来比照着说明来看,很容易明白哦~

  好~开始,首先是这个文件的PHP部分
require("Sajax.php");
  引用Sajax的函数定义文件,这个文件会初始化几个变量,不过你现在不需要关心这些。

	function multiply($x, $y) {
return $x * $y;
}

  定义一个函数multiply,作用就是将传入函数的变量x和y进行乘法计算并返回结果的值,很简单吧。
sajax_init();
  Sajax初始化函数,看过Sajax.php的都知道,其实这个函数的内容是空的,这里写的目的就是告诉你这个页面会使用Sajax。因为Sajax并不是一个类,而是一个函数集,所以不需要建立对象,实际应用中不执行这个函数也没有关系。
// $sajax_debug_mode = 1;
  注释掉的一条变量定义,是否开启Debug模式,默认为0。如果去掉注释,那么Sajax将会开启Debug模式,在使用的时候显示Javascript运行的函数、提交参数、返回值等,可以用来帮助你解决遇到的错误,不过正常运行的时候还是不要设置比较好。
sajax_export("multiply");
  用sajax_export定义将要在Javascript输出的函数,也就是从HTML页面中可以使用的函数。将函数的名字传递给sajax_export,如果多个函数可以向sajax_export传递多个参数来实现。
sajax_handle_client_request();
  处理客户端需求函数,开始访问页面的时候不会起作用,但是当客户端将需求(运行哪个函数,参数是多少等等)传递过来的时候就由这个来处理了。

  好了,后台的PHP部分结束,下面是HTML显示部分,纯粹的HTML基础就不管了,只说和Sajax使用有关的部分
sajax_show_javascript();
  看名字就知道了,显示Sajax生成的Javascript,Ajax没有Javascript怎么实现啊?既然返回的是Javascript,那么肯定要放在script标签里面咯
  光有这个还不行,这个只是定义了可以在HTML中用Sajax,我们还要写怎么用,也是使用Javascript

	function do_multiply_cb(z) {
document.getElementById("z").value = z;
}

  do_multiply_cb这个函数就是用来处理PHP函数返回值的JS函数,参数z就是利用Sajax从PHP的函数multiply中得到的返回值,然后将ID为”z”的input对象的值value改为获得的变量z(具体请看DHTML的手册),那么如何将PHP的值传递给这个JS函数呢?接着看下面。
function do_multiply() {
// get the folder name
var x, y;
x = document.getElementById("x").value;
y = document.getElementById("y").value;
x_multiply(x, y, do_multiply_cb);
}

  do_multiply这个函数是在前台提交表单项的时候调用,处理表单
  开始分析这个函数
var x, y;
定义了两个变量x和y。
		x = document.getElementById("x").value;
y = document.getElementById("y").value;

通过document.getElementById(“HTML对象的ID值”)命令来获得命名为该ID那个HTML对象,因为ID为x和y的对象是input表单,这里直接通过.value属性来获取这两个表单的值。
x_multiply(x, y, do_multiply_cb);
  这个,我们没有定义的JS函数,就是你在前面PHP中用sajax_export定义,由sajax_show_javascript输出的函数之一,其格式就是你在sajax_export中定义的函数名前面加x_。
  x,y这两个参数是将会传递给PHP函数的变量,对应PHP中multiply函数定义中的参数$x和$y,如果PHP函数需要更多参数,那么接着往后写,如果没有参数,那么直接略过。最后一个参数就将会得到PHP函数multiply返回值的那个JS函数的名字,也就是do_multiply_cb,do_multiply_cb再做的处理前面介绍过了,注意x_这个函数名称是固定的,x_后面必须和PHP中函数的名字相同,但是do_multiply_cb这个名字是自定义的,可以随便取,不用太在意这个名字的格式。

  JS的部分完了最后是HTML的基本知识了

	<input type="text" name="x" id="x" value="2" size="3"/>
*
<input type="text" name="y" id="y" value="3" size="3"/>
=
<input type="text" name="z" id="z" value="" size="3"/>
<input type="button" name="check" value="Calculate"
onclick="do_multiply(); return false;"/>

  三个input单行数据表单,ID分别是x,y,z。一个按键表单,点击的话执行JS函数do_multiply。

  好了全部解释完,很简单吧,将Sajax函数定义的PHP函数,在HTML页面中用x_函数名这样的JS命令来运行,先写要传递的参数,再写得到返回值的JS函数名,然后在得到返回值的函数中通过DHTML处理页面对象,就实现了无刷新的PHP交互功能。相信你也可以掌握这种方法~

“Sajax实例分析一”的4个回复

  1. 呵呵
    看到在用Sajax了:grin:
    如果本文能够在你的制作中起到一点作用我会感到非常高兴的,呵呵
    最后说一点,我觉得注册处理应该先检查验证码吧^^a

发表评论

电子邮件地址不会被公开。 必填项已用*标注