Ajax知识
人们常常向往BS架构的易于分发和维护，又考虑着CS架构带来的丰富的客户控制能力。
.Ajax提高了Web程序的客户端控制能力和响应速度
.对于开发人员来说Ajax并非一个革命性的新技术，是多种成熟技术的整合并以一种崭新的角色的应用，它以在Google中极具成功的应用为代表。
.Ajax (Asynchronous Javascript And XML异步Javascript和XML)
.和Applet、Flash相比，Ajax是一种轻量级的解决方案，因为
它完全基于成熟的技术：作为异步调用的基础设施XMLHttpRequest
它的操作基础是HTML和XHTML，
使用的脚本语言是Javascript，这可以保证它的纯文本性质，
它具有更好的搜索引擎友好性
设计出色的Ajax应用还可以很好地工作在旧版本的设备上
利用XML, 它可以和其他应用程序方便的进行通信
.Ajax于2005年2月， Adaptive Path公司的Jesse James Garrett最早提出这个概念
.Ajax的应用
无刷新提交
输入框自动下拉列表提示
像EXCEL样编辑和排序Web表格
方便的改变web界面布局，而不需要为不变的元素浪费带宽
.设计好的Ajax程序可以告诉用户浏览器正在做什么，让用户可以边等待边完成其他的工作
.Ajax中的关键技术
Javascript脚本语言
Javascript是Ajax中的黏合剂，它使DOM、XHTML、XML和CSS可以相互协作，并控制它们的行为
XMLHttpRequest对像
借助它可以实现网页的背后和浏览器进行异步通信，而无需刷新整个页面，从而节省服务器和带宽
XML
DOM 文档对象模型
用来表示显示大浏览器上的整个文档对象及其层次结构
使用Javascript可访问文档中的所有结点，即所有对象
CSS 级联样式表技术
.Ajax不足
滥用将会导致严重的后果
.XMLHttpRequest 和服务器进行异步交互
1)XMLHttpRequest对象的创建
它最初是由微软提出并得到很多浏览器支持的对象
var objXmlHttpRequest;
try{
//For Mozilla
objXmlHttpRequest = new XMLHttpRequest();
}catch(e){
//For IE
objXmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
2)readyState属性
表示XMLHTTP请求的当前状态， 当它等于4时表示请求已经完成
3)status属性
它表示HTTP请求的返回状态码
因为XMLHTTP也是请求的一个网页，所以它的含义和传统的网页相同，如: 200表示正常返回, 404表示找不到网页
4)responseText属性
表示正常请求成功后，返回请求的以文本表示的内容
5)onreadystatechange() 事件
在XMLHttpRequest对象中readyState改变时将触发这个事件
6)open()方法
表示打开一个URL连接
7)setRequestHeader()方法
在open方法后面调用，通过它设置HTTP头
8)send()方法
开始一个请求， 如果是post请求，参数为需要提交到服务器的数据
.人们常常向往BS架构的易于分发和维护，又考虑着CS架构带来的丰富的客户控制能力。
.Ajax提高了Web程序的客户端控制能力和响应速度
.对于开发人员来说Ajax并非一个革命性的新技术，是多种成熟技术的整合并以一种崭新的角色的应用，它以在Google中极具成功的应用为代表。
.Ajax (Asynchronous Javascript And XML异步Javascript和XML)
.和Applet、Flash相比，Ajax是一种轻量级的解决方案，因为
它完全基于成熟的技术：作为异步调用的基础设施XMLHttpRequest
它的操作基础是HTML和XHTML，
使用的脚本语言是Javascript，这可以保证它的纯文本性质，
它具有更好的搜索引擎友好性
设计出色的Ajax应用还可以很好地工作在旧版本的设备上
利用XML, 它可以和其他应用程序方便的进行通信
.Ajax于2005年2月， Adaptive Path公司的Jesse James Garrett最早提出这个概念
.Ajax的应用
无刷新提交
输入框自动下拉列表提示
像EXCEL样编辑和排序Web表格
方便的改变web界面布局，而不需要为不变的元素浪费带宽
.设计好的Ajax程序可以告诉用户浏览器正在做什么，让用户可以边等待边完成其他的工作
.Ajax中的关键技术
Javascript脚本语言
Javascript是Ajax中的黏合剂，它使DOM、XHTML、XML和CSS可以相互协作，并控制它们的行为
XMLHttpRequest对像
借助它可以实现网页的背后和浏览器进行异步通信，而无需刷新整个页面，从而节省服务器和带宽
XML
DOM 文档对象模型
用来表示显示大浏览器上的整个文档对象及其层次结构
使用Javascript可访问文档中的所有结点，即所有对象
CSS 级联样式表技术
.Ajax不足
滥用将会导致严重的后果
.XMLHttpRequest 和服务器进行异步交互
1)XMLHttpRequest对象的创建
它最初是由微软提出并得到很多浏览器支持的对象
var objXmlHttpRequest;
try{
//For Mozilla
objXmlHttpRequest = new XMLHttpRequest();
}catch(e){
//For IE
objXmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
2)readyState属性
表示XMLHTTP请求的当前状态， 当它等于4时表示请求已经完成
3)status属性
它表示HTTP请求的返回状态码
因为XMLHTTP也是请求的一个网页，所以它的含义和传统的网页相同，如: 200表示正常返回, 404表示找不到网页
4)responseText属性
表示正常请求成功后，返回请求的以文本表示的内容
5)onreadystatechange() 事件
在XMLHttpRequest对象中readyState改变时将触发这个事件
6)open()方法
表示打开一个URL连接
7)setRequestHeader()方法
在open方法后面调用，通过它设置HTTP头
8)send()方法
开始一个请求， 如果是post请求，参数为需要提交到服务器的数据
.完整示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>DL Test</title>
<style type="text/css">
<!--
body {font-size:12px; text-align:center;}
dl {margin:0px;}
dt {background-color:#666; color:#fff;margin:1px;padding:0 3px;}
dd {margin: 3px}
dd.button {text-align:center}
dd.button input {margin:0 20px}
#postBox {margin-top:10px}
div {margin:auto; line-height:150%;text-align:left;width:400px;border:1px solid #666;}
//-->
</style>
<script language="javascript">
<!---
//将数据提交到动态处理程序
function ajaxSubmit()
{
//1)用Javascript获取用户输入
var title = document.getElementById('title').value
var author = document.getElementById('author').value
//2)创建XMLHttpRequest对象
var objXmlHttpRequest;
try{
//For Mozilla
objXmlHttpRequest = new XMLHttpRequest();
}catch(e){
//For IE
objXmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
//3)创建请求结果处理程序
objXmlHttpRequest.onreadystatechange=function()
{
try{
if(4 == objXmlHttpRequest.readyState)
{
if( 200 == objXmlHttpRequest.status)
{//操作成功, 则把数据显示在列表中
//从ajaxAdd.php的输出中获取日期数据
//objXmlHttpRequest == ajaxAdd.php中的 echo date("Y-m-d H:i:s", time())
var date = objXmlHttpRequest.responseText;
//把数据插入到显示列表
addToList(date);
}
else
{
alert("操作错误");
}
}
}catch(e){
alert(e.message);
}
}
//4)打开连接，true表示异步提交
objXmlHttpRequest.open("post", "ajaxAdd.php", true);
//5)当方法为post时需要如下设置http头
objXmlHttpRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//6)发送数据
objXmlHttpRequest.send("title="+escape(title)+"&author="+escape(author));
}
function addToList(date)
{
//获取留言列表div容器
var msg=document.getElementById("msgList");
//创建dl标记及子标记
var dl = document.createElement("dl");
var dt = document.createElement("dt");
var dd = document.createElement("dd");
var dd2= document.createElement("dd");
//将结点插入到相应的位置即div容器msg的第一个结点前
msg.insertBefore(dl,msg.firstChild);
dl.appendChild(dt);
dl.appendChild(dd);
dl.appendChild(dd2);
//填充留言内容
dt.innerHtml="标题: "+document.getElementById('title').value;
dd.innerHtml="作者: "+document.getElementById('author').value;
dd2.innerHtml="内容: "+document.getElementById('content').value;
//清空输入框
document.getElementById('title').value = "";
document.getElementById('author').value = "";
document.getElementById('content').value= "";
}
//-->
</script>
</head>
<body>
<div id="msgList">
<dl >
<dt>标题: 留言1</dt>
<dd>作者: cnscn 日期: 2007/04/27</dd>
<dd>留言内容1</dd>
</dl>
<dl >
<dt>标题: 留言1</dt>
<dd>作者: cnscn 日期: 2007/04/27</dd>
<dd>留言内容1</dd>
</dl>
<dl >
<dt>标题: 留言1</dt>
<dd>作者: cnscn 日期: 2007/04/27</dd>
<dd>留言内容1</dd>
</dl>
<dl >
<dt>标题: 留言1</dt>
<dd>作者: cnscn 日期: 2007/04/27</dd>
<dd>留言内容1</dd>
</dl>
</div>
<div id="postBox">
<form action="" method="post" name="frm">
<dl id="dll">
<dt>发表留言</dt>
<dd>标题: <input type="text" size="20" name="title" id="title" value="" /></dd>
<dd>作者: <input type="text" size="20" name="author" id="author" value="" /></dd>
<dd>内容: <textarea rows="6" cols="30" name="content" id="content" ></textarea></dd>
<dd class="button" >
<input type="button" onclick="ajaxSubmit()" value="提交" />
<input type="reset" value="重写" />
</dd>
</dl>
</form>
</div>
</body>
</html>
.ajaxAdd.php
<?php
//提交数据，并进行返回当前时间
....
echo date("Y-m-d H:i:s",time());
?>