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

时间 2019-12-05

标签 ajax 原理以及函数简单封装栏目 Ajax 繁體版

原文原文链接

什么是AJAX？javascript

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。html

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

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

AJAX运用的意义?chrome

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

首先从我的最直观的感觉来讲是用户体验的提高，你能想象你在使用百度地图的时候更换一个地点你的网页就刷新一次的心情吗？ajax部分更新网页能够更快的处理用户的需求而不是把宝贵的时间浪费在加载其余部分的页面上。至于技术上的意义，学识尚浅，等到本身有必定的看法后再补充。可是看到其余博主的看法以为颇有道理，先搬过来给你们分享一下。数组

咱们在平时的开发中都多多少少的接触或者应用到了ajax，谈到ajax技术的意义，咱们关注得最多的毫无疑问是提高用户的体验。可是，若是咱们结合未来电脑和互联网的发展趋势，咱们会发现ajax技术在某些方面正好表明了这种趋势。为何这样说呢？咱们知道，自从电脑出现以来，一直是桌面软件占据着绝对主导的地位，可是互联网的出现和成功使这一切开始发生着微妙的变化。至关一部分的人都相信，早晚有一天，数据和电脑软件将会从桌面转移到互联网。也就是说，未来的电脑有可能抛弃笨重的硬盘，而直接从互联网来获取数据和服务，我记得我念大学的时候，有位教授给咱们上课的时候，曾经设想过这样一种情景，也许在未来的电脑桌面上，没有任何多余的软件和程序，而仅仅只有一个IE，虽然如今看起来咱们距离这一天还很遥远，而且这其中还有不少的问题须要解决，可是我以为这个并不是梦想，而是早晚将实现的现实。那么，这其中的主要问题就是互联网的链接不稳定，谁也不肯意看着本身的电脑从服务器一点一滴的下载数据，那么，ajax是否是解决了这个问题呢，说实话，与其说ajax解决了这个问题，倒不如它只是掩盖了这个问题，它只是在服务器和客户端之间充当了一个缓冲器，让用户误觉得服务没有中断。精确的说，ajax并不能提升从服务器端下载数据的速度，而只是使这个等待不那么使人沮丧。可是正是这一点就足以产生巨大的影响和震动，它实际上也对桌面软件产生了巨大的冲击。这一点我用一个例子来讲明，咱们能够比较一下Outlook Express和Gmail，前者是典型的桌面软件，后者是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
	{
		//IE五、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的文档：点击打开连接