文档章节

Ajax工作原理以及函数的简单封装

zfx2016
 zfx2016
发布于 2016/10/19 11:42
字数 1492
阅读 36
收藏 0

什么是AJAX?

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

AJAX运用的意义?

新浪微博、百度地图、股票信息的显示、网站登录验证码等等这些都应用到了ajax技术,那么ajax技术运用有什么意义呢?

首先从个人最直观的感受来说是用户体验的提升,你能想象你在使用百度地图的时候更换一个地点你的网页就刷新一次的心情吗?ajax部分更新网页可以更快的处理用户的需求而不是把宝贵的时间浪费在加载其他部分的页面上。至于技术上的意义,学识尚浅,等到自己有一定的见解后再补充。但是看到其他博主的见解觉得很有道理,先搬过来给大家分享一下。

我们在平时的开发中都多多少少的接触或者应用到了ajax,谈到ajax技术的意义,我们关注得最多的毫无疑问是提升用户的体验。但是,如果我们结合将来电脑和互联网的发展趋势,我们会发现ajax技 术在某些方面正好代表了这种趋势。为什么这样说呢?我们知道,自从电脑出现以来,一直是桌面软件占据着绝对主导的地位,但是互联网的出现和成功使这一切开 始发生着微妙的变化。相当一部分的人都相信,迟早有一天,数据和电脑软件将会从桌面转移到互联网。也就是说,将来的电脑有可能抛弃笨重的硬盘,而直接从互 联网来获取数据和服务,我记得我念大学的时候,有位教授给我们上课的时候,曾经设想过这样一种情景,也许在将来的电脑桌面上,没有任何多余的软件和程序, 而仅仅只有一个IE,虽然现在看起来我们距离这一天还很遥远,并且这其中还有很多的问题需要解决,但是我觉得这个并非梦想,而是迟早将实现的现实。那么,这其中的主要问题就是互联网的连接不稳定,谁也不愿意看着自己的电脑从服务器一点一滴的下载数据,那么,ajax是不是解决了这个问题呢,说实话,与其说ajax解决了这个问题,倒不如它只是掩盖了这个问题,它只是在服务器和客户端之间充当了一个缓冲器,让用户误以为服务没有中断。精确的说,ajax并不能提高从服务器端下载数据的速度,而只是使这个等待不那么令人沮丧。但是正是这一点就足以产生巨大的影响和震动,它实际上也对桌面软件产生了巨大的冲击。这一点我用一个例子来说明,我们可以比较一下Outlook ExpressGmail,前者是典型的桌面软件,后者是ajax所实现的B/S模式,实际上后者目前已经在慢慢取代前者了,Gmail在收发邮件的时候已经和Outlook Express的功能几乎没有差别了,而且它不需要安装客户端程序。这就是为什么微软对ajax所带来的冲击有着如此的恐惧心理,并且在它前不久所进行的调查之中,将google看做他们未来十年内的主要竞争对手的主要原因之一。当然,这种变化也并不会将桌面软件全部淘汰,现有的浏览器还没有一个能像PhotoShop等桌面程序那样处理复杂的图像。但是我们也不能忽视它带来的影响和冲击。

原文链接:Ajax工作原理

AJAX函数的封装和调用

封装函数部分:

function ajax(url, fnSucc, fnFaild)
{
	//1.创建Ajax对象
	if(window.XMLHttpRequest)
	{
		//IE7+ chrome firefox
		var oAjax=new XMLHttpRequest();
	}
	else
	{
		//IE5、6
		var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	//2.连接服务器(打开和服务器的连接)
	//open( method , url , async )
	//method :请求的类型;GET 或 POST
	//url :文件在服务器上的位置
	//async :true(异步)或 false(同步)
	
	oAjax.open('GET', url, true);
	
	//3.发送
	oAjax.send();
	
	//4.接收
	oAjax.onreadystatechange=function ()
	{
		/** readyState状态含义
		 *  0: 请求未初始化
			1: 服务器连接已建立
			2: 请求已接收
			3: 请求处理中
			4: 请求已完成,且响应已就绪
		 */
		if(oAjax.readyState==4)
		{
			if(oAjax.status==200)
			{
				//alert('成功了:'+oAjax.responseText);
				fnSucc(oAjax.responseText);
			}
			else
			{
				//alert('失败了');
				if(fnFaild)
				{
					fnFaild();
				}
			}
		}
	};
}


调用函数部分:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function () {
				var a = document.getElementById('a');
				var user = document.getElementById('a1');
				var Password = document.getElementById('a2');
				a.onclick = function (){
					//防止缓存,每次调用链接都加一个唯一的时间
					ajax('a.txt?t='+new Date().getTime(),function (str){
						var arr = eval(str);//将字符串转换为数组
						user.value = arr[0].a;
						Password.value = arr[0].b;
					},function(){
						alert('fail');
					});
				}
			}
		</script>
	</head>
	<body>
		<input type="button" name="a" id="a" value="123" />
		user:<input type="text" name="a" id="a1" value="" />
		password:<input type="text" name="a" id="a2" value="" />
	</body>
</html>


a.txt中的内容

[{a:'zfx',b:'zfx123'},{a:'zfx2',b:'zfx456'}]
需要注意的是在这里我txt文件中是一个数组,那么我们我们读取到的其实是一个字符串,我们就需要将字符串转换成一个数组来调用。还有就是为了避免我们读取到的是缓存数据,我们向url添加一个唯一的ID。

需要详细的了解ajax的每一个模块可以直接看w3c的文档: 点击打开链接


© 著作权归作者所有

zfx2016
粉丝 1
博文 22
码字总数 14027
作品 0
广州
前端工程师
私信 提问
Web APi之手动实现JSONP或安装配置Cors跨域(七)

前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器、Action方法,以及过滤器、模型绑定等等,想想也是心...

jeffcky
2015/09/25
0
0
JSONP跨域的原理解析

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页...

武文海
2016/03/21
57
0
大咖说-前端大型免费公开讲座

  为什么大多数企业都会要求应聘的人有一个工作年限呢?原因很简单,他们想要一位拥有来了就能立刻投入新工作的能力的员工,这样就可以给公司省下大量的内部培训成本。换言之,企业需要员工...

学习web前端
2017/11/10
0
0
js原生Ajax 的封装和原理之浅析

原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术。 动态网页:是指可以通过服务器语言结合数据库随时修改数据的网页。 静...

sinat_34719507
2017/03/11
0
0
[深圳] 求份 前端开发 工作

简  历 基本信息 姓 名:刘昭辉 性 别:男 学 历:中专 出生日期:1989年12月24日 联系电话:134 8079 1024 电子信箱:hi.liuzhaoxin#gmail.com 工作年限:三年以上 技术专长 1.熟练掌握H...

liuzhaoxin
2012/10/18
378
3

没有更多内容

加载失败,请刷新页面

加载更多

Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
5
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部