码迷,mamicode.com
首页 > Web开发 > 详细

前端面试题整理(js)

时间:2015-10-20 21:04:34      阅读:331      评论:0      收藏:0      [点我收藏+]

标签:

1、HTTP协议的状态消息都有哪些?

HTTP状态码是什么

Web服务器用来告诉客户端,发生了什么事。

状态码分类:

1**:信息提示。请求收到,继续处理
2**:成功。操作成功收到,分析、接受
3**:重定向。完成此请求必须进一步处理
4**:客户端错误。请求包含一个错误语法或不能完成
5**:服务器错误。服务器执行一个完全有效请求失败

状态码详解:

100(继续):服务器收到的请求不完整,但服务器没有拒绝请求,客户端应重新发送一个完整的请求。

101(切换协议):服务器改用别的协议了

200(成功):服务器已成功处理了请求

201(已创建):请求成功并且服务器创建了新的资源

202(已接受): 服务器已接受请求,但尚未处理

203 (非授权信息) :服务器已成功处理了请求,但返回的信息可能来自另一来源。

204 (无内容): 服务器成功处理了请求,但没有返回任何内容。

205 (重置内容): 服务器成功处理了请求,但没有返回任何内容。

206 (部分内容): 服务器成功处理了部分 GET 请求。

300 (多种选择): 针对请求,服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作,或提供操作列表供请求者选择。

301 (永久移动): 请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。

302 (临时移动): 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。

303 (查看其他位置): 请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码。

304 (未修改): 自从上次请求后,请求的网页未修改过。 服务器返回此响应时,不会返回网页内容。

305 (使用代理): 请求者只能使用代理访问请求的网页。 如果服务器返回此响应,还表示请求者应使用代理。

307 (临时重定向): 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。

400 (错误请求): 服务器不理解请求的语法。 

401 (未授权): 请求要求身份验证。 对于需要登录的网页,服务器可能返回此响应。

403 (禁止): 服务器拒绝请求。

404 (未找到): 服务器找不到请求的网页。

405 (方法禁用): 禁用请求中指定的方法。

406 (不接受): 无法使用请求的内容特性响应请求的网页。

407 (需要代理授权): 此状态代码与 401(未授权)类似,但指定请求者应当授权使用代理。

408 (请求超时): 服务器等候请求时发生超时。

409 (冲突): 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。

410 (已删除): 如果请求的资源已永久删除,服务器就会返回此响应。

411 (需要有效长度): 服务器不接受不含有效内容长度标头字段的请求。

412 (未满足前提条件): 服务器未满足请求者在请求中设置的其中一个前提条件。

413 (请求实体过大): 服务器无法处理请求,因为请求实体过大,超出服务器的处理能力。

414 (请求的 URI 过长): 请求的 URI(通常为网址)过长,服务器无法处理。

415 (不支持的媒体类型): 请求的格式不受请求页面的支持。

416 (请求范围不符合要求): 如果页面无法提供请求的范围,则服务器会返回此状态代码。

417 (未满足期望值): 服务器未满足"期望"请求标头字段的要求。

500 (服务器内部错误) 服务器遇到错误,无法完成请求。 

501 (尚未实施) 服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。

502 (错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。

503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。

504 (网关超时) 服务器作为网关或代理,但是没有及时从上游服务器收到请求。

505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。

常见的状态码(只要记住这些就可以了):

200——服务器已成功处理了请求

301——请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。

404——服务器找不到请求的网页。

500——服务器遇到错误,无法完成请求。

503——服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。

504——服务器作为网关或代理,但是没有及时从上游服务器收到请求。

2、AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

AJAX的工作原理相当于在用户和服务器之间加了一个中间层,使用户操作与服务器相应异步化。并不是所有的用户请求都提交给服务器,像一些数据验证和数据处理等都交给AJAX引擎自己来做,只有确定需要从服务器读取新数据时再由AJAX引擎代为向服务器提交请求。

技术分享

跨域问题,可以实用jquery的jsonp来处理:

$(document).ready(function(){
   var url=‘http://localhost:8080/WorkGroupManagment/open/getGroupById"
       +"?id=1&callback=?;
   $.ajax({
     url:url,
     dataType:‘jsonp‘,//重点
     processData: false, 
     type:‘get‘,
     success:function(data){
       alert(data.name);
     },
     error:function(XMLHttpRequest, textStatus, errorThrown) {
       alert(XMLHttpRequest.status);
       alert(XMLHttpRequest.readyState);
       alert(textStatus);
     }});
   });

 

3、同步和异步的区别? 

举个例子:普通B/S模式(同步)——AJAX技术(异步)

同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

异步: 请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕
 

4、简述JavaScript封装。

JS封装就是尽量把使用的方式简单化,内部逻辑和使用解耦。通俗的说就是使用的时候只需要知道参数和返回值,其他条件尽量不要使用人员进行设置。

函数形式:

function taojiaqu(a,b){
    //内部对a,b进行处理
}

对象形式:

function taojiaqu(a,b){
    this.x=a;
    this.y=b;
}
var tjq = new taojiaqu(1,2);//通过面向对象的方式
alert(tjq.x)

闭包形式:

function tjq(a,b){
    var k = 1;
    return function tt(){
        k++;
        return k;
    }
}
var u = kk(1,2);
u();//闭包实现累加 k=2
u();//闭包实现累加 k=3
alert(u());//弹出4

 

5、JavaScript继承。

对象冒充:

function tjq(username){
    this.username = username; 
    this.hello = function(){ 
        alert(this.username); 
    }
}
function taojiaqu(username,password){ 
    //通过以下3行实现将tjq的属性和方法追加到taojiaqu中,从而实现继承 
    //1:this.method是作为一个临时的属性,并且指向tjq所指向的对象, 
    //2:执行this.method方法,即执行tjq所指向的对象函数 
    //3:销毁this.method属性,即此时taojiaqu就已经拥有了tjq的所有属性和方法 
    this.method = tjq; 
    this.method(username);//最关键的一行 
    delete this.method; 

    this.password = password; 
    this.world = function(){ 
          alert(this.password); 
    } 
} 
var parent = new tjq("tjq"); 
var child = new taojiaqu("taojiaqu","123456"); 
parent.hello(); //弹出tjq
child.hello(); //弹出taojiaqu
child.world(); //弹出123456

call()方法方式

function tjq(username){
    this.username = username; 
    this.hello = function(){ 
        alert(this.username); 
    }
}
function taojiaqu(username,password){ 
    //语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
    //定义:调用一个对象的一个方法,以另一个对象替换当前对象。 
    tjq.call(this,username);

    this.password = password;
    this.world = function(){ 
          alert(this.password); 
    } 
} 
var parent = new tjq("tjq"); 
var child = new taojiaqu("taojiaqu","123456"); 
parent.hello(); //弹出tjq
child.hello(); //弹出taojiaqu
child.world(); //弹出123456

apply方法方式:

function tjq(username){
    this.username = username; 
    this.hello = function(){ 
        alert(this.username); 
    }
}
function taojiaqu(username,password){ 
    //语法:apply([thisObj[,argArray]]) 
    //定义:应用某一对象的一个方法,用另一个对象替换当前对象。
    //跟call基本一个意思,只是第二个参数必须是数组
    tjq.apply(this,[username]);

    this.password = password;
    this.world = function(){ 
          alert(this.password); 
    } 
} 
var parent = new tjq("tjq"); 
var child = new taojiaqu("taojiaqu","123456"); 
parent.hello(); //弹出tjq
child.hello(); //弹出taojiaqu
child.world(); //弹出123456

原型链方式:

function tjq(){}
tjq.prototype.username=‘taojiaqu‘;
tjq.prototype.sayUsername=function(){
    alert(this.username);
}
function taojiaqu(){}
taojiaqu.prototype=new tjq();//将tjq中将所有通过prototype追加的属性和方法都追加到taojiaqu,从而实现了继承
taojiaqu.prototype.password=‘123456‘;
taojiaqu.prototype.sayPassword=function(){
    alert(this.password);
}
var parent = new taojiaqu(); 
parent.sayUsername(); //弹出taojiaqu
parent.sayPassword(); //弹出123456

混合方式(原型链+call()):

function tjq(username){
    this.username=username;
}
tjq.prototype.sayUsername=function(){
    alert(this.username);
}
function taojiaqu(username){
    tjq.call(this,username);//将tjq属性继承过来
    this.password=‘123456‘;
    this.sayPassword=function(){
        alert(this.password);
    }
}
taojiaqu.prototype=new tjq();//将tjq原型链方法继承过来
var parent = new taojiaqu(‘taojiaqu‘); 
parent.sayUsername(); //弹出taojiaqu
parent.sayPassword(); //弹出123456

 

6、什么是闭包?

官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。闭包的特点:

1. 作为一个函数变量的一个引用,当函数返回时,其处于激活状态。
2. 一个闭包就是当一个函数返回时,一个没有释放资源的栈区。
简单的说,javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。
 
以下两端代码都能依次点击弹出0,1,2,3...
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js闭包</title>
    <style>
        *{margin: 0;padding: 0;}
        li{line-height: 30px;background: red;border-bottom: 1px solid #000}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>
<script>
    window.onload=function(){
        var olis=document.getElementsByTagName(‘li‘);
        for(var i=0;i<olis.length;i++){
            eventClick(olis,i);
        }
    }
    function eventClick(obj,i){
        return obj[i].onclick=function(){
            alert(i);
        }
    }

</script>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js闭包</title>
    <style>
        *{margin: 0;padding: 0;}
        li{line-height: 30px;background: red;border-bottom: 1px solid #000}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>
<script>
    window.onload=function(){
        var olis=document.getElementsByTagName(‘li‘);
        for(var i=0;i<olis.length;i++){
            (function(i){
                olis[i].onclick=function(){
                    alert(i);
                };
            })(i);
        }
    }
</script>

 由于闭包可以把变量参数存于内存当中,即使你跳转页面也还会存在,这就引发了内存泄漏,除非你关闭浏览器,它才会自动释放

前端面试题整理(js)

标签:

原文地址:http://www.cnblogs.com/taojiaqu/p/4895870.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!