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

所属分类: 网络编程 / AJAX相关 阅读数: 456
收藏 0 赞 0 分享
在工作中用了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中文乱码问题解决方案

ajax中文乱码问题在中文中经常会出现这种问题,其实只要稍加注意就不会出现ajax中文乱码这回事情了,接下来为大家详细介绍下如何解决这类问题
收藏 0 赞 0 分享

jquery ajax实现批量删除具体思路及代码

回调函数,在请求完成后需要进行的操作:此处是把选中的checkbox去掉,接下来为大家详细介绍下,感兴趣的朋友可以参考下哈,希望对你有所帮助
收藏 0 赞 0 分享

JQuery+ajax实现批量上传图片(自写)

jquery+ajax方式实现单张图片上传的代码是可以搜的到,实现批量上传图片的程序却没搜索到于是自己写了个,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

利用Ajax实现在脚本里传值实例介绍

Ajax实现在脚本里传值可以解决实际上的一些问题,本文实现了一下,感兴趣的朋友可以参考下,希望可以帮助到你
收藏 0 赞 0 分享

jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)

CSS也使得表格的布局越来越光彩耀人。但是,无论如何,都掩饰不了那些包装下的死板,接下来为大家介绍下让那些死板的数据 更具有可读性、可用性
收藏 0 赞 0 分享

jQery ajax——load()方法示例介绍

load(url,[data],[callback])url:加载的页面地址;data: 可选项,发送到服务器的数据,格式是key/value;callback:可选项,回调函数,示例代码如下
收藏 0 赞 0 分享

滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用特在此与大家一起分享,感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

ajax 登录功能简单实现(未连接数据库)

未连接数据库下实现ajax 登录功能判断登陆成功与失败,喜欢ajax的朋友可以参考下哈,希望对大家有所帮助
收藏 0 赞 0 分享

AJAX和WebService实现邮箱验证(无刷新验证邮件地址是否合法)

首先在项目里面添加服务引用,验证 Email 地址是否正确(邮件地址合法、只是域名正确、邮件服务器没有找到等等)感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

AJAX和三层架构实现分页功能具体思路及代码

本文涉及到AJAX和三层架构方面的知识,在学习分页的同时也巩固了一下它们的相关知识,适合初学者的你
收藏 0 赞 0 分享
查看更多