[转]通过 PHP 和 Sajax 使用 Ajax (一)
2006-05-31 00:50
232 查看
通过 PHP 和 Sajax 使用 Ajax (一)
简单 Ajax 工具包如何把服务器端 PHP 与 JavaScript 集成Tyler Anderson , 自由作者, Stexar 公司
2006 年 05 月 11 日
多年以来,创建真正具有响应性的 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 的组合。之所以说异步,是因为可以点击页面上的链接,然后它只装入与点击对应的内容,同时保持标题或其他任何设定的信息不动。
点击链接时,在背后工作的是 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; cursor: pointer} </style> |
<a href... >)一样。现在来看看如何创建使用这个 CSS 样式代码的链接。
创建使用 span 标记的链接
在“构建 PHP 应用程序”一节中要创建的链接,将用来通过 JavaScript 与浏览器通信,告诉浏览器要去什么地方,要提取什么内容。它们不是使用锚标记的传统链接,而是使用 span 标记创建的。span 标记的观感由清单 1 的 CSS 代码决定。这里是示例:
<span onclick="loadHTML('panels-ajax.php?panel_id=0', 'content')">Managing content</span> |
onclick处理程序指定这个 span 被点击时要运行哪个脚本。还有其他几个与
onclick类似的指示符可以使用,包括
onmouseover和
ondblclick。请注意在 onclick 字段中显示的是 JavaScript 函数
loadHTML,而不是传统的
http://链接或由清单
panels-ajax.php?创建的相对链接。接下来学习
loadHTML函数。
XMLHttpRequest 对象
如果正在使用 Mozilla、Opera 或其他这类浏览器中的一个,那么可以使用内置的
XMLHttpRequest对象动态地取得内容。Microsoft 的 Internet Explorer 浏览器采用另外一个对象,稍后将会学到。它们使用的方式实际上相同,而且对它们提供支持,只是添加几行额外代码的问题。
XMLHttpRequest对象用来通过 JavaScript 检索页面内容。稍后在示例应用程序中会使用这个代码,同
ActiveXObject的
loadHTML函数一起使用。请参阅清单 2 了解用法。
清单 2. 初始化和使用 XMLHttpRequest 对象
... <style> <script type="text/javascript"> var request; var dest; function loadHTML(URL, destination){ dest = destination; if(window.XMLHttpRequest){ request = new XMLHttpRequest(); request.onreadystatechange = processStateChange; request.open("GET", URL, true); request.send(null); } } </script> ... |
destination变量指出
XMLHttpRequest对象要去装入内容的地方,由
<div id="content"></div>标记指定。然后代码会检查
XMLHttpRequest对象是否存在,如果存在,就创建一个新的。然后,事件处理程序被设置为
processStateChange函数,这个函数是对象在每次状态变化时都会调用的函数。请求剩下的部分就是用
open方法进行设置,设置传输类型为
GET,并设置对象要装入的 URL。最后调用对象的
send方法,让对象实际发挥作用。
ActiveXObject
在 Internet Explorer 中,用
ActiveXObject代替
XMLHttpRequest。它的函数与
XMLHttpRequest的函数相同,甚至函数名都是一样的,如清单 3 所示。
清单 3. 初始化和使用 ActiveXObject
... function loadHTML(URL, destination){ dest = destination; if(window.XMLHttpRequest){ ... } else if (window.ActiveXObject) { request = new ActiveXObject("Microsoft.XMLHTTP"); if (request) { request.onreadystatechange = processStateChange; request.open("GET", URL, true); request.send(); } } } </script> |
Microsoft.XMLHTTP 类型的新
ActiveXObject对象。然后,设置事件处理程序,调用对象的
open函数。然后调用对象的
send函数,这样
ActiveXObject就工作了。
processStateChange 函数
这里描述的函数叫作事件处理程序或回调函数。回调函数的目的是当对象状态发生变化时,能够处理状态变化。在具体的应用中,这个函数的目的应当是处理状态变化、检验对象是否到达预期状态、读取动态装入的内容。
processStateChange函数由
XMLHttpRequest或
ActiveXObject对象在对象状态发生变化时调用。当对象进入状态 4 时,表明页面的内容已经接收完成(请参阅清单 4)。
清单 4. 处理状态变化
... var dest; function processStateChange(){ if (request.readyState == 4){ contentDiv = document.getElementById(dest); if (request.status == 200){ response = request.responseText; contentDiv.innerHTML = response;http://httpd.apache.org/download.cgi } } } function loadHTML(URL, destination){ ... |
contentDiv,内容从文档中检索。如果请求是正确的,而且也按正确的顺序检索,那么响应的状态应当是 200。HTML 响应保存在
request.responseText中,把它设置到
contentDiv.innerHTML,就可以在浏览器中显示它。
如果在传输过程中没有发生错误,一切正常,那么新内容就会在浏览器中出现;否则,
request.status就不等于 200。请参阅清单 5 了解错误处理代码。
清单 5. 错误处理
... if (request.status == 200){ response = request.responseText; contentDiv.innerHTML = response; } else { contentDiv.innerHTML = "Error: Status "+request.status; } ... |
GET和
POST的问题和它们的差异。
GET 与 POST
GET和
POST是进行 HTTP 请求和在请求中传递变量的两种方法。开发人员不应当随意选择使用哪种方法,因为两种方法都有使用意义。
GET请求把变量嵌在 URL 中,这意味着它们是可以加书签的。如果变量可能会修改数据库、购买商品或者做其他类似操作,这种方法会有副作用。假设偶然间加了书签的页面有一个购买商品的 URL ,里面包含地址、信用卡号以及 $100 的产品,全都嵌在 URL 中,那么重新访问这个 URL 就意味着购买这件商品。
所以,只有在变量没有副作用,可以经常重新载入也不会发生什么的时候,才可以进行
GET请求。适合
GET请求的一个变量可能是分类 ID。可以反复重新载入,分类会反复显示,但是没有任何累积的效果。
在另一方面,当变量对源(例如数据库)有作用时或者为了个人信息安全,应当采用
POST请求。比如在购买一件 $100 的产品时,应当用
POST请求。如果给付款页面加了书签,由于 URL 中没有变量,所以什么也不会发生,也不会意外地购买了不想购买的东西,或者在已经拥有的情况下又买了一次。
GET和
POST的意义在 Ajax 中有同样的作用。在构建本文的应用程序和未来的应用程序时,理解
GET和
POST请求的差异是很重要的。这会有助于避免 Web 应用程序开发的常见缺陷。
编码方法
对于通过 HTTP 传输的数据进行编码,有多种方法,而 XML 只接受其中少数几种。互操作性最大的一种编码方法是 UTF-8,因为它向后兼容美国信息交换标准码(ASCII)。有许多在其他国家使用的国际字符的编码方式不向后兼容 ASCII ,如果不进行恰当的编码,就不适合放在 XML 文件中。
例如,把字符串 ”Internationalization” 放在浏览器中,用 UTF-8 编码的话,会把它变成 I%F1t%EBrn%E2ti%F4n%E0liz%E6ti%F8n。经典 ASCII 字符的 UTF-8 编码与相同字符的 7 位 ASCII 码对应,这使 UTF-8 是一个理想的编码方法选择。
了解这一点是很重要的,因为在通过 HTTP 传输和接收文档的过程中都要处理编码问题,在使用 Ajax 时也是一样。使用 Ajax 进行传输时,也应当使用 UTF-8 编码,因为标准化可以提高互操作性。
说明:
本文来自:http://www.ibm.com/developerworks/cn/views/opensource/tutorials.jsp?cv_doc_id=109065
版权归属IBM所有,本Blog只是处于转载学习更多技术目的
相关文章推荐
- [转] 通过 PHP 和 Sajax 使用 Ajax(二)
- [转] 通过 PHP 和 Sajax 使用 Ajax(三)
- [转] 通过 PHP 和 Sajax 使用 Ajax(二)
- [转] 通过 PHP 和 Sajax 使用 Ajax(三)
- 通过 PHP 和 Sajax 使用 Ajax
- [转] 通过 PHP 和 Sajax 使用 Ajax(三)
- [转]通过 PHP 和 Sajax 使用 Ajax (一)
- 通过PHP和Sajax使用Ajax之JavaScript
- SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析
- 在PHP中使用ASP.NET AJAX
- 使用PHP和AJAX制作日历
- 使用ajax,结合jquery,php实现图片上传预览功能
- php使用 ajax操作购物车
- jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
- AJAX实现页面无刷新发表评论(post请求,服务器端使用php)
- AJAX与PHP的结合使用
- 在MVC中如何在使用 MicrosoftMvcValidation验证的前提下使用 jQuery.Ajax 提交数据的时候检查验证是否通过
- PHP学习笔记(六):通过ajax实时匹配后台的数据
- 在PHP中使用ASP.NET AJAX
- <input type='file'/>选择文件,通过ajax方式传递选择的文件,后端使用controller接受