前端知识点

css-8:三种隐藏方式差别：visibility：hidden；display：none；opacity：0

渲染上的差异：

1.display：none不占位。将元素设置为display：none后，浏览器将回流和重绘
2.visibility：hidden占位
3.opacity:0，透明度为0。

事件上的差异

1.display：none；元素彻底消失，不会触发绑定事件
2.visibility：hidden。无法触发其点击事件。
3.opacity：0；可以触发点击事件。

动画属性的差异：

1.diaplay 完全不受transition属性的影响，元素立即消失。
2.visibility：hidden。元素消失的事件根transition一样，但是没有动画效果。
3.opacity：0，动画属性生效，能够进行正常的动画效果

Ajax原理 ¹

function get(url,value,method,callback){
	var xhr = null;
	//实现跨浏览器支持
	if(windwow.XMLHTTPRequest)  {  //火狐，chrome，高版本IE
		xhr = new XMLHttpRequest();
		if(xhr.overrideMimeType){  //设置MiME类别
			xhr.overrideMimeType("text/xml");
		}
	}else if(window.ActiveXObject){
		try{
			xhr = new ActiveXObject("Msxml2.XMLHttp");
		}catch(e)
			try{
			xhr = new ActiveXObject("Microsoft.XMLHttp");
			}catch(e){
			}
		}
	}
	var time = false; //设置是否超时
	var timer - setTimeout(function(){
			time = true;
			request.abort(); //请求中止
	},timeout);
	xhr.open(method,url,true);//异步
	xhr.onreadystatechange = function(){
		if(xhr.readyState !== 4) continue;
		if(time){
			//do something
			return;
		}
		clearTimeout(timer);
    	
   		if(xhr.status == 200){
   			var text = xhr.responseText;
   			callback(text);
   		}else{
			//do something
		}
    	
    }
    xhr.setRequestHeader("Content-Type","application/json"); //设置content-type
	xhr.send(value);
}

---

1. 来源：http://images.cnblogs.com/cnblogs_com/jackson0714/779808/o_12_AJAX_Process_02_WaterMark.jpg ↩︎