ajax原理总结附简单实例及其优点

转载

mob604756fca9f3 2014-05-02 20:35:00

文章标签 xml html ajax 数据服务器 文章分类 代码人生

在工作中用了Ajax N多次了，也看过一些相关方面的书籍，也算是认识了它，但是一直没有认真总结和整理过相关的东东，失败！

近有闲情，将之总结如下：

【名称】

Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。

详情请移步Ajax: A New Approach to Web Applications

【原理】

简单一些，就是通过使用XmlHttpRequest对象向服务器发送异步请求，获取返回的数据，并使用Javascript和DOM操作页面内的元素，从而达到改变页面内容的目的。

其中XmlHttpRequest对象是关键，因为它支持异步请求。XMLHttpRequest是完全用来向服务器发出一个请求的。它所包含的方法和属性如下所示：

方法：

abort() 导致当前正在请求被取消

getAllResponseHeaders() 返回一个字符串，包含氖响应标头的名称和值

getResponseHeader(name) 返回指定的响应标头的值

open(method, url, async, username, password) 设置请求的方法和目标URL。请求可以声明为同步的（可选），也可以给需要基于窗口谁的请求而提供用户名和口令（可选）

send(content) 发起带有指定内容（可选）的请求

setRequestHeader(name, value) 利用指定的名称和值，设置一个请求标头

属性：

onreadystatechange 指派在请求的状态发生变化时所使用的事件处理程序

readyState 一个整数值，指示请求的状态如下：

0—-未初始化

1—-正在加载

2—-已加载

3—-交互

4—–完成

responseText 在响应里所返回的内容

responseXML 如果内容是XML，就根据内容而创建XML DOM

status 从服务器所返回的响应状态码。例如：200表示成功，404表示未找到，参考HTTP规范

statusText 响应所返回的状态文本消息

对于此对象其它介绍请移步：XMLHttpRequest概述

【所包含的技术】

· 基于XHTML和CSS标准的表示；

· 使用Document Object Model进行动态显示和交互；

· 使用XMLHttpRequest与服务器进行异步通信；

· 使用JavaScript绑定一切；

· 使用XML和XSLT;交换和操作数据。

以上的技术都是一些广泛使用了的技术，都属于比较旧的技术，ajax是这几种技术的结合体。

【简单实例】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript"> 
function ajax() { 
var xmlHttp; 
// 依据对象判断，而不是依据浏览器 
if(window.XMLHttpRequest) { 
xmlHttp=new XMLHttpRequest();//mozilla浏览器 
}else if(window.ActiveXObject){ 
try{ 
xmlHttp=new ActiveXObject("Msxmlx2.XMLHTTP"); //IE老版本 
}catch(e){} 
try{ 
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE新版本 
}catch(e){} 

if(!xmlHttp){ 
window.alert("不能创建XMLHttpRequest对象实列"); 
return false; 
} 
} 

if (!xmlHttp) { 
alert("创建XMLHttpRequest对象失败！"); 
return false; 
} 

xmlHttp.open('POST', 'index.php?get_a=2&get_b=3', false); 
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=UTF-8;'); 
xmlHttp.send("post_a=1&post_b=2"); 
xmlHttp.onreadystatechange = function() { 
alert(xmlHttp.readyState); 
} 
if(xmlHttp.readyState == 4){ //判断对象状态 
var content_obj = document.getElementById("content"); 
content_obj.innerHTML = "正在处理数据..."; 
if(xmlHttp.status == 200){ //信息已经成功返回，开始处理信息 
var returnStr = xmlHttp.responseText; 
content_obj.innerHTML = returnStr; 
}else{ //页面不正常 
content_obj.innerHTML = "您所请求的页面存在异常！"; 
} 
} 
} 
</script> 
</head> 
<body> 
<input type="button" value="ajax" onclick="ajax();" /> 
<div id="content">ajax内容显示区</div> 
</body> 
</html>