通过PHP和Sajax使用Ajax之JavaScript

2016-01-29 11:26 5 1 收藏

通过PHP和Sajax使用Ajax之JavaScript,通过PHP和Sajax使用Ajax之JavaScript

【 tulaoshi.com - Javascript 】

 
  多年以来,创建真正具有响应性的 Web 应用程序这一目标一直被 Web 开发的一个简单事实所阻碍:要改变页面某一部分的信息,用户就必须重载整个页面。但是以后不再会这样了。感谢异步 Java? 脚本和 XML(Ajax),我们现在可以从服务器端请求新内容,只修改页面的一部分。这个教程解释了如何把 Ajax 用于 PHP ,并介绍了简单 Ajax 工具包(Sajax),这是一个用 PHP 编写的工具,可以把服务器端 PHP 与 javascript 集成。 
  开始之前
  这份教程针对的是对于开发富 Web 应用程序感兴趣的人,富 Web 应用程序把异步 JavaScript 和 XML(Ajax)与 PHP 结合起来,用户每次点击时,不必刷新整个页面,就可以动态更新内容。这份教程假设读者了解基本的 PHP 概念,包括 if 和 switch 语句以及函数的使用。
  关于本教程
  在本教程中,将学习 Ajax 以及围绕它的应用的问题。将用 PHP 构建一个 Ajax 应用程序,显示以前写的一个教程中的面板。点击面板链接只会重新载入内容区,并用选定面板的内容替换它,从而节约了带宽和页面装入的时间。然后将把简单 Ajax 工具包(Sajax)集成进 Ajax 应用程序,它可以同步 Ajax 的使用,从而简化开发。
  概述
  在深入之前,先看看 Ajax、示例 PHP 应用程序和 Sajax。 Ajax
  Ajax 允许 Web 开发人员创建交互的 Web 页面,同时避免必须等候页面载入这一瓶颈。通过 Ajax 创建的应用程序,只需点击按钮,就可以用全新的内容替换 Web 页面某一区域的内容。它的精彩之处在于不必等候页面装入,只有这一个区域的内容需要载入。以 Google Maps 为例:可以点击和四处移动地图,却不必等候页面载入。
  Ajax 的问题
  在使用 Ajax 时有些事需要注意。像其他 Web 页面一样,Ajax 页面是可以加书签的,所以在使用 GET 与 POST 进行请求时就会造成问题。国际化和编码方案数量的增加,使得把这些编码方案标准化变得日益重要。在这份教程中将了解这些重要的问题。
  示例 PHP 应用程序
  首先要用 Ajax 创建一个应用程序,然后用 Sajax 创建,以展现使用这个工具包的好处。应用程序是以前编写的教程中的一部分,带有面板链接。它被用作示例,以展示使用 Ajax 的优势。因为在各个面板上点击时,它们会异步装入,而不必等候页面剩下的部分再次装入。这个示例应用程序还会展示如何创建自己的 Ajax 应用程序。
  Sajax
  如果想创建 Ajax 应用程序,又不想受 Ajax 复杂的细节所累。答案就是 Sajax。通过使用 ModernMethod 人员开发的库,Sajax 为 Web 开发人员抽象出了 Ajax 的高层细节。在底层,Sajax 的工作与 Ajax 相同。但是,通过使用 Sajax 库提供的高层函数,可以忽略 Ajax 的技术细节。
  什么是 Ajax?
  这一节是个入门介绍,用示例解释 Ajax 的概念,包括在点击链接时发生了什么,Ajax 用于 PHP 应用程序时需要的 HTML 和 JavaScript 代码。下一节将更深入一些,实际地使用在这一节学习的 Ajax 概念创建 PHP 应用程序。
  幕后内容
  Ajax 是异步 JavaScript 和 XML 的组合。之所以说异步,是因为可以点击页面上的链接,然后它只装入与点击对应的内容,同时保持标题或其他任何设定的信息不动。 [next]
  点击链接时,在背后工作的是 JavaScript 函数。JavaScript 创建与 Web 浏览器通信的对象,并告诉浏览器装入特定页面。然后可以像平常一样浏览同一页面上的其他内容,当浏览器完全装入新页面的时候,浏览器会在 HTML 的 div 标记指定的位置显示内容。
  CSS 样式代码用来和 span 标记一起创建链接。
  CSS 样式代码
  示例应用程序需要 CSS 代码,这样 span 标记看起来就像使用常规的锚标记(<a href=... >)创建的真正链接一样,也会像真正的链接一样被点击。
  清单 1. 指定 span 标记的显示信息
...
<style type="text/css">
span:visited{ text-decoration:none; color:#293d6b; }
span:hover{ text-decoration:underline; color:#293d6b; }
span {color:#293d6b; cu

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

延伸阅读
标签: Web开发
使用javascript进行异步提交数据比直接使用现成的AJAX控件效率高很多(我只使用过ajax.net) 实验发现可以提交大容量数据——实验到40K左右 function doSubmit() { ....... var urlParameter="cfg="+urlPara1 +"&type="+vkeytype +"&starttime="+vstarttime +"&endtime="+vendtime +"&am...
标签: Web开发
ajax.html 程序代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / title兼容多浏览器的AJAX入门实例(超详细注释)/t...
标签: Web开发
AJAX无疑是2005年炒的最热的Web开发技术之一,当然,这个功劳离不开Google。我只是一个普通开发者,使用AJAX的地方不是特别多,我就简单的把我使用的心得说一下。(本文假设用户已经具有JavaScript、HTML、CSS等基本的Web开发能力) [AJAX介绍] Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。Web页面不用打断交互...
标签: PHP
添加 Sajax 现在相册提供了基本的导航功能,目录中的图像添加了索引。下面您将看到添加 Sajax 能够改进编程和用户体验。 这里假设您对 Ajax 有基本的了解,最好还熟悉 Sajax 的基础知识(请参阅 参考资料 中的 教程 )。 Sajax、Ajax 与传统 Web 应用程序 现在我们已经使用标准的 Web 开发模型开发...
标签: PHP
异步 Javas cript 和 XML(Asynchronous Javas cript andXML, Ajax )无疑是最流行的新 Web 技术 。本文中我们将完全使用 PHP 和 Simple Ajax Toolkit (Sajax)创建一个简单的相册作为在线 Web 应用程序。我们首先用标准的 PHP 开发方法编写简单的相册,然后再用 Sajax 将其变成 活动 的 Web 应用程序。 创建一...

经验教程

408

收藏

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