Ajax实践之匿名函数判断用户是否存在

前端之家收集整理的这篇文章主要介绍了Ajax实践之匿名函数判断用户是否存在前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

要想用匿名函数来实现用户是否存在,就应该明白:什么是匿名函数?是干什么的?怎么用?结合Ajax如何实现?那么就带着疑问进入研究中:

一、是什么?

“匿名”根据字面意思理解就是没有名字的意思。如果你能理解到这那么你就对匿名函数有了一半的理解,即:匿名函数就是没有实际名字,也没有指针的函数。如:

(function(){
//这里忽略所有实现
})();

通过这个简单的匿名函数,我们来剖析它是怎么显现执行的?那么出现在眼前最多的就是“()”,对的就是“()”在作怪。小括号能把我们的表达式组合分块,并且每一块,也就是每一对小括号,都有一个返回值。这个返回值实际上也就是小括号中表达式的返回值。所以当我们用一对小括号把匿名函数括起来的时候,实际上小括号对返回的就是一个匿名函数Function对象。因此,小括号对加上匿名函数就如同有名字的函数般被我们取得它的引用位置了。所以如果在这个引用变量后面再加上参数列表,就会实现普通函数调用形式。

二、干什么?

那么它是用来解决什么问题的呢?这样写的目的是什么?由于JavaScript并不是面向对象的,所以它不支持封装。但是在不支持封装的语言里同样可以实现封装而实现的方法就是匿名函数可见它的目的就是为封装而生。

是否记得《Javascript的一种模块模式》中的第一句话就是“全局变量是魔鬼”配合var关键字,匿名函数可以有效的保证在页面上写入Javascript,而不会造成全局变量的污染。这在给一个不是很熟悉的页面增加Javascript时非常有效,也很优美。

三、怎么用

还记得上一篇博客吗?用Ajax来实现判断用户是否存在?那里用了回调的方法来得到Ajax引擎返回的数据,那么现在我们就用匿名函数方法来实现同样的操作(这里只看JS代码部分,其它不变):

function validate(field){	
		if (trim(document.getElementById("userId").value).length != 0) {
			var xmlHttp = null;
			//表示当前浏览器不是ie,如ns,firefox
			if(window.XMLHttpRequest) {
				xmlHttp = new XMLHttpRequest();
			} else if (window.ActiveXObject) {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}	
			
			//解决缓存方法,用毫秒来加时间戳
			var url="user_validate.jsp?userId=" + trim(document.getElementById("userId").value)+ "&time=" +new Date().getTime();
			
			//设置请求方式用GET,设置请求的URL,设置异步提交
			xmlHttp.open("GET",url,true);
			
			//将方法地址复制给onreadystatechange属性
			//类似于电话号码,这里采用了匿名函数方法来实现回调功能
			xmlHttp.onreadystatechange=function(){
				//Ajax引擎状态为成功
				if(xmlHttp.readyState ==4){
					//http协议状态为成功
					if(xmlHttp.status ==200){
						//alert("请求成功!")
						//判断如果为空,将红字span去掉
						if (trim(xmlHttp.responseText) != ""){
							document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"
						}else{
							document.getElementById("spanUserId").innerHTML = "";
						}
						
					}else{
						alert("请求失败,错误码=" +xmlHttp.status);
					}						
				}	
			}
			
			//将设置的信息发送到Ajax引擎
			xmlHttp.send(null);			
		}else{
			document.getElementById("spanUserId").innerHTML = "";
		}
	} 

当然匿名函数实现方法还有很多种,在这里就不一一例举了,希望在今后的学习中得到更多的实践。

四、对比

通过对比两种Ajax对判断用户是否存在的实现,我们可以看出采用匿名函数可以将之前的三个函数整理成一个函数,这样的实现更加简单,并且可以提高效率。

五、总结

通过对匿名函数的学习,让我明白了每个知识点之间都有千丝万缕的联系。所以在今后的学习中不要放过任何不明白,不懂的名词。

猜你在找的Ajax相关文章