繁體中文当前位置: 首页 > 图文教程 > 网络编程 > PHP > 老技术新外衣 如何设计一个包含Ajax技术的PHP网页
- PHP
- php面向对象全攻略 （十五） 多态的应用
- php面向对象全攻略 （十六） 对象的串行化
- php面向对象全攻略 （十七） 自动加载类
- PHP parse_url 一个好用的函数
- PHP 字符串分割和比较
- 全世界最小的php网页木马一枚 附PHP木马的防范方法
- PHP 日期加减的类，很不错
- PHP 日期时间函数的高级应用技巧
- PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
- Ha0k 0.3 PHP 网页木马修改版
- PHP iconv 函数转gb2312的bug解决方法
- 关于页面优化和伪静态
- 使用zend studio for eclipse不能激活代码提示功能的解决办法
- PHP 身份验证方面的函数
- 基于OpenCV的PHP图像人脸识别技术
- 用mysql触发器自动更新memcache的实现代码
- php 数学运算验证码实现代码
- PHP网站开发方案实例
- PHP教程:挖掘细节提升网站性能
- 搜索引擎技术核心揭密(PHP)
老技术新外衣 如何设计一个包含Ajax技术的PHP网页
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-03 浏览: 92 ::
收藏到网摘: n/a
* XHTML 和 CSS 的标准表示；
* 使用 DOM（Document Object Model）进行动态显示及交互；
* 使用 XML 和 XSLT 进行数据交换及相关操作；
* 使用 XMLHttpRequest 进行异步数据查询、检索；
* 使用 JavaScript 将所有的东西绑定在一起
在制作之前，大家先到这里去下载一个ZIP包。
http://www.modernmethod.com/sajax/download.phtml
下载后，我们要用到其中的Sajax.php那个关键的文件。制作Ajax技术的PHP网页，我们要设计3个部分的内容。
１、PHP的函数
在下载的ZIP包中，大家应该可以看到那个乘法运算的例程。在此步骤中我们把要在PHP代码中处理的事情写在一个函数中。
PHP代码:
function multiply($x, $y) {
return $x * $y;
}
return $x * $y;
}
此函数很简单，大家都看得懂吧，就是做一个乘法运算而已。
２、HTML的Input
作为一个乘法运算，自然而然的要在页面中显示几个Input，让用户输入数字。因此，我们写出如下代码。
代码:
<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 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;">
由此可以看出，这里有３个text，一个x，一个y，作为运算的２个数组，z为乘法的积。为了保持和第１步中函数的参数变量保持一致，我们起了同样的x和y的名字。z用来显示运算结果。然后在第４个button中我们调用了一个定义的函数do_multiply()，注意函数名与我们在第１步中的PHP函数名有些类似，区别是在其名称前面加了一个“do_”前缀。
３、Javascript的函数
为了让第二步中Input输入的结果提交给第一步中的那个PHP函数，我们要写如下的Javascript代码，也就是第二步中出现的函数do_multiply()。
代码:
function do_multiply() {var x, y;
x = document.getElementById("x").value;//获取X的值
y = document.getElementById("y").value;//获取Y的值
x_multiply(x, y, do_multiply_cb);
}
x = document.getElementById("x").value;//获取X的值
y = document.getElementById("y").value;//获取Y的值
x_multiply(x, y, do_multiply_cb);
}
在此函数中，我们可以看到函数在获取到Input输入的结果后执行了一个x_multiply()函数。此函数的参数应该和第一步中我们定义的PHP函数的参数保持一致，最后附加的do_multiply_cb为Ajax在调用了PHP的函数后要执行的Javascript函数，我们定义此函数名为do_multiply_cb，并对此函数作如下的定义。
function do_multiply_cb(z) {document.getElementById("z").value = z;
}
}
此函数有一个参数，返回值直接放入Z中，用以显示返回的结果。
至此，Ajax设计网页的三个关键步骤制作完毕，然后，我们用搭积木的方式把他们拼接在一起，就大功告成了！
<?
require("Sajax.php");
[步骤1的PHP函数]
sajax_init();
sajax_export("multiply");//声明需要用Ajax关联的函数
sajax_handle_client_request();
?>
<script>
<?
sajax_show_javascript();
?>
[步骤3的Javascript函数]
</script>
<body>
[步骤2的HTML代码]
</body>
评论 (0) All
