老技术新外衣 如何设计一个包含Ajax技术的PHP网页

2016-01-29 14:15 8 1 收藏

老技术新外衣 如何设计一个包含Ajax技术的PHP网页,老技术新外衣 如何设计一个包含Ajax技术的PHP网页

【 tulaoshi.com - PHP 】

Ajax=Asynchronous JavaScript + XML
  * XHTML 和 CSS 的标准表示;
  * 使用 DOM(Document Object Model)进行动态显示及交互;
  * 使用 XML 和 XSLT 进行数据交换及相关操作;
  * 使用 XMLHttpRequest 进行异步数据查询、检索;
  * 使用 JavaScript 将所有的东西绑定在一起
在制作之前,大家先到这里去下载一个ZIP包。
  http://www.modernmethod.com/sajax/download.phtml
  下载后,我们要用到其中的Sajax.php那个关键的文件。制作Ajax技术的PHP网页,我们要设计3个部分的内容。

1、PHP的函数
  在下载的ZIP包中,大家应该可以看到那个乘法运算的例程。在此步骤中我们把要在PHP代码中处理的事情写在一个函数中。

PHP代码:

 function multiply($x, $y) {
return $x * $y;
}
此函数很简单,大家都看得懂吧,就是做一个乘法运算而已。

2、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;"
由此可以看出,这里有3个text,一个x,一个y,作为运算的2个数组,z为乘法的积。为了保持和第1步中函数的参数变量保持一致,我们起了同样的x和y的名字。z用来显示运算结果。然后在第4个button中我们调用了一个定义的函数do_multiply(),注意函数名与我们在第1步中的PHP函数名有些类似,区别是在其名称前面加了一个“do_”前缀。

3、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);

}
在此函数中,我们可以看到函数在获取到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

来源:http://www.tulaoshi.com/n/20160129/1492875.html

延伸阅读
标签: Web开发
作为J2EE开发人员,我们似乎经常关注“后端机制(backend mechanics)”。我们通常会忘记,J2EE的主要成功之处在Web应用程序方面;许多原因使得人们喜欢利用Web开发应用程序,但主要还是因为其易于部署的特点允许站点以尽可能低的成本拥有上百万的用户。 遗憾的是,在过去几年中,我们在后端投入了太多的时间,而在使我们的Web用户界...
标签: Web开发
  ajax技术的优势到底在哪里呢,不明白。看一个最简单的例子,假设用户注册的时候,判断用户输入的名字是否已经被占用,假设输入数字1:显示"OK"(表示正确,可以使用);输入其他字符:显示"Error" (表示错误,已经被占用)。 用ajax技术实现   代码: t.htm <script> function f(){ var req =new ActiveXObject("Micros...
标签: Web开发
AJAX无疑是2005年炒的最热的Web开发技术之一,当然,这个功劳离不开Google。我只是一个普通开发者,使用AJAX的地方不是特别多,我就简单的把我使用的心得说一下。(本文假设用户已经具有JavaScript、HTML、CSS等基本的Web开发能力) [AJAX介绍] Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。Web页面不用打断交互流程进行重新...
  ajax技术的优势到底在哪里呢,不明白。看一个最简单的例子,假设用户注册的时候,判断用户输入的名字是否已经被占用,假设输入数字1:显示"OK"(表示正确,可以使用);输入其他字符:显示"Error" (表示错误,已经被占用)。 用ajax技术实现 代码: t.htm <script> function f(){ var&n...
我想很多同学也慢慢接触到CSS3这们技术,比如简单的圆角、下阴影使用,然而这些是不够的,我们需要学习一些使用CSS来实现的交互,让网页更有动感,这也是未来的设计趋势,手机网站、APP也是如此,把交互设计重视起来。 今天我们摘选32个使用CSS3技术的网页设计,从这些作品中我们可以学习别人是如何运用CSS3并配合自己的iDea来实现很多漂亮的...

经验教程

290

收藏

8
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部