PHP 和 AJAX
AJAX 简介
AJAX = Asynchronous JavaScript And XML(异步 JavaScript 及 XML)
AJAX 是 Asynchronous JavaScript And XML 的首字母缩写。
AJAX 并不是一种新的编程语言,而仅仅是一种新的技术,它可以创建更好、更快且交互性更强的 web 应用程序。
AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据。
通过在幕后与 web 服务器交换数据,而不是每当用户作出改变时重载整个 web 页面,AJAX 技术可以使网页更迅速地响应。
AJAX 基于开放的标准
AJAX 基于以下开放的标准:
JavaScript
XML
HTML
CSS
在 AJAX 中使用的开放标准被良好地定义,并得到所有主要浏览器的支持。AJAX 应用程序独立于浏览器和平台。(可以说,它是一种跨平台跨浏览器的技术)。
AJAX 事关更好的 Internet 应用程序
与桌面应用程序相比,Web 应用程序有很多优势:
可拥有更多用户
更容易安装和维护
更容易开发
但是, 应用程序不总是象传统应用程序那样强大和友好。
通过 AJAX,可以使 Internet 应用程序更加强大(更轻巧、更快速,且更易使用)。
今天您就可以开始使用 AJAX
没有什么新知识需要学习。
AJAX 基于开放的标准。而这些标准已被大多数开发者使用多年。
大多数 web 应用程序可通过使用 AJAX 技术进行重写,来替代传统的 HTML 表单。
AJAX 使用 XML 和 HTTP 请求
传统的 web 应用程序会把数据提交到 web 服务器(使用 HTML 表单)。在 web 服务器把数据处理完毕之后,会向用户返回一张完整的新网页。
由于每当用户提交输入,服务器就会返回新网页,传统的 web 应用程序往往运行缓慢,且越来越不友好。
通过 AJAX,web 应用程序无需重载网页,就可以发送并取回数据。完成这项工作,需要通过向服务器发送 HTTP 请求(在幕后),并通过当服务器返回数据时使用 JavaScript 仅仅修改网页的某部分。
一般使用 XML 作为接收服务器数据的格式,尽管可以使用任何格式,包括纯文本。
您将在本教程接下来的章节学习到如何完成这些工作。
PHP 和 AJAX
不存在什么 AJAX 服务器。
AJAX 是一种在浏览器运行的技术。它使用浏览器与 web 服务器之间的异步数据传输,使网页从服务器请求少量的信息,而不是整张页面。
AJAX 是一种独立于 web 服务器软件的 web 浏览器技术。
但是,在本教程中,我们将集中在运行在 PHP 服务器上的实际案例,而不是 AJAX 的工作原理。
如需阅读更多有关 AJAX 如何工作的知识,请访问我们的 AJAX 教程。
AJAX XMLHttpRequest
XMLHttpRequest 对象使 AJAX 成为可能。
XMLHttpRequest
XMLHttpRequest 对象是 AJAX 的关键。
该对象在 Internet Explorer 5.5 与 2000 年 7 月发布之后就已经可用了,但是在 2005 人们开始讨论 AJAX 和 Web 2.0 之前,这个对象并没有得到充分的认识。
创建 XMLHttpRequest 对象
不同的浏览器使用不同的方法来创建 XMLHttpRequest 对象。
Internet Explorer 使用 ActiveXObject。
其他浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
要克服这个问题,可以使用这段简单的代码:
var XMLHttp=null
if (window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
代码解释:
1、首先创建一个作为 XMLHttpRequest 对象使用的 XMLHttp 变量。把它的值设置为null。
2、然后测试 window.XMLHttpRequest 对象是否可用。在新版本的 Firefox, Mozilla, Opera 以及 Safari 浏览器中,该对象是可用的。
3、如果可用,则用它创建一个新对象:XMLHttp=new XMLHttpRequest()
4、如果不可用,则检测 window.ActiveXObject 是否可用。在 Internet Explorer version 5.5 及更高的版本中,该对象是可用的。
5、如果可用,使用它来创建一个新对象:XMLHttp=new ActiveXObject()
改进的例子
一些程序员喜欢使用最新最快的版本的 XMLHttpRequest 对象。
下面的例子试图加载微软最新版本的 "Msxml2.XMLHTTP",在 Internet Explorer 6 中可用,如果无法加载,则后退到 "Microsoft.XMLHTTP",在 Internet Explorer 5.5 及其后版本中可用。
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
代码解释:
首先创建用作 XMLHttpRequest 对象的 XMLHttp 变量。把它的值设置为 null。
按照 web 标准创建对象 (Mozilla, Opera 以及 Safari):XMLHttp=new XMLHttpRequest()
按照微软的方式创建对象,在 Internet Explorer 6 及更高的版本可用:XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
如果捕获错误,则尝试更老的方法 (Internet Explorer 5.5) :XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
PHP 和 AJAX 请求
AJAX 请求
在下面的 AJAX 例子中,我们将演示当用户向 web 表单中输入数据时,网页如何与在线的 web 服务器进行通信。
在下面的文本框中输入名字:
这个例子包括三张页面:
一个简单的 HTML 表单
一段 JavaScript
一张 PHP 页面
HTML 表单
这是 HTML 表单。它包含一个简单的 HTML 表单和指向 JavaScript 的链接:
<html>
<head>
<script src="clienthint.js"></script>
</head>
<body>
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>