ajax 封装

源地址 ：http://blog.youkuaiyun.com/u010139093/article/details/38661219?locationNum=13      

在多个文件中写重复的代码，会造成代码冗余，对于后期的开发及其不利，所以需要对那些经常用到的代码进行封装处理。为后期开发提供方便，同时代码的可读性提高。在多次用到Ajax的时候经常用到相同的代码，例如创建Ajax对象，Ajax返回数据的判断等等。重复编写代码的阅读性不好。所以对其公共代码进行封装处理。代码如下

   

[html] view plain copy

print ?

1. (function(){  
2.      //获取一个dom元素  
3.     var $=function(id){  
4.         return document.getElementById(id);  
5.     };  
6.       
7.     //获取一个Ajax对象  
8.     $.init=function(){  
9.         try {return new XMLHttpRequest()} catch(e){}  
10.         try {return new ActiveXObject('Microsoft.XMLHTTP')} catch(e){}  
11.         alert('Error');  
12.     };  
13.       
14.     //用于发送Ajax的get请求  
15.     $.get=function(url,data,callback,type){  
16.         var xhr=$.init();  
17.         if(data!=null){  
18.             url=url+'?'+data;  
19.         }  
20.         xhr.open('get',url);  
21.         xhr.setRequestHeader("If-Modified-Since","0");  
22.         xhr.onreadystatechange=function(){  
23.             if(xhr.readyState==4 && xhr.status==200){  
24.                 if(type==null){  
25.                     type='text';  
26.                 }  
27.                 if(type=='text'){  
28.                     callback(xhr.responseText);  
29.                 }  
30.                 if(type=='xml'){  
31.                     callback(xhr.responseXML);  
32.                 }  
33.                 if(type=='json'){  
34.                     callback(eval('('+xhr.responseText+')'));  
35.                 }  
36.             }  
37.         };  
38.         xhr.send(null);  
39.     };  
40.       
41.     //用于发送Ajax的post请求  
42.     $.post=function(url,data,callback,type){  
43.         var xhr=$.init();  
44.         xhr.open('post',url);  
45.         xhr.setRequestHeader('Content-Type','application/x-form-urlencoded');  
46.         xhr.onreadystatechange=function(){  
47.             if(type==null){  
48.                 type='text';  
49.             }  
50.             if(type=='text'){  
51.                 callback(xhr.responseText);  
52.             }  
53.             if(type=='xml'){  
54.                 callback(xhr.responseXML);  
55.             }  
56.             if(type=='json'){  
57.                 callback(eval('('+xhr.responseText+')'));  
58.             }  
59.         };  
60.         xhr.send(data);   
61.     };  
62.     window.$=$;  
63. })();  

(function(){
     //获取一个dom元素
	var $=function(id){
		return document.getElementById(id);
	};
	
	//获取一个Ajax对象
	$.init=function(){
		try {return new XMLHttpRequest()} catch(e){}
		try {return new ActiveXObject('Microsoft.XMLHTTP')} catch(e){}
		alert('Error');
	};
	
	//用于发送Ajax的get请求
	$.get=function(url,data,callback,type){
		var xhr=$.init();
		if(data!=null){
			url=url+'?'+data;
		}
		xhr.open('get',url);
		xhr.setRequestHeader("If-Modified-Since","0");
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4 && xhr.status==200){
				if(type==null){
					type='text';
				}
				if(type=='text'){
					callback(xhr.responseText);
				}
				if(type=='xml'){
					callback(xhr.responseXML);
				}
				if(type=='json'){
					callback(eval('('+xhr.responseText+')'));
				}
			}
		};
		xhr.send(null);
	};
	
	//用于发送Ajax的post请求
	$.post=function(url,data,callback,type){
		var xhr=$.init();
		xhr.open('post',url);
		xhr.setRequestHeader('Content-Type','application/x-form-urlencoded');
		xhr.onreadystatechange=function(){
			if(type==null){
				type='text';
			}
			if(type=='text'){
				callback(xhr.responseText);
			}
			if(type=='xml'){
				callback(xhr.responseXML);
			}
			if(type=='json'){
				callback(eval('('+xhr.responseText+')'));
			}
		};
		xhr.send(data);	
	};
	window.$=$;
})();

   以上写法是自执行匿名函数：

        常见格式：(function() { /* code */ })();
        解释：包围函数（function(){})的第一对括号向脚本返回未命名的函数，随后一对空括号立即执行返回的未命名函数，括号内为匿名函数的参数。
       作用：可以用它创建命名空间，只要把自己所有的代码都写在这个特殊的函数包装内，那么外部就不能访问，除非你允许(变量前加上window，这样该函数或变量就成为全局)。各JavaScript库的代码也基本是这种组织形式。
总结一下，执行函数的作用主要为 匿名 和 自动执行,代码在被解释时就已经在运行了。