ajax原理总结附简单实例及其优点
程序员文章站
2023-11-07 18:07:52
在工作中用了ajax n多次了，也看过一些相关方面的书籍，也算是认识了它，但是一直没有认真总结和整理过相关的东东，失败！ 近有闲情，将之总结如下： 【名称】 ajax是as...
在工作中用了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>
切记：当发起一个post请求时，需要对报头 content-type（内容类型）进行设置。这样，服务器就知道如何来处理上传的内容。如果要模拟通过http协议的post方式来发送表单，则应将内容类型设置为application/x-www-form-urlencoded。
【优点】
页面无刷新，用户体验好；
异步，不打断用户操作，响应速度快；
“按需取数据”，减少冗余请求，减轻服务器负担；
基于标准化的并被广泛支持的技术，无需额外的插件；
可以使数据和表现分离；
【存在的问题】
一些设备还不支持
开发成本提高
使back按钮失效，用户操作后无法返回；
对流媒体支持没有flash之流好；
对搜索引擎不友好
破坏程序的异常机制
存在一些安全问题，暴露了一些程序接口和数据逻辑
近有闲情，将之总结如下：
【名称】
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>
切记：当发起一个post请求时，需要对报头 content-type（内容类型）进行设置。这样，服务器就知道如何来处理上传的内容。如果要模拟通过http协议的post方式来发送表单，则应将内容类型设置为application/x-www-form-urlencoded。
【优点】
页面无刷新，用户体验好；
异步，不打断用户操作，响应速度快；
“按需取数据”，减少冗余请求，减轻服务器负担；
基于标准化的并被广泛支持的技术，无需额外的插件；
可以使数据和表现分离；
【存在的问题】
一些设备还不支持
开发成本提高
使back按钮失效，用户操作后无法返回；
对流媒体支持没有flash之流好；
对搜索引擎不友好
破坏程序的异常机制
存在一些安全问题，暴露了一些程序接口和数据逻辑