AJAX的前世今生与未来
一、通过三个问答来认识一下Ajax
什么是Ajax?
Ajax是Asynchronous Javascript And XML的缩写,它是一种技术。
Ajax有什么用?
这一技术能够向服务器请求额外的数据而不用卸载页面。
Ajax有什么好处?
会带来更好的用户体验。
二、Ajax的前世
1)前端的Ajax
早在Ajax出世之前,Ajax式的通信要通过一些Hack才能完成,大多数是使用隐藏的框架或内嵌框架。(很遗憾我不是在那个时期成长起来的,所以就不太熟悉了,大概是利用iframe来实现的,只不过是不跨域而已)
2)中间件的Ajax
在Ajax出世之前,有一种叫远程脚本的技术,它的工作和Ajax类似。Javascript要借助Java applet或者Flash等中间件才能实现。(具体是怎么来做的,我也不是很清楚,大概的原理是Javascript与中间件通信,中间件再与服务器通信)
三、Ajax的今生
Ajax技术的核心是XMLHttpRequest对象(简称XHR)。
下面只对xhr的大概过程作了简单的介绍,如果想深入了解ajax,大家可以深入了解了一下xhr的各个属性、方法和过程。
创建跨浏览器的xhr
function createXHR(){
if(typeof XMLHttpRequest != 'undefined'){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != 'undefined'){// for IE6-
if(typeof arguments.callee.activXString != 'string'){
var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp',],
i, len;
for(i=0, len=versions.length; i<len; i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activXString = versions[i];
break;
}catch(e){}
}
}
return new ActiveXObject(arguments.callee.activXString);
}else{
throw new Error('No XHR object available.');
}
}
同步xhr
var xhr = createXHR();
xhr.open('get', 'example.php', false);
xhr.send(null);
异步xhr
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState ==4){
if(xhr.status>=200 && xhr.status < 300 || xhr.status == 304){
console.log(xhr.responseText);
}else{
console.log('Request was unsuccessful'+xhr.status);
}
}
};
xhr.open('get', 'example.txt', true);
xhr.send(null);
四、Ajax的未来
1) xhr2
W3C开始着手xhr的规范化,xhr2进一步发展了xhr。
1>FormData
FormData用于对表单的序列化,好处是不必明确在xhr对象上设置请求的头部。xhr能够识别出FormData数据,并设置相应的头部。
xhr.open('get', 'example.txt', true);
var form = document.getElementById('form1');
xhr.send(FormData(form));
2>timeout
timeout属性表示在请求多少毫秒之后就停止请求。
xhr.open('get', 'example.txt', true);
xhr.timeout = 1000;
xhr.timeout = function(){
console.log('Request not return in a second');
}
xhr.send(null);
3>load
load用以代替readystatechange+readyState
xhr.onload = function(){
if(xhr.status>=200 && xhr.status < 300 || xhr.status == 304){
console.log(xhr.responseText);
}else{
console.log('Request was unsuccessful'+xhr.status);
}
}
xhr.open('get', 'example.php', false);
xhr.send(null);
4>progress
onprogress事件会接收一个event对象,它的target就是xhr,此外还包含了三个额外的属性:lengthComputable表示进度信息是否可用, position表示已经接收的数据的字节数, totalSize表示根据Content-Length响应头部确定的预期字节数。有了这些信息,我们就可以向用户展示一个进度条了。
xhr.onload = function(){
if(xhr.status>=200 && xhr.status < 300 || xhr.status == 304){
console.log(xhr.responseText);
}else{
console.log('Request was unsuccessful'+xhr.status);
}
};
xhr.onprogress = function(event){
var divStatus = document.getElementById('status');
if(event.lengthComputalbe){
divStatus.innerHTML = 'Received ' + event.position + 'of' +
event.totalSize + 'bytes';
}
};
xhr.open('get', 'example.php', false);
xhr.send(null);
2)CORS
这个我在前端解决跨域问题的8种方案(最新最全)中提到过,就不在这里介绍了。
3)Comet
Comet指的是一种服务器推送技术,它是一种更加高级的Ajax技术。Comet分为轮询和HTTP流两种形式。
SSE(Server Sent Event)
var source = new EventSource('myevents.php');
source.onmessage = function(event){
var data = event.data;
......
}
4)Web Sockts
这个我也在前端解决跨域问题的8种方案(最新最全)中提到过,就不在这里介绍了。
五、总结
从Ajax的发展来看,它是越来越成熟,越来越强大,它不仅在无刷新方面提升了用户体验,也在跨域访问中有着出色的能力。
AJAX的前世今生与未来的更多相关文章
- Atitit 图像处理类库安装与安装模式的前世今生与未来大趋势attilax总结.docx
Atitit 图像处理类库安装与安装模式的前世今生与未来大趋势attilax总结.docx 1. 安装的原理,主要是解压,复制,设置三大步1 2. 目前我们常见的三大种安装模式,二进制模式与源码安装模 ...
- Atlas-手淘组件化框架的前世今生和未来的路
今天手淘技术团队宣布正式开源它们的容器框架Atlas,项目地址: https://github.com/alibaba/atlas 同时他们还推出了项目官网,上线了技术文档: http://atlas ...
- 吐血整理,一文读懂中国金融衍生品市场的前世今生和未来[z]
[z]https://www.gfedu.cn/cfrm/content_22687.shtml 从定义上来说,金融衍生工具(derivativesecurity)是在货币.债券.股票等传统金融工具的 ...
- MVC之Ajax
MVC之Ajax如影随行 2014-07-04 10:34 by 书洞里的猫, 15 阅读, 0 评论, 收藏, 编辑 一.Ajax的前世今生 我一直觉得google是一家牛逼的公司,为什么这样说呢? ...
- ASP.NET MVC之Ajax如影随行
一.Ajax的前世今生 我一直觉得google是一家牛逼的公司,为什么这样说呢?<舌尖上的中国>大家都看了,那些美食估计你是百看不厌,但是里边我觉得其实也有这样的一个哲学:关于食材,对于种 ...
- MVC之Ajax如影随行
一.Ajax的前世今生 我一直觉得google是一家牛逼的公司,为什么这样说呢?<舌尖上的中国>大家都看了,那些美食估计你是百看不厌,但是里边我觉得其实也有这样的一个哲学:关于食材,对于种 ...
- CSS魔法堂:"那不是bug,是你不懂我!" by inline-block
前言 每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;.然后发 ...
- Thymeleaf+Spring整合
前言 这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thym ...
- 运行计划之误区,为什么COST非常小,SQL却跑得非常慢?
转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/38321477 2014.7.31就晚20:30 My Oracle Support组猫大师 ...
随机推荐
- Linux服务器开启tomcat的gc日志
压力测试,为了能监控长期对gc的变化的情况,那么就需要在tomcat中进行配置相关的gc输入日志,以便后续来对gc中进行分析 工具 :linux+tomcat 1.进入到了tomcat的bin的目录下 ...
- node+express搭建个人网站(1)
我的个人网站 http://yangchaojie.top/ 首先了解一下node Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个 ...
- h5端提示下载app
// app下载提示 if (!sessionStorage.getItem("appDownloadTipClosed") && isAndroidOrIphon ...
- DIH增量、定时导入并检索数据--转载
原文地址:http://www.ifunit.com/984/solr%E5%AD%A6%E4%B9%A0%EF%BC%88%E4%BA%94%EF%BC%89dih%E5%A2%9E%E9%87%8 ...
- Robotframework SSHLibrary库关键字
1.连接远程机器 两种方法,一种用户名密码登录连接,一种是通过密钥连接 (1)用户名密码连接 (2)密钥连接 大概介绍下密钥:首先由用户生成一对密码,公钥与私钥:私钥是给需要连接的用户,连接时使用私钥 ...
- BZOJ3591 最长上升子序列(状压dp)
之前听说过一种dp套dp的trick,大致是用另一个dp过程中用到的一些东西作为该dp的状态.这个题比较类似. 考虑求LIS时用到的单调队列.设f[S]为所选取集合为S的方案数,其中在单调队列内的标2 ...
- Find the hotel HDU - 3193(RMQ)
题意: 有n个旅馆,从这n个旅馆中找出若干个旅馆,使得这若干个旅馆满足这样的条件:不能从其它和剩下的旅馆中找到一个价格和距离都小于这个旅馆的旅馆... 解析: 按price 排序,若price相同, ...
- hbase 基本的JavaApi 数据操作及数据过滤(filter)
本文主要是hbase的表操作.数据操作.数据查询过滤等,如果对JDBC或ADO有了解,容易理解HBASE API. hbase版本是2.0. 1.为了方便先贴helper的部分代码(文末git上有完整 ...
- 【刷题】BZOJ 4025 二分图
Description 神犇有一个n个节点的图.因为神犇是神犇,所以在T时间内一些边会出现后消失.神犇要求出每一时间段内这个图是否是二分图.这么简单的问题神犇当然会做了,于是他想考考你. Input ...
- 已知UIScrollView放大后的Frame和放大之前的Frame计算放大的瞄点坐标
有时候在缩放后,需要知道该次缩放是在哪个坐标开始缩放的.如上篇已知缩放的点,然后在该点对其缩放.本篇其实是逆运算 (x,y)就是当初在该点进行缩放 化简之后很简单,代码如下: func getZoom ...