前端常见面试题（1）

三列布局

要求两边定宽，中间自适应
看到这个题目，相信大家在学css的时候一定接触过圣杯布局和双飞翼布局

圣杯布局

<div class="bd> <div class="main">main</mian>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

下面是css样式

.main {
    float: left;
    width: 100%;
}
.left {
    float: left;
    width: 100px;
    margin-left: -100%;
}
.right {
    float: left;
    width: 100px;
    margin-left: -100px;
}
.pd {
    padding: 0 100px 0 100px;
}
//上面的能让main回到他该有的位置，但是left和right就出现问题，这时我们可以使用相对定位了

代码改进如下：

.left { float: left; width: 100px; margin-left: -100%; position: relative; left: -100px; }
.right { float: left; width: 100px; margin-left: -100px; position: relative; right: -100px; }

为什么这个叫圣杯布局呢，我个人理解是因为他是把父盒子用padding给挤进去了，两边是定位加负边距，感觉是一个圣杯。

双飞翼布局

<div class="main">
    <div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>

样式如下

.main { float: left; width: 100%; }
.left { float: left; width: 100px; margin-left: -100%; }
.right { float: left; width: 100px; margin-left: -100px; }
.content { margin: 0 100px 0 100px; }

为什么叫双飞翼布局
把main看做是鸟的身体，把left和right看作是鸟的两翼，先把身体对好，然后把两翼放在该有的位置。

可以发现在布局的时候常用的有三种
* 浮动
* 负边距
* 相对定位
这是是实现布局的三个最基本的原子组合，只要巧妙组合，就可以实现各种布局。

ajax的原生实现

现代浏览器均内置 XMLHttpRequest 对象（IE7+、Firefox、Chrome、Safari 以及 Opera），如果要兼容到ie6甚至更早版本就需要使用

var xht = new ActiveObject("Microsoft.XMLHTTP");

下面来写get请求的原生实现

var xhr = new XMLHttpRequest();
xhr.open("GET","demo_get.php?id=1&name=lemoo&t=" + Math.random(),true);
xhr.send();

上面open方法第二个参数是请求的URL地址，第三个参数是true是异步的意思，false不是异步的意思。如果不是异步的话就不需要写onreadystatechange 函数

传递参数直接在?后指定，多个参数用&分隔
GET请求同一URL时会有缓存，通过参数是否一致来判断
解决缓存问题，加个时间戳使每次参数不一致，上例中的t=Math.random()

post的实现

var xhr = new XMLHttpRequest();
xhr.open("POST","ajax_test.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fanm=su&name="fu"); xhr.onreadystatechaget = function() { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById('mydiv').innHTML = xhr.responseText; } }

post的特点

POST没有缓存
POST发送的数据量大
AJAX无法发送文件
readyState改变时触发onreadystatechange事件，4为完成
status是返回状态，200是成功，404是未找到页面
responseText是返回的数据，为字符串格式