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>
切记:当发起一个POST请求时,需要对报头 Content-type(内容类型)进行设置。这样,服务器就知道如何来处理上传的内容。如果要模拟通过HTTP协议的POST方式来发送表单,则应将内容类型设置为application/x-www-form-urlencoded。
【优点】
页面无刷新,用户体验好;
异步,不打断用户操作,响应速度快;
“按需取数据”,减少冗余请求,减轻服务器负担;
基于标准化的并被广泛支持的技术,无需额外的插件;
可以使数据和表现分离;
【存在的问题】
一些设备还不支持
开发成本提高
使back按钮失效,用户操作后无法返回;
对流媒体支持没有flash之流好;
对搜索引擎不友好
破坏程序的异常机制
存在一些安全问题,暴露了一些程序接口和数据逻辑
ajax原理总结附简单实例及其优点的更多相关文章
- php分页原理教程及简单实例
<?php //连接数据库 $con = mysql_connect("localhost","root",""); mysql_se ...
- C#开发Windows服务 附简单实例实现禁止QQ运行
本实例主要实现下面三个基本功能 1.C#开发windows服务 2.禁止QQ等程序运行 3.为windows服务创建自动安装程序 下面针对这三个基本功能进行实现 一.C#开发windows服务 Win ...
- PHP Ajax简单实例
最近学习Jquery Ajax部分,通过简单例子,比较了下post,get方法的不同 HTML部分 <html> <head> <title>jQuery Ajax ...
- Wordpress解析系列之PHP编写hook钩子原理简单实例
Wordpress作为全球应用最广泛的个人博客建站工具,有很多的技术架构值得我们学习推敲.其中,最著名最经典的编码技术架构就是采用了hook的机制. hook翻译成中文是钩子的意思,单独看这个词我们难 ...
- Win Socket编程原理及简单实例
[转]http://www.cnblogs.com/tornadomeet/archive/2012/04/11/2442140.html 使用Linux Socket做了小型的分布式,如Linux ...
- Ajax -- 原理及简单示例
1. 什么是Ajax •Ajax被认为是(AsynchronousJavaScript and XML的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 2. Ajax ...
- Linux C Socket编程原理及简单实例
部分转自:http://goodcandle.cnblogs.com/archive/2005/12/10/294652.aspx 1. 什么是TCP/IP.UDP? 2. Socket在哪里 ...
- 什么是ajax,ajax原理是什么 ,优缺点是什么
AJAX工作原理及其优缺点 1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页 ...
- 简述Ajax原理及实现步骤
简述Ajax原理及实现步骤 1.Ajax简介 概念 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML). 现在允许浏览器与务器通信 ...
随机推荐
- 老外写的在桌面添加快捷方式(DELPHI XE5 ANDROID)
UsesAndroidapi.JNI.GraphicsContentViewText, FMX.Helpers.Android,Androidapi.JNI.JavaTypes, FMX.Platfo ...
- 第八节 C#的using语句
前面的代示例展示了如果调用一个类型的Dispose或Close方法.如果决定显式的调用这两个方法之一,强烈建议吧他们放在一个异常处理finally块中.这样可以保证清理代码得到执行,因此,前代码示例可 ...
- git传输协议原理
git精神:distributed-is-the-new-centralized 转自:http://git-scm.com/book/zh/v1/Git-%E5%86%85%E9%83%A8%E5% ...
- 扯一扯前端css的整体架构设计:(2)base基础类的那些事儿
周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...
- C#判断ip地址是否ping的通
Ping pingSender = new Ping(); PingReply reply = pingSender.Send("127.0.0.1",120);//第一个参数为i ...
- 菜鸟学习Spring——60s配置XML方法实现简单AOP
一.概述. 上一篇博客讲述了用注解的形式实现AOP现在讲述另外一种AOP实现的方式利用XML来实现AOP. 二.代码演示. 准备工作参照上一篇博客<菜鸟学习Spring--60s使用annota ...
- Base
base 关键字用于从派生类中访问基类的成员: 调用基类上已被其他方法重写的方法. 指定创建派生类实例时应调用的基类构造函数. 基类访问只能在构造函数.实例方法或实例属性访问器中进行. 从静态方法中使 ...
- CentOS 7 + nginx + uwsgi + web2py (502 bad gateway nginx)
Web2py开发包中自带的setup-web2py-nginx-uwsgi-centos64.sh脚本, 只能运行在CentOS 6.4中使用, 如果直接在CentOS 7 中使用该脚本布署后, 访问 ...
- Stream,Reader/Writer,Buffered的区别(2)
Reader: Reader的子类: 1.BufferedReader: FileReader 没有提供读取文本行的功能,BufferedReader能够指定缓冲区大小,包装了read方法高效读取字符 ...
- hdu 1212 Big Number
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1212 Big Number Description As we know, Big Number is ...