前些天在开发Survey系统时碰到这样么一个问题。在调查问卷的生成页面中，我需要动态的给管理员提供一个随意加入“被调查对象”（通常是我们学校的老师）功能。这看似很简单不是么？假设我们现在就有一个现成的表单，熟悉HTML的人都知道要想在这个表单内部触发一个事件办法有2个，一个就是使用HTML的触发按钮submit,另外就是使用javascript了。很显然HTML是无法满足这样的需求的，一旦我提交了表单，数据即将被处理，即便我重构一个中间页面也不能实现实时动态的添加和删除条目的功能，毕竟不能每触发一次就重构一个页面吧。
Ajax就是一个中间引擎技术！把事务处理分成多个线程。如果理解不了不妨举个例子：我早上7.00叫我老婆起床，老婆总共用了10分钟才爬起来，而我就站在那里傻傻的等了10分钟。等老婆爬起来之后，我才转身去做早饭。这就是常规的web事务处理办法，很慢不是嘛？你必须等到上个返回结果才会执行下一段程序。既浪费时间又让人着急。
让我们看看Ajax吧：我早上7：00叫老婆起床，叫完之后直接转身去做早饭。等10分钟后，老婆爬起来，我的早饭也做好了。
这就是Ajax引擎，它就在我们身边，google map,你会感觉速度很快对么？对，因为google map每一次地图挪动只载入地图改变的部分，之前载入的部分将不再载入，而是停留在你的内存中。太神奇了！
我已经迫不及待了，让我们开始一个实例：
文件一: phpform.php 这是一个表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP Form</title>
</head>
<script language="javascript" type="text/javascript" src="addname.js"></script>
<body>
<form>
<p> First Name: <input type="text" id="first_name" name="first_name"/></p>
<p> Last Name: <input type="text" id="last_name" name="last_name"/></p>
<p> <input type="button" value="Add Name" onclick="addname()" />
</form>
<span id="txtHint"></span>
</body>
</html> |
这个表单很简单，让你输入自己的姓名，当我们点击按钮，触发一个事件 addname()
addname()来自于 addname.js,下面是代码：
var xmlHttp;
function addname(){
var first_name = document.getElementById("first_name").value;
var last_name = document.getElementById("last_name").value;
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="do.php";
url=url+"?firstname="+escape(first_name);
url=url+"&lastname="+escape(last_name);
url=url+"&gender="+escape(gender_value);
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
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,这是Ajax中一个核心概念，网上文档很多。主要用来触发HTTP，因为不同版本的浏览器对XML的解析不一样，所以我们通常是先做一个判断而后才进行功能代码。
下面是任务执行代码：do.php
<?php
$first_name = $_GET['firstname'];
$last_name = $_GET['lastname'];
$gender = $_GET['gender'];
echo "First Name is: " .$first_name." ";
echo "Last Name is:" .$last_name."";
?> |
将这三个文件保存在同一个目录下，尝试一下吧
阅读(2324) | 评论(0) | 转发(0) |
