在开始前,先来看一个在简单不过的ajax项目例子:
例1:
//
ajax.html
< html >
< head >
< title > AJAX </ title >
< script language = " javascript " >
var xmlHttp;
// 新建一个连接
function getXml(){
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject( " Msxml2.XMLHTTP " );
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject( " Microsoft.XMLHTTP " );
}
catch (e)
{
alert( " 您的浏览器不支持AJAX! " );
return null ;
}
}
}
return xmlHttp;
}
// 将ajax.php返回的信息显示出来
function showAns(){
if (xmlHttp . readyState == 4 ){
rs . innerHTML = xmlHttp . responseText;
}
}
// 发送消息给ajax.php
function sendMsg(){
var url;
url = ' ajax.php?dt= ' + form1 . dt . value;
xmlHttp = getXml();
xmlHttp . onreadystatechange = showAns;
xmlHttp . open( ' GET ' , url , true );
xmlHttp . send( null );
}
</ script >
</ head >
< body >
< script language = " javascript " >
</ script >
< form id = " form1 " name = " form1 " >
< input type = " text " name = " dt " id = " dt " value = ' input message here ' />
< input type = " button " value = ' begin ajax ' onclick = " return sendMsg() " />
</ form >
< div id = " rs " >
</ div >
</ body >
</ html >
< html >
< head >
< title > AJAX </ title >
< script language = " javascript " >
var xmlHttp;
// 新建一个连接
function getXml(){
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject( " Msxml2.XMLHTTP " );
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject( " Microsoft.XMLHTTP " );
}
catch (e)
{
alert( " 您的浏览器不支持AJAX! " );
return null ;
}
}
}
return xmlHttp;
}
// 将ajax.php返回的信息显示出来
function showAns(){
if (xmlHttp . readyState == 4 ){
rs . innerHTML = xmlHttp . responseText;
}
}
// 发送消息给ajax.php
function sendMsg(){
var url;
url = ' ajax.php?dt= ' + form1 . dt . value;
xmlHttp = getXml();
xmlHttp . onreadystatechange = showAns;
xmlHttp . open( ' GET ' , url , true );
xmlHttp . send( null );
}
</ script >
</ head >
< body >
< script language = " javascript " >
</ script >
< form id = " form1 " name = " form1 " >
< input type = " text " name = " dt " id = " dt " value = ' input message here ' />
< input type = " button " value = ' begin ajax ' onclick = " return sendMsg() " />
</ form >
< div id = " rs " >
</ div >
</ body >
</ html >
//
ajax.php
<? php
echo " your input is: " . $_REQUEST [dt];
?>
<? php
echo " your input is: " . $_REQUEST [dt];
?>
这是个十分简单的例子,文件ajax.html用于在客户端显示信息,它将用户的输入传输给ajax.php,ajax.php处理后再将值并将其返回给ajax.html文件,ajax.html将得到的结构输出在浏览器中。
Web 开发社区的人都知道,Ajax 允许向服务器发出异步的辅助请求,并直接在网页中显示结果。不幸的是,即便最简单的 Ajax 应用程序实现起来也是一项大任务。因为 Ajax 不是标准化的技术,Internet Explorer 和其他浏览器(如 Firefox、Safari)的实现是不同的。此外,程序员至少要编写三个函数才能实现一个功能,这三个函数是:发送 HTTP 请求的初始 JavaScript(sendMsg),返回响应的 PHP 脚本(ajax.php),以及另一个处理这些响应的 JavaScript 函数(showAns)。
Sajax(Simple Ajax)是由modernmethod维护的一个开源项目。它的目的时简化Ajax的开发。建立在 Ajax 库之上的 Sajax 通过运用简单的启发式方法大大简化了开发过程:Web 客户机需要访问的每个 PHP 函数都由 Sajax “导出”。如果有一个名为
showAns()
的 PHP 函数,那么 Sajax 会把该函数导出为 JavaScript 函数
x_showAns()
。客户机对
x_showAns()
的任何调用都会自动转发给服务器上的
showAns()
,输出则传递给另一个 JavaScript 函数。
例2:
<?
php
//ex_ sajax.php
require ( " Sajax.php " );
function showAns ( $param ) {
return " You input is: $param " ;
}
$sajax_request_type = " GET " ; // Set HTTP request type to GET
sajax_init(); // Prepare Sajax
sajax_export( " showAns " ); // foo_bar can now be called by client
sajax_handle_client_request(); // Discussed below
?>
< html >
< head >
< script language = " javascript " >
<? sajax_show_javascript(); ?>
</ script >
</ head >
< body >
< form onSubmit = " x_showAns(this.input.value, alert);return false; " >
< input type = " text " name = " input " />
</ form >
</ body >
</ html >
//ex_ sajax.php
require ( " Sajax.php " );
function showAns ( $param ) {
return " You input is: $param " ;
}
$sajax_request_type = " GET " ; // Set HTTP request type to GET
sajax_init(); // Prepare Sajax
sajax_export( " showAns " ); // foo_bar can now be called by client
sajax_handle_client_request(); // Discussed below
?>
< html >
< head >
< script language = " javascript " >
<? sajax_show_javascript(); ?>
</ script >
</ head >
< body >
< form onSubmit = " x_showAns(this.input.value, alert);return false; " >
< input type = " text " name = " input " />
</ form >
</ body >
</ html >
例2是一个Sajax项目的例子,如果打开sajax.php,在输入框中输入一些内容然后单击 Enter,那么输入内容就会在一个警告框中显示出来。从这个例子中可以看出Sajax项目要比Ajax项目简单的多。但在这个看似简单的网页背后,x_showAns()
JavaScript 函数将远程调用 showAns()
函数,并把响应传递给 JavaScript 内置函数 alert()
。每个 Sajax 导出函数的最后一个参数都是一个响应处理程序,负责处理 showAns()
的输出。
这个例子还说明了 Sajax 快速开发的另一个重要特性:不需要每个函数都有一个单独的文件,页面实际上调用的是其自身,因此更便于跟踪函数的调用。x_showAns
函数直接向页面发回 Ajax 请求,在请求中包含函数名和参数。关键是 sajax_handle_client_request()
函数,它截获所有的 Sajax 调用并自动对它们进行处理。
另外Sajax.php是一个单独的文件,这使的开Sajax项目变的相对简单,因为只要简单的将其导入到需要的文件中即可。关于Sajax的更多信息可参考modernmethod的主页:http://www.modernmethod.com/sajax/。