- 1.说说你对盒子模型的理解
所有HTMl元素都可以看作盒子，在CSS中，“box model”这一术语是用来设计和布局时使用
css模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
盒模型允许我们在其他元素的周围元素边框之间的空间放置元素
当你指定一个css元素的宽度与高度时，你只是指定内容区域的宽高，元素真正的宽高为：内容+填充+边框+边距
兼容问题：在IE5.x和6中使用自己的非标准模式，导致设置的width即为内容加边框加填充的总和。为解决这个问题，最好在元素的父元素及子元素上面设置内边距和外边距
- 2.什么是DOM？它的结构是什么？如何使用js添加，删除，复制，移动，查找节点？
DOM：文档对象模型，定义了表示和修改文档所需的对象，这些对象的行为和属性以及这些对象之间的关系。通过js,您可以重构整个HTML文档，您可以添加移除改变和重排页面上的项目
要改变页面上的某个东西，js就需要获得对HTML文档中所有元素进行访问的入口，这个入口，连同对HTML元素进行添加，移动和改变或移除的方法和属性，都是通过文档对象模型来获得的。
它的结构：可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现
DOM可以将任何HTML或XML文档描述成一个由多层节点构成的结构
js添加节点：appendChild(),用于向childNodes列表的末尾添加一个节点
var returnNode = someNode.appendChild(newNode);//返回结果为newNode
js移动节点：如果appendChild()传入的节点已经存在，即已经是文档的一部分了，那么将从原来的位置转移到新的位置
因此，如果在调用appendChild()时传入父节点的第一个子节点，那么这个子节点将变成父节点的最后一个子节点
js插入节点到任意位置：insertBefore(),这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，插入的节点会作为被参照的节点的同胞节点（previousSibling）
同时被方法返回。如果参照节点是null，那么insertBefore（）与appendChild()执行相同的操作
js替换节点：replaceChild(),接受的两个参数是：要插入的节点以及要替换的节点。要替换的节点 仍然存在只是从文档树中被移除，找不到它的位置。
该节点的所有关系指针都会从被它替换的节点复制过来。
js移除节点：removeChild()，这个方法接受一个参数，即要移除的节点，被移除的节点将成为方法的返回值。
js克隆节点：cloneNode(),这个方法所有节点共有，接受一个布尔值，表示是否执行深复制（为true表示复制节点及其子节点，否则只复制节点本身）。
复制后的节点副本归文档所有，但并没有为其指定父节点
在IE中存在一个bug，它会复制事件处理程序。
js查找节点：document提供了两个方法用于查找元素：
document.findElementByID()和
document.findElementByTagName();
document.findElementByID("id"):id必须完全匹配，区分大小写。IE7及以前的版本虽然不区分大小写，但是如果存在表单的name属性与要找的id相同，并且位置在该id元素之前，
那么结果会返回那个表单元素，解决的办法是尽量不要使表单的name属性值与某个id相同。
假如 页面中存在多个相同id，查找该id元素时，只会返回第一个id符合的元素;
document.findElementByTagName()：结果会返回一个HTMLCollection对象，可以使用方括号语法或者item()方法访问HTMLCollection中的项
例如：
var images = document.getElementByTagName("img");
alert(images[0]);
alert(images.length);
alert(images.item(0).src);
也可以使用namedItem()方法获取对象的项，前提是需要为每一项添加name属性，再通过name查找该项。
查找页面中所有元素使用：document.findElementByTagName("*");
注意：在IE中这样调用会返回注释节点
- 3.什么是XMLHttpRequest?说出一次完整的http请求过程？写出关键代码。
XMLHttpRequest:ajax能够向服务器请求额外的数据而无须卸载页面，而这一技术的核心是XMLHttpRequest对象（简称XHR）。
XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，这种技术虽然包含XML但是与数据格式无关，就是无须刷新页面即可从服务器获得数据，但是不一定是XML数据
var xhr = new XMLHttpRequest();
xhr.open("get","example.txt",false);
//1.三个参数：要发送的请求类型，请求的URL，表示是否异步发送请求
//2.open并不会真正的发送请求，而只是启动一个请求以备发送
//3.url相对于执行代码的当前页面，当然也可以使用绝对路径，但是必须与当前页面使用的域名，协议，端口相同，否则都会引起安全错误
xhr.send(null);
//send()接收一个参数，即作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null
//在收到服务器响应请求之后，响应的数据会自动填充XHR对象的属性
//responseText:作为响应主体被返回的文本
//responseXML:如果响应的内容类型时"text/xml"或"application/xml",这个属性将包含着响应数据的XML DOM文档
//status:响应的http状态，200作为成功的标志；304代表请求的资源并没有被改变，可以直接使用浏览器中缓存的版本
//statusText:Http状态的说明
一次完整的http请求：
1.建立tcp连接（三次握手）
2.web浏览器向web服务器发送请求命令
3.web浏览器发送请求头信息，如user-agent，host等自身的信息
最后发送一个空请求头表示请求头信息发送完毕
如果是post提交，会继续提交请求体
4.web服务器应答，应答第一部分是版本号和状态协议码
5.web服务器发送应答头信息，关于它自己的信息及被请求的文档，最后发送一个空白表示头信息发送结束
6.Web服务器向浏览器发送数据，以Content-Type应答头信息所描述的格式发送用户所请求的实际数据
7.web服
务器关闭tcp连接，一旦Web服务器向浏览器发送了请求数据，它就要关闭tcp连接。
如果添加Connection:keep-alive Tcp连接在发送后将仍然保持打开状态
发送同步请求：
var xhr = new XMLHttpRequest();
xhr.open("GET","example.txt",false);
xhr.send(null);
if(xhr.status>==200&&xhr.status<300||xhr.status==304){
console.log(xhr.responseText);
console.log(xhr.responseXML);
console.log(xhr.status);
}else{
console.log("Request was unsuccessful:"+xhr.status);
}
发送异步请求：
通过检测readyState属性，该属性表示请求/响应过程的当前活动阶段：
0：未初始化。已经调用open（）方法。
1：启动。已经调用open（）方法，但尚未调用send（）方法。
2：发送。已经调用send()方法，但是尚未接收到响应
3：接收。已经接收到部分响应数据。
4：完成。已经接收到全部响应数据，而且可以在客户端使用了。
只要readeyState属性的值从一个值变化到另一个值，就会触发readystatechange事件。
在调用open之前指定onreadeystatechange事件处理程序才能确保跨浏览器的兼容性。
//异步
var xhr2 = new XMLHttpRequest();
xhr2.onreadystatechange = function(){
if(xhr2.readyState == 4 ){
if((xhr2.status>=200 && xhr2.status<300)||xhr2.status==304){
console.log(xhr2.responseText);
}else{
console.log("Request was unsuccessful:"+xhr2.status);
}
}
};
xhr2.open("GET","example.txt",true);
xhr2.send(null);取消异步请求：xhr.abort();
调用这个方法过后，xhr对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。
GET请求：
常用于向服务器查询某些信息，必要时可以将要查询的字符串参数追加到URL的末尾，以便将信息发送给服务器。
对XHR而言，位于传入open（）方法的url末尾的查询字符串必须经过正确的编码才行。
使用GET请求经常发生查询字符串的格式问题。查询字符串中的每个参数的名称和值都必须使用encodeURIComponnt()进行编码，然后才能放到URL末尾，每个参数之间都必须由&分隔
例如：
var xhr = new XMLHttpRequest()；
function addURLParam(url,name,value){
url += (url.indexOf("?")==-1 ? "?":"&");
url += encodeURIComponent(name) +"="+ encodeURIComponent(value);
return url;
}
var url = addURLParam("example.php","keyword","&酒店");
xhr.open("get",url);
首先检查url是否存在问号(以确定是否已经有参数存在)，如果没有则添加问号，如果有则添加&
传入的参数中含有“&”，因此必须进行url编码。
POST请求：
通常用于向服务器发送应该被保存的数据。
xhr.open("post","example.php",true);
"true"代表是否发送异步请求
4.js数据类型有哪些？如何准确的检测类型？
有五种简单数据类型（也称基本数据类型）： Undefined、Null、Boolean、Number和String还有一种复杂数据类型： Object
检测数据类型：typeof操作符
使用typeof可能会返回下列字符串结果：
"undefined"：这个值未定义
"boolean":这个值是布尔值
"string":这个值是字符串
"number"：这个值是数值
"object"：这个值是对象或null;
"function":这个值是函数
注意：typeof(null)返回Object,因为null被认为是一个空的对象引用。
和instanceof的区分：
在检测基本数据类型时，使用typeof是非常方便的，但是在检测复杂类型例如Object时，我们或许并不关心它是不是一个对象，我们关心的是它是一个什么对象类型
如：
var person = new Object();
var color = new Array();
console.log(person instanceof Object)//person是一个Object嘛？
console.log(color instanceof Array)//person是一个Array嘛？
console.log(color instanceof Array)//person是一个Array嘛？