自己做工具--用原生js封装一个AJAX插件

采用面向对象的思想封装,兼容get/post方式

1.get和post区别

（1）get方式通过url地址栏传递参数，post通过表单形式传递数据

（2）传输的数据大小，get方式：普通浏览器只能传输2K数据，chrome浏览器传输8K，post方式：原则上不受限制，但是可以在php.ini里面配置

 （3）安全性，post以表单的形式传输，安全性比get高

（4）传输数据的形式：

get方式：

index.php?name=zhangsan //参数写到地址栏

  post方式：

xhr.setRequestHeader(“Content-Type”,’application/x-www-form-urlencoded’);
xhr.send(提交的数据data);

（5）get方式会产生缓存

 举例：访问index.php，如果地址栏没有变化，说明请求的就是同一个文件。

浏览器会先将该文件里面的内容（css、img、js等数据）缓存到本地，ie浏览器的缓存文件是保存在：下次访问时直接读取缓存文件内容

所以针对IE低版本的浏览器，我们在url地址栏传递随机数，url地址每次都不一样，从而解决缓存问题

2.代码封装ajax.js

POST参数obj.data的提交格式和GET方法中url的写法一样。

data参数:要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

var $$ = {
	request:function(obj){
		//创建xmlhttprequest对象
		var xhr;
		try{
			xhr = new XMLHttpRequest();
		}catch(e){
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}

		//建立连接
		if(obj.method=='get'){
			xhr.open(obj.method,obj.url+'?'+obj.data+'&'+Math.random(),true);
			xhr.send();
		}else if(obj.method=='post'){
			xhr.open(obj.method,obj.url,true);
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xhr.send(obj.data);
		}
		//监视请求的状态
		xhr.onreadystatechange = function(){
			if(xhr.readyState==4 && xhr.status==200){
				if(obj.dataType=='xml'){
					obj.callback(xhr.responseXML);
				}else if(obj.dataType=='text'){
					eval("var res = "+xhr.responseText);
					obj.callback(res);
				}
			}
		}
	}
}

调用说明:

//发送ajax请求时
$$.request({
   method:"post",     //请求方式post/get
   url:'xxx.php',         //请求服务器地址
   data:'love=hate&age=20', //请求时携带的数据
   dataType:"json";  //期望服务器回应数据 xml或text或json
   callback:function(res){
       //处理数据,回调函数,res为服务器返回json数据
   }
});

2.扩展说明:

init : function () {
this.attachStylesheet('inettuts.js.css');
this.addWidgetControls();
this.makeSortable();
},

var a = { 
init: function () {...}, 
exit: function () {...} 
} 

这样的话，可以用a.init()来调用这个函数，具体功能就是执行this.attachStylesheet('inettuts.js.css'); 
this.addWidgetControls(); 
this.makeSortable(); 
这几个方法，看名字应该分别是导入css文件，增加widget控件和执行排序。 

整体来说，就是对整个页面的初始化。

再详细一点说，就是这样的写法是最近几年开始流行的json写法，把所有的function，所有的变量等，都用var o = {x: func, y: "", z: obj}这样的写法来写。

其理解起来可以用类似于class的理解方式，而执行效率相对也是高的。