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

绝地灬酷狼 2022-07-16 11:41 277阅读 0赞

**什么是AJAX？**

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

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

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

**AJAX运用的意义?**

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

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

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

原文链接：[Ajax工作原理][Ajax]

**AJAX函数的封装和调用**

封装函数部分：

调用函数部分：

<!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的文档： [点击打开链接][Link 1]

[Ajax]: http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html
[Link 1]: http://www.w3school.com.cn/ajax/index.asp