Ajax入门学习笔记

今天下午,随便翻了几本Ajax的书籍 .包括Lee Babin的 Beginning Ajax with PHP ; Ajax Hack 等。算是晓得Ajax是啥东西了。

Ajax依赖于Javascript和XML,实现异步的数据传输,在Web客户端的表现就是页面无需刷新。这玩意最早是、Microsoft提出来的,貌似现在还没有国际标准,但所有主流浏览器都支持。Ajax核心是Javascript的 windows.XMLHttpRequest对象 (IE6以下版本是ActiveXObject)

要创建一个 Ajax实例,只需创建 XMLHttpRequest对象即可。但是IE6及以下版本必须用完全不同的ActiveXObject方式创建。所幸的是除了初始化外两种方式创建的对象属性和方法几乎完全相同 .而且 IE7也开始支持标准XMLHttpRequest 对象.但现在貌似IE6还有人用..


 

XMLHttpRequest对象使用极其简单,基本的用法如下:

function ajax(uri,id) {
var content=document.getElementById(id);
xmlhttp.open(“GET”,uri);
//xmlhttp是创建的XMLHttpRequest对象
xmlhttp.onreadystatechange=function() {
if( xmlhttp.readystate=4 && xmlhttp.status=200) {
content.innerHTML=xmlhttp.responseText;
}
xmlhttp.send(null);

}

 

所有复杂的Ajax运用,基本原理都是这样 .XMLHttprequest的 open方法向服务器提交请求,GET是请求方式,也可以是POST.uri是目标文件URL,例如”abc.htm” ,” abc.php&a=1″之类,也可以是绝对路径. XMLHttprequest 的 readystate有四种状态: 0,1,2,3,4 分别表示 初始化,载入中,正在载入,交互中和完成. 用onreadystatechange监控这一值改变,当完成后 如果 服务器返回状态码是200 ,则将本地文档里将特定id区块内容设为服务器返回的内容 .这个ID通常是一个div块级元素.这里用的是基本的DOM操作 getElementById.

然后,在页面里的a链接,表单,区块等标签里,加入onclick onfocus onmouseover 等事件监控程序,向上面建立的ajax函数传递参数即可.基本的Ajax应用就是这样.

几点简单的说明:
1.使用Ajax动态改变页面内容无需刷新,但仍需要一定时间.期间通常让用户知道服务器正在处理请求.一般的方法就是在点击链接后显示一个 “Loading …”的提示和GIF图标,就像这样:

Loading …

一般把这个提示放到一个div区块里,这个区块可以事先建立好空白的,把样式visibility设为hidden .用时用getElementById(‘id’) 设置其中内容 ,并更改样式为可见 .也可以需要的时候用Javascript直接新建区块:
var example=document.ceateElement(‘id1′);
example.class=”css-class”;// 可以为区块指定CSS样式
var parent=document.getElementById(“parentid’);
parent.appengChild(example);
新建一个id为id1的 DIV区块,添加到原有文档id为parent的区块最后.
Ajax本来就和DOM有密切关系,一些DOM操作都可以使用.

2.Ajax需要Javascript ,为了使网站在不支持JS的浏览器上保持兼容,最常见方法如下:

word

如果浏览器不支持JS,点击链接正常请求page1.htm文件,否则用ajax动态请求并更改文档内容.这种方式对搜索引擎也没有影响.

3. Ajax会使浏览器的”后退” ,”前进” 按钮完全失去作用,长期以来很多用户习惯于使用浏览器的后退和前进功能,在Ajax下这不但不起作用,还可能造成填写的表单数据丢失或其他问题. 目前看解决这个问题方法有两个: 一是浏览器Hack ,当使用jacascript的 location.hash设置緢点时,浏览器会将目前页面内容保存为一个状态.或者改变页面内iframe框架内容也有同样效果 . (貌似,只对部分浏览器有效)

还有一种就是使用外部Jacascript脚本,改变浏览器history对象. 最著名的是Really Simple History,这是一个Javascript Library ,使用很方面.它可以使浏览器”保存”当前用ajax生成页面的内容并能通过 后退 /前进按钮正确工作.

0 Responses to “Ajax入门学习笔记”


Comments are currently closed.