多年以来，创建真正具有响应性的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页面某一区域的内容。它的精彩之处在于不必等候页面装入，只有这一个区域的内容需要载入。以GoogleMaps为例：可以点击和四处移动地图，却不必等候页面载入。

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标记看起来就像使用常规的锚标记（＜ahref=...＞）创建的真正链接一样，也会像真正的链接一样被点击。

清单1.指定span标记的显示信息

  这些span标记用在示例应用程序中，颜色符合所有IBMdeveloperWorks教程中链接使用的颜色。样式标记的第一行指定已经访问过的链接的颜色保持不变。鼠标经过时加下划线，光标变成指针，就像普通的锚标记（＜ahref...＞）一样。现在来看看如何创建使用这个CSS样式代码的链接。

创建使用span标记的链接

在“构建PHP应用程序”一节中要创建的链接，将用来通过JavaScript与浏览器通信，告诉浏览器要去什么地方，要提取什么内容。它们不是使用锚标记的传统链接，而是使用span标记创建的。span标记的观感由清单1的CSS代码决定。这里是示例：

 

  ...
＜style＞
＜scripttype="text/javascript"＞
varrequest;
vardest;

functionloadHTML(URL,destination){
　dest=destination;
　if(window.XMLHttpRequest){
request=newXMLHttpRequest();
request.onreadystatechange=processStateChange;
request.open("GET",URL,true);
request.send(null);
　}
}
＜/script＞
...

＜span＞Managingcontent＜/span＞ onclick处理程序指定这个span被点击时要运行哪个脚本。还有其他几个与align=centerbgColor=#e3e3e3border=1>

在清单2中作为参数传递的destination变量指出XMLHttpRequest对象要去装入内容的地方，由＜divid="content"＞＜/div＞标记指定。然后代码会检查XMLHttpRequest对象是否存在，如果存在，就创建一个新的。然后，事件处理程序被设置为processStateChange函数，这个函数是对象在每次状态变化时都会调用的函数。请求剩下的部分就是用open方法进行设置，设置传输类型为GET，并设置对象要装入的URL。最后调用对象的send方法，让对象实际发挥作用。

ActiveXObject

在InternetExplorer中，用ActiveXObject代替XMLHttpRequest。它的函数与XMLHttpRequest的函数相同，甚至函数名都是一样的，如清单3所示。

清单3.初始化和使用ActiveXObject

 

... functionloadHTML(URL,destination){ 　dest=destination; 　if(window.XMLHttpRequest){ ... 　}elseif(window.ActiveXObject){ request=newActiveXObject("Microsoft.XMLHTTP"); if(request){ 　request.onreadystatechange=processStateChange; 　request.open("GET",URL,true); 　request.send(); } 　} } ＜/script＞

在这种情况下（使用InternetExplorer），实例化一个Microsoft.XMLHTTP类型的新ActiveXObject对象。然后，设置事件处理程序，调用对象的open函数。然后调用对象的send函数，这样ActiveXObject就工作了。

processStateChange函数

这里描述的函数叫作事件处理程序或回调函数。回调函数的目的是当对象状态发生变化时，能够处理状态变化。在具体的应用中，这个函数的目的应当是处理状态变化、检验对象是否到达预期状态、读取动态装入的内容。

processStateChange函数由XMLHttpRequest或ActiveXObject对象在对象状态发生变化时调用。当对象进入状态4时，表明页面的内容已经接收完成（请参阅清单4）。

清单4.处理状态变化

... vardest; functionprocessStateChange(){ 　if(request.readyState==4){ contentDiv=document.getElementById(dest); if(request.status==200){ 　response=request.responseText; 　contentDiv.innerHTML=response;http://httpd.apache.org/download.cgi } 　} } functionloadHTML(URL,destination){ ...

 

当XMLHTTP对象到达状态4时，内容就已经就绪，可以提取并在浏览器的预期位置上显示。位置是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;
}
...
清单5会把有关传输错误的信息发送给浏览器。在示例应用程序中将把这个函数用作回调函数。接下来，学习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编码，因为标准化可以提高互操作性。

评论 (0) All

登陆 还没注册？