2014 百度前端二面
今天上午去了二面，整体自我感觉还行，但后来又有大神告诉我，自己的感觉和面试官的感觉是不一样的，我心里又没底了。
不管怎样？ 如果这次失败，我就真的要结束自己的前端生涯了，虽然我是那么的喜欢前端，也是那么的希望可以通过自己的努力达到“七月前端”等牛人的水准。但是，工作后，肯定要先专于一样了，念书时，我可以做前端，做后台，做android，写c++,java,c#,.net,python，工作后，希望从事的那方面做到自己的最好。
昨晚收到了华为邀请今晚参加签约座谈会的通知，今天听说是要直接签三方，国内我认为互联网做的最好的是百度，物联网做的最好的是华为，我肯定是要去其中一家的（比较倾向于百度，毕竟是做自己最喜欢的事情，感觉是不一样的。）明后天签三方，我尽量晚去，只希望百度能有个自己期望的结果。
今天面试的也是位哥哥，很帅，笑起来很好看。目前总共就面了华为和百度两家，华为的面试官都是叔叔级别的，百度的都是帅哥哥级别的。
大致题目回忆如下：
1 介绍自己做过的项目：
首先给哥哥看了下自己做的网站和Html5 APP（算是圆了昨天的“遗愿”），碰巧那位哥哥也参加了百度机器知我心大赛，好巧。他就看了看，也没有细问，因为我做的那网站肯定水平不及百度的。。
2 Ajax 原生js实现：
开始想都没想，因为ajax用的太多了，直接就把$.ajax(){....}一通说了出来，哥哥问：你不是经常用原生js写代码的么，我才发现，因为Jquery封装的确实比较好，平时都用它了，还真没有想过写原生的，我就说了个 try new XMLHttpreuqest = {...} 事实证明，我们学东西，不只要学会使用它，这只是一线IT民工做的东西，更要深究其原理，以后不管学什么都要这样！再来深入复习一下：
转自(http://www.cnblogs.com/waynechan/archive/2013/03/07/2947080.html);
什么是Ajax
我们要使用某些技术来实现一些功能的时候，势必要了解这项技术，Ajax这东西其实不是新技术，而是整个多项web开发技术而形成的，Ajax(Asynchoronous JavaScript and XML)即异步Javascript和XML，指一种创建交互式应用的网页开发技术有机的使用一系列相关的技术：
(1)Web标准XHTML+CSS的表示；
(2)使用DOM进行动态显示及交互；
(3)使用XML和XSLT进行数据交换和相关操作；
(4)使用XMLHttpRequest（异步对象）进行异步数据查询，检索；
普通网页请求方式和Ajax请求方式的区别
我们简单了解到Ajax是怎么一回事之后，那为什么要使用Ajax呢？与普通网页的请求方式又有什么区别呢？我们普通网页请求的方式，当我们点击网页上的按钮，或者其他方式请求到服务器的时候，在客户端浏览器这边是处于空白不可操作的状态，因为浏览器要忙着帮我们请求服务器，所以，这会让用户很不好的用户体验了，以Ajax请求方式在客户端浏览器这边会有一个异步对象(XMLHttpRequest)帮我们做请求服务器的工作，至于用户依然可以操作浏览器。
我们来一个比喻吧：当你在宿舍打Dota的时候，你肚子饿了，如果以普通网页请求的方式是，你跑去饭堂吃饭，所以这盘游戏就中止在这里了，如果以Ajax的方式去打饭呢？你就需要一个异步对象XMLHttpRequest,你宿舍的同学就是这个异步对象了，你呼唤他取饭堂帮你打饭，但是你依然可以继续你的Dota。
图片：
普通网页请求回执过程：
http://images.cnitblog.com/blog/257851/201303/06223247-47861ace1e994eaa961b32b6f8eec77a.png
AJAX异步请求过程
http://images.cnitblog.com/blog/257851/201303/06223304-6aec940de558425c87ed50401d83c702.png
普通网页请求模式是由浏览器请求服务器，所以当请求过程服务器处理的时候，浏览器这边无法进行其他操作，页面是刷新一次的，而使用Ajax，则将跟服务器打交道的事情交给了Ajax引擎，浏览器与用户交互不受影响！
开始Ajax之旅：XMLHttpRequest
创建XMLHttpRequest
不同浏览器以及IE浏览器不同版本创建XMLHttpRequest的方法都不同，我们可以使用try...catch的方式来创建适合不同浏览器的对象；你只需知道当我们为某一类浏览器创建异步对象时，如果失败catch到异常就换另一种方法来创建，直到为当前浏览器创建到异步对象XMLHttpRequest
function CreateXmlHttp()
{
var xhrobj = false;
try{
xhrobj = new ActiveXObject("Msxml12.XMLHTTP");//ie msxml3.0+
}catch(e)
{
try{
xhrobj = new ActiveXobject("Microsoft.XMLHTTP");//ie msxml 2.6
}catch(e2)
{
xhrobj = false;
}
}
if(!xhrobj && typeof XMLHttpRequest != 'undefined')
{
xhrobj = new XMLHttpRequest();
}
return xhrobj;
}
var xhr = CreateXmlHttp();
window.onload = function()
{
Get();
}
function Get()
{
//1 设置请求方式，目标，是否异步
//1.1 Get方式
xhr.open("GET","GetAreaByAjax.ashx?isAsia=1",true);
==========如果是post方式，请按下面的进行设置=======
//1.2 post方式，如果是Post方式，还需要其他一些设置==
xhr.open("POST"，"GetAreaByAjax.aspx",true);
//1.2.1 设置HTTP的输出内容类型为：application//x-www-form-urlencoded
xhr.setRequestHreader("Content-Type","application/x-www-form-urlencoded");
//1.2.2 设置浏览器不使用缓存，服务器不从缓存中找，重新执行代码，而且服务器返回给浏览器的时候，告诉浏览器也不要保存缓存。
xhr.setRequestHear("If-Modefied-Since","0");
//2 设置回调函数
xhr.onreadystatechange = watching; //watching是方法名
//3 发送请求
xhr.send(null);
xhr.send("isAjax=1&na=123");
}
//回调函数
function wacthing()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
{
var res = xhr.reponseText; //获取服务器返回的字符串
alert(res);
}
}
}
这里附加Javascript操作DOM的技术应用点：
(1) Ajax评论的时候，脚本操作Dom增加 Tabel节点，这样子就省去了从服务器查询绑定的过程了，高效，用户体验又好，以下代码写在回调函数中
var res = xhr.responseText; //获得从服务器返回的字符串
var plT = document.getElementById("plTable");
var newRow = plT.insertRow(plT.rows.length-1); //在表格的最后一行新增一行
var nTd1 = newRow.insertCell();
var nTd2 = newRow.insertCell();
nTd1.innerHTML = "ID";
nTd2.innerHTML = document.getElementById("txtPinglun").value;
3 给定一棵二叉树，写出：前序，后序，中序遍历。（这个简单，当时还直接开始写代码，被哥哥发现了，说不用 - -！）
4 DOM树及DOM树的操作 （这个没答上来，平时确实没用过）
转自：http://developer.51cto.com/art/201009/228303.htm
你对HTML DOM树的概念是否了解，这里和大家分享一下，DOM是文档对象模型(Document Object Model），是基于浏览器编程的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，单纯的 Javascript要结合DOM才能做DHTML编程，才能做出漂亮的效果、应用于WEB。因此，必须要对DOM有一定的认识，才能把Javascript应用于WEB，或你的RIA应用当中，因为 DHTML本质上就是操作DOM树。
DOM树
DOM树的根统一为文档根—document，DOM既然是树状结构，那么他们自然有如下的几种关系:
◆根结点(document)
◆父结点(parentNode)
◆子结点(childNodes)
兄弟结点兄弟结点
(sibling)(sibling)
例子：
假设网页的HTML如下
字号字号
<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();
Img.src = isrc;
Img.onload = function ()
{
document.body.appendChild(Img);
}
}
//-->
</script>
当包含上述代码的页面打开时并不载入 “tt.jpg” ，当点击按钮时候才载入。当载入完成后触发onload事件显示到页面上。如果你是第一次加载 “tt.jpg" 这张图片的话，运行正常。点击按钮加载并显示一张图片，如果重复点击会怎么样呢？
IE、Opera中，除了第一次加载 图片时候显示正常，之后再点击就没有反应了，刷新也一样。难道它们只触发一次 ”onload“ 事件？是缓存机制？
FF、Chrom中，每点击一次加载一张该图片。
稍微修改下：
<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();
Img.onload = function ()
{
document.body.appendChild(Img);
}
Img.src = isrc;
}
//-->
</script>
运行后发现，奇怪的事情发生了。所有的浏览器都一致了，都是每点击一次加载一张图片。这又是什么原因？由此可以见 IE、Opera 执行过程中并不是只触发一次 onload 事件！
联想一下 Image 对象的一些属性看看，complete、readyState(IE专属值[uninitialized,complete]) （为防止缓存影响效果请更换图片名称！）
<input type="button" name="" value="complete" onclick='alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)' />
<input type="button" name="" value="载入图片" onclick="addImg('mtm.jpg')" />
<script type="text/javascript">
<!--
var Img;
function addImg(isrc)
{
Img = new Image();
//Img.src = isrc;
Img.onload = function ()
{
alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)
document.body.appendChild(Img);
}
Img.src = isrc;
}
//-->
</script>
经过以上测试，可以看出一些不同点，对于 complete 属性来讲，IE是根据图片是否显示过来判断，就是说当加载的图片显示出来后，complete 属性的值才为 true ，否则一直是 false ，和以前是否加载过该张图片没有关系，即和缓存没有关系！但是其它浏览器表现出来的确不一样，只要以前加载过该图，浏览器有缓存，complete 就为 true ，这和IE的 readyState 属性的表现一致！
至此，可以肯定的是所有的浏览器都会缓存图片！可是上面的问题到底是什么原因导致的呢？
众所周知，从缓存里加载东西的速度是很快的，那么在
...
Img.src = isrc;
Img.onload = ...
...
的过程中，难道 IE、Opera 加载的速度快到，来不及追加事件？
这回加载一张根本不存在的图片看看效果：
<input type="button" name="" value="complete" onclick='alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)' />
<input type="button" name="" value="载入图片" onclick="addImg('mtmttyt.jpg')" />
<script type="text/javascript">
<!--
var Imgttmt;
function addImg(isrc)
{
Imgttmt = new Image();
Imgttmt.src = isrc;
alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)
Imgttmt.onload = function ()
{
alert("impossible")
}
}
//-->
</script>
可以肯定的是所有浏览器都不触发 onload 事件。从是否缓存或已经加载过图片的角度讲，IE、Opera表现正常，complete 始终为 false ；IE的 readyState 始终为uninitialized 。令人疑惑的是FF，其中 Imgttmt.complete 的值一直是 true ；更令人困惑的是 Chrom，它是在最初 new Imgttmt() 的时候 Imgttmt.complete 值为 false。而之后 Imgttmt.complete 值就一直为 true 了！如果换一张从来没有加载过的图片，FF和Chrom 的行为就一致了，都是一开始加载时， Imgttmt.complete 值为false， 之后为 true！
测试的过程中还发现源码天空，脚本的执行顺序的确会影响到类似于 onload 等事件的追加，如果在其显示后在追加事件就没有什么实际意义了！基于 javascript 这种解释性语言的特性，在追加事件的时候一定要注意把事件追加在触发该事件的句柄之前。
