结合AJAX进行PHP开发之入门(4)

2016-01-29 13:28 8 1 收藏

结合AJAX进行PHP开发之入门(4),结合AJAX进行PHP开发之入门(4)

【 tulaoshi.com - PHP 】

将 Sajax 连接到相册

  利用刚刚创建的代码,我们将用 Sajax 迅速把相册从多页面应用程序转化成活动Ajax 应用程序。

  因为相册主要有两个函数,get_table() 和 get_image(),这也是需要用 Sajax 导出的全部函数。事实上,为了通过 Sajax 调用这些函数,这些函数本身基本上不需要修改,很快我们就会看到,我们只需要修改生成的链接即可。

  清单 9. Sajax 相册的头部

<?php
require("Sajax.php");

function get_image () { } // Defined later
function get_thumbs_table () { } // Defined later

// Standard Sajax stuff. Use Get, and export two
// main functions to javascript
$sajax_request_type = "GET";
sajax_init();
sajax_export("get_thumbs_table", "get_image");
sajax_handle_client_request();
?>
  对于本文而言,文档主体部分很简单。我们将使用 div 和 window 的 id 来显示服务器的输出。

  清单 10. 显示服务器输出的 div 和 window id

<body>
<h1>Sajax photo album</h1>
<div id="window"></div>
</body>
  最后还要编写 Javascript 回调函数。该例中,因为所有的服务器输出都直接输出到 window div 标记,所以可以重复使用简单的回调函数。将回调函数添加到 Sajax 函数调用中,就可以得到头(head)。

  清单 11. 简单的头

<head>
<title>Creating a Sajax photo album</title>
<style type="text/css">
body { text-align: center }
div#window { margin: 0 auto 0 auto; width: 700px;
padding: 10px; border: 1px solid #ccc; background: #eee; }
table.image_table { margin: 0 auto 0 auto; }
table.image_table td { padding: 5px }
table.image_table a { display: block; }
table.image_table img { display: block; width: 120px
padding: 2px; border: 1px solid #ccc; }
img.full { display: block; margin: 0 auto 0 auto;
width: 300px; border: 1px solid #000 }
</style>

<script language="javascript">
<? sajax_show_javascript(); ?>

// Outputs directly to the "window" div
function to_window(output) {
 document.getElementById("window").innerHTML = output;
}

window.onload = function() {
 x get table to window);
};

</script>
</head>
  最后一步是保证应用程序中的所有链接都是自定义的 Sajax调用。只需要取上一节中的代码并作如下替换:href="index.php?start=0&step=5" 变为onclick="x_get_table(0, 5, to_window)",href="expand.php?index=0" 变为onclick="x_get_image(0, to_window)"。

  并在相应的函数中做同样修改:get_image_link() 和 get_table_link()。这样向 Sajax 的转化就完成了(如图 6所示)。所有链接都变成了与远程 PHP 调用对应的 Javascript 调用,PHP 使用 Javascript 响应处理程序to_window() 直接输出到页面。

  整个应用程序都包含在一个页面中,还可以把其余功能(get_table()、get_image() 等)放在不能从 Web 访问的单独的库文件中。在大多数 Ajax应用程序中,每个发往服务器的请求都需要由单独的脚本处理,或至少需要编写一个非常庞大的处理程序脚本来重定向请求。将所有这些文件都集中到一起可能非常麻烦。使用 Sajax 永远只需要一个文件,在该文件中只需定义我们使用的函数即可。Sajax 代替了处理程序脚本。


  可以看到 URL 仍然保持不变,并带来了更多愉快的用户体验。window div 显示在一个灰色的框中,通过 Sajax生成的内容非常清楚。脚本不一定要知道自身或者它在服务器上的位置,因为所有的链接最终都成为直接对页面自身的 Javascript调用。因此我们的代码能够很好的模块化。我们只需要保持 Javascript 和 PHP函数在同一个页面上即可,即使页面位置发生了变化也没有关系。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/php/)

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

延伸阅读
标签: PHP
编写类 我们来看看历史堆栈中需要存储的数据或属性。前面已经讨论了堆栈(数组)和指针。stack_limit 属性可以防止因为数据过多而造成的 cookie 溢出(参见清单 1)。在实践中,我们希望在删除最老的记录之前能够存储 40-50 个事件。出于测试的目的,我们将该值设置为 15。 清单 1. 历史堆栈的构造,包括类的属性 ...
标签: Web开发
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。对于Ajax,最核心的一个对象是XMLHttpRequest,所有的Ajax操作都离不开对这个对象的操作。 首先我们来了解怎么在javascript中创建这个对象: varxmlHttp=newXMLHttpRequest(); 这行简单的代码在 Mozilla、Fire...
标签: PHP
 【PHPChina讯】 javascript :tagshow(event, 'HTML');" href="javascript:;" target=_self> HTML 部分: <html <head <scrīpt language="javascrīpt" function postRequest(strURL){ var xmlHttp; if(window.XMLHttpRequest){ // For Mozilla, Safari, ... var xmlHttp = new XMLHttpRequest(); } els...
标签: Web开发
请在文本框输入文字php的ajax框架xajax入门与试用 一、xajax与其它ajax框架的比较 xajax功能很简单,但很灵活!~它不象其它一些大的框架,功能确实强大,但执行速度不敢恭维。。功能虽多,但不够灵活。api多,学起来简直如同学习一门新的语言。 二、xajax功能介绍 xajax的功能比较简单,但就因为简单,所以灵活。同时,这...
标签: Web开发
AJAX无疑是2005年炒的最热的Web开发技术之一,当然,这个功劳离不开Google。我只是一个普通开发者,使用AJAX的地方不是特别多,我就简单的把我使用的心得说一下。(本文假设用户已经具有JavaScript、HTML、CSS等基本的Web开发能力) [AJAX介绍] Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。Web页面不用打断交互流程进行重新...

经验教程

339

收藏

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