1一些概念:
DHTML,XML,XML衍生语言(XUL,XAML,XAMJ.MXML),Javascript,CSS,XMLHttpRequest,DOM,JSON
AJax 的应用:google maps,google mail,google suggest,amazon的搜索工具,
2AJax的第一篇文章:
Jesse James Garrett of Adaptive Path:AJax:A new approach to web applications
3一些关键理念
以前的web是基于请求/响应模式的,对于每个请求都会重新加载整个页面,原来的页面被放到浏览器的历史栈中。
AJax使这种模式发生改变,这是AJax的核心所在。
用AJax可以自由地与服务器进行异步的交互。虽然以前也能异步交互,但是称不上自由。
AJax最初是Asynchronous Javascript + XML,现在这个词被扩展了:所有允许浏览器与服务器通信而无需刷新当前页面的技术。
4AJax的典型使用(用javascript实现):
a。新建XHR对象
function createXMLHttpRequest()
{
if (window.ActiveXObject)//IE
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequestI)
{
xmlHttp = new XMLHttpRequest();
}
}
b。指定XHR.onreadystatechange对应的函数,onreadystatechange其实是一个事件处理器,在XHR状态变化时被调用。通常用来捕捉请求,响应的状态。
通常在一个函数中做出定义,该函数在向服务器请求服务时被调用。
同时指定请求的方法,及请求资源的URL等
function startRequest()
{
createXMLHttpRequest();
xmlHttp.onreadystatechange= handleStateChange;
xmlHttp.open("GET","innerHTML.xml",true);
xmlHttp.send(null);//.发出请求
}
c。定义onreadystatechange对应的处理函数。
function handleStateChange()
{
...
}
d。在html中相应的位置,指定对服务器的请求。
<input type="button" />
5DOM的使用
服务器对请求的响应,可能以文本的方式,或xml的方式,发送回来。
在handleStateChange()中分别用xmlHttp.responseText,xmlHttp.responseXML来捕捉。
后者返回一个DOM对象。
DOM是与平台和语言无关的接口,允许程序和脚本动态地访问和更新文档的内容、结构、样式。文档可以进一步处理,处理结果可以放回到所提供的页面中。
DOM面向的文档是html,xml。
javascript中将web页面视为一系列元素按一定结构构成的,可以用一个DOM来访问。
6发送请求参数
上面的例子中,send(null)这个发送请求的函数没有参数,
现在要发送请求参数。另外,请求发送有两种方式,get,post。
不改变数据模型状态,用get,否则用post。
两者第二个区别:get将请求以字符串的形式附在URL中发送,
post将请求以请求体的方式发送。
请求参数:content
send(content),content可以是DOM,输入流,串,xml等。
xml可以发送复杂的参数,但是xml本身比较复杂,有一个解决方案用JSON来发送参数。JSON是一种轻量级数据交换方式,是文本方式的,提供了多种语言的支持。如java,javascript,详见
服务器安全技术文章,服务器攻防技术... 服务器软件下载