如何通过PHP和Sajax使用Ajax之JavaScript作者：课课家教育 点击数：609发布时间：2015-11-16 14:44:29
本学期的教学，小编为大家来讲解一下
多年以来，创建真正具有响应性的Web应用程序这一目标一直被的一个简单事实所阻碍：要改变页面某一部分的信息，用户就必须重载整个页面。但是以后不再会这样了。感谢异步脚本和XML（Ajax），我们现在可以从服务器端请求新内容，只修改页面的一部分。这个教程解释了如何把Ajax用于，并介绍了简单Ajax工具包（Sajax），这是一个用PHP编写的工具，可以把服务器端PHP与JavaScript集成。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标记的显示信息
...
＜styletype="text/css"＞
span:visited{text-decoration:none;color:#293d6b;}
span:hover{text-decoration:underline;color:#293d6b;}
span{color:#293d6b;cursor:pointer}
＜/style＞
well 这些span标记用在示例应用程序中，颜色符合所有IBMdeveloperWorks教程中链接使用的颜色。样式标记的第一行指定已经访问过的链接的颜色保持不变。鼠标经过时加下划线，光标变成指针，就像普通的锚标记（＜ahref...＞）一样。现在来看看如何创建使用这个CSS样式代码的链接。javascript教程
创建使用span标记的链接
在“构建PHP应用程序”一节中要创建的链接，将用来通过JavaScript与浏览器通信，告诉浏览器要去什么地方，要提取什么内容。它们不是使用锚标记的传统链接，而是使用span标记创建的。span标记的观感由清单1的CSS代码决定。这里是示例：
...
＜style＞
＜scripttype="text/javascript"＞
var request;
var dest;
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>
相关文章
精彩导读
热门资讯
关注我们
