简要介绍AJAX

javaplan

浏览: 54656 次
性别:
来自: world

最近访客更多访客>>

dyf423

shaopei3344

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

Ajax JavaScript 浏览器应用服务器 XML

一、 AJAX定义
AJAX其实是多种技术的综合，包括JavaScript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest.
· JavaScript 邦定和处理所有数据
· XHTML和CSS 标准化的呈现
· DOM 动态显示和交互
· XML和XST 进行数据的交换和处理
· XMLHttpRequest 异步数据读取
二、现状与需要解决的问题
传统的Web应用采用同步方式
· 我们只需要改变页面的一小部分数据，为什么我们要重新加载整个页面呢？
· 为什么老是要用户等服务器去数据呢？
三、为什么要使用AJAX？
使用AJAX带来的便捷：
· 减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器的负担。
· 无刷新更新页面，减少用户的心理和时间等待时间。
· 带来更好的用户体验
· 可以把一些服务器的工作转嫁到客户端来处理，利用客户端的闲置能力来处理，减轻了服务器和带宽的负担，可以节约空间和带宽租用成本。
· 可以调用外部数据
· 基于标准化的并被广泛使用的技术，无须下载插件和小程序。
· 进一步呈现页面和数据分离。
四、使用AJAX改进你的设计
例1数据校验：
对于“唯一性校验”使用AJAX可以使校验请求通过XMLHttpRequest对象发送并，整个过程不需要弹出窗口或者对话框，快速又不加服务器负担。

例2按需取数据——级联菜单：
传统实现级联菜单是通过一次性将所有的数据读取出来并写入数组，然后通过JavaScript来控制子集菜单的呈现，这样可以避免每次对菜单的操作引起重载页面。
但是缺点是会出现冗余数据和浪费用户资源，特别是菜单结构复杂，数据量大情况下尤为突出。

使用AJAX的优点：在初始化页面的时候我们只读取一级菜单数据并显示，当我们选择一级菜单的某一项时，AJAX会根据一级菜单项请求相应二级菜单数据并显示。用什么取什么，用多少取多少。不会出现冗余和浪费，更新页面只需要更新需要更新的那部分页面。缩短了用户的等待时间，把浪费降到最低。

例3 读取外部数据
AJAX可以调用外部数据，例如可以对一些开发数据如xml文档和RSS文档进行二次开发，实现数据整合或者开发应用程序。

五、 AJAX的缺点
· AJAX使用了大量的JavaScript和AJAX引擎，这处决于浏览器的支持。IE5.0，Mozilla1.0和NetScape 7以上才支持。Mozilla虽然也支持，但是提供XMLHttpRequest方式不一样，所以AJAX必须测试各个浏览器的兼容性。

· 由于它只更新部分页面和不刷新整个页面，网页的后退按钮时失效的。由于视觉上不提示更新，用户在使用的时候很难分辨数据到底是旧的还是已经更新的，这需要提示信息。

· 对流媒体的支持没有FLASH和JavaApplet好。

· 对于手持设备如手机和PDA还不能很好的支持AJAX

六、 AJAX开发
AJAX应用到的技术
重点技术：JavaScript、XMLHttpRequest、DOM、XML
A 、XMLHttpRequest对象
XMLHttpRequest对象的方法：
abort 停止当前请求
getAllResponseHeaders() 返回完整的响应头部
getResponseHeader(headerlable) 返回响应头部中某项
open(“method”,”url”[,”asyncFlag”[,”usernNme”[,”password”]]]) 设置目标请求的URL等
send(content) 发送请求
setRequestHeader(label,value) 设置Header并和请求一起发送
XMLHttpRequest对象的属性：
onreadystatechange 状态改变事件触发器
readyState 对象状态
0——未初始化
1——读取中
2——已读取
3——交互中
4——完成
responseXML 返回数据的文本版本
responseText 返回数据的兼容DOM和XML文档对象
status 返回的状态码
statusText 返回的状态码的描述信息

B、 JavaScript
以前JavaScript用的最多的地方是表单数据检验。
在AJAX中，它用来操作XMLHttpRequest来跟数据库打交道。
C、 DOM 文档对象模型
供Html和XML使用的一组API,脚本语言通过DOM才可以和页面内容进行交互。
· HTML文档节点
在DOM下HTML节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个树。
Node的常用的几种类型：

接口 nodeType类型 nodeType值备注
Element
Text
Document
Comment
DocumentFragment
Attr

DOM对象操作整个树的时候Document是整个树的根节点。JavaScript操作HTML文档的时候document指向整个文档，<body>和<table>等代表 Element
常用Document方法：
方法描述
createAttribute() 用指定的名字创建新的Attr节点
createComment() 用指定的字符串创建新的Comment节点
createElement() 。。。
createTextNode() 。。。
getElementById() 。。。
getElementsByTagName() 。。。

Element的常用属性：
属性描述
tagName 标记的名字，如<p>返回的是P，HTML标记返回的都是大写

Element的常用方法：用得比较多的就getAttribute()和setAttribute()
方法描述
getAttribute()
getAttributeNode()
getElementsByTagName()
has Attribute() 如果该元素具有指定名字的属性返回true
removeAttribute
removeAttributeNode 从元素的属性列表中删除指定Attr节点
setAttribute()
setAttributeNode()

· 使用DOM操作HTML节点：
Node对象的常用属性：
属性描述
attributes 如果节点是Element则以NamedNodeMap形式返回元素的属性
childNodes 存放当前节点的子节点
firstChild 。。。
lastChild 。。。
nextSibling 以Node形式返回当前兄弟节点的下一个节点
previousSibling 。。。
nodeName
nodeType
pareNode

Node对象的常用方法：
方法描述
appendChild()
cloneNode() 复制当前节点并且它的所有子孙节点
hasChildNodes() 当前节点拥有子节点，则返回True
insertBefore() 在当前节点的子节点前插入一个节点
removeChild()
replaceChild()

D、XML
用XML表述的数据和文档，可以很容易的被所有的程序共享。

AJAX开发框架：
A、初始化对象并发送XMLHttpRequest请求
代码如下：跨浏览器
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
注意：有些Mozilla浏览器处理服务器返回的未包含XMLMimeType,这样会出错，所以必须加上一下代码：
http_request.overrideMimeType('text/xml');

B、指定响应处理函数
http_request.onreadystatechange = processRequest;

C、发送HTTP请求
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);

注意：如果http_request.send的参数是以Post方法发送内容，则必须先调用setRequestHeader方法设置MIME类型。
http_request. setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
这时资料则以字符串的形式作为send参数。
如：name= value&anothername= anothervalue&so=on

D、处理服务器返回信息
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
alert(http_request.responseText);
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}

一个初步的开发框架如下：
<script language="javascript">
var http_request = false;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
alert(http_request.responseText);
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
function userCheck() {
var f = document.form1;
var username = f.username.value;
if(username=="") {
window.alert("用户名不能为空。");
f.username.focus();
return false;
}
else {
send_request('sample1_2.jsp·username='+username);
}
}
</script>