Ajax是当前的热门话题,也是现在所谓的Web2.0的基础。使.docVIP

PAGE 442 PHP完全参考手册 PAGE 441 第12章 Ajax 12 12 第 章 第 章 Ajax Ajax Ajax是当前的热门话题，也是现在所谓的Web 2.0的基础。使用Ajax技术，可以创建基于Web的应用程序，这些应用程序将具有与桌面应用程序相同的外观。主要区别在于，Ajax应用程序并不会在用户每次操作时刷新整个浏览器显示，这是一种典型的以Web为中心的操作方法。使用Ajax，可以在后台与服务器通信，下载数据，在Web页面的特定部分显示数据，而不需要重新加载整个页面。 Ajax(Asynchronous JavaScript and XML)依赖于在浏览器中使用JavaScript。在服务器上与Ajax一起配合使用的最常见的语言是PHP，所以这项技术值得我们关注。 12.1 了解Ajax 下面介绍一个Ajax示例—— 这里将学习许多客户端(也就是浏览器端)技术。该示例名为index.html，如图12-1所示。 单击按钮时，这个简单的示例只是从服务器取出文本文件data.txt的内容。这个应用程序和普通网页的区别在于：当单击按钮时，页面并不会闪烁和重新显示—— 只是文本“The fetched message will appear here.”被从服务器取出的data.txt中的内容“Hello from Ajax.”所覆盖，如图12-2所示。 这个应用程序看起来和桌面应用程序差不多，操作起来也很相似：在操作字处理软件时，例如输入一个字符，当显示新的字符时整个页面并不会闪烁。这就是Ajax给Web编程所带来的效果—— 用户操作时不需要再重新加载整个页面，并且不需要与服务器交互。与服务器的所有交互(下载和上传数据)在后台发生，并且只更新Web页面的特定部分，而不是重新加载整个页面。 下面介绍如何操作Ajax，在进一步结合PHP使用Ajax之前，先了解一下如何使用Ajax取出文本文件的内容，以及如何使用Ajax技术将数据发送到PHP脚本并读取脚本发送回的内容。 图12-1 一个Ajax示范 图12-2 使用Ajax取出消息 12.2 编写Ajax 下面是第一个示例index.html的具体实现—— 我们需要花点时间理解Ajax是如何操作这个示例的： html head titleAn Ajax demo/title script language = javascript var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject(Microsoft.XMLHTTP); } function getData(dataSource, divID) { if(XMLHttpRequestObject) { var obj = document.getElementById(divID); XMLHttpRequestObject.open(GET, dataSource); XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4  XMLHttpRequestObject.status == 200) { obj.innerHTML = XMLHttpRequestObject.responseText; } } XMLHttpRequestObject.send(null); } } /script /head body h1An Ajax demo/h1 form input type = button value = Fetch the message onclick = getData(data.txt, targetDiv) /form