今日两道面试题

1. 关于this的面试题

function func(){
　　//这里面的this，代指window
}
func() // window.func()
---------------------------------------------------
function Func(){
　　this.name = 'alex'; //this代指obj，因为Func是一个类
}
obj = new Func()
console.log(obj.name)
---------------------------------------------------
function Func(){
　　thia.name = 'alex' // this代指obj
　　this.show = function(){
　　　　console.log(this); 
　　}
}
obj = new Func();
obj.show();
---------------------------------------------------
userInfo = {
　　name:'alex',
　　age:19,
　　show:function(){
　　　　console.log(this) //this代指userInfo
　　}
}
userInfo.show()
---------------------------------------------------
userInfo = {
　　name:'alex',
　　age:19,
　　show:function(){
　　　　console.log(this); //this代指userInfo
　　　　(function(){
　　　　　　console.log(this);//this代指window
　　　　})()
　　}
}
---------------------------------------------------
function Func(){
　　this.name = 'alex'; //this代指obj
　　this.show = function(){
　　　　console.log(this); //obj
　　　　(function(){
　　　　　　console.log(this); // this代指window
　　　　})()
　　}
}
---------------------------------------------------
userInfo = {
　　name:'alex',
　　age:18,
　　show:function(){
　　　　console.log(this); // userInfo
　　　　var that = this 
　　　　(function(){
　　　　　　console.log(that); // userInfo
　　　　})()
　　}
}

2. JSONP和CORS

由于浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。
注意：
　　1.同源策略是浏览器限制的
　　2.浏览器同源策略并不是对所有请求制约：
　　　　制约：XmlHttpresponse
　　　　不制约：img/iframe/script等具有src属性的标签

JSONP实现跨域请求：
　　JSONP利用script标签的src属性解决跨域问题，因为浏览器允许script标签跨域

客户端：
<script>

    $.ajax({
　　　　url: 不同域名的url，
　　　　type: 'GET',
　　　　dataType: 'JSONP',
　　　　jsonp: callback,  ---------> 作用：在请求的url的后面加上?callback='list'，list作为对方的相应数据的包裹函数：
　　　　　　　　　　　　　　　　　　　　　　　　-------> HttpResponse(list(响应数据))
　　　　jsonpCallback: 'list'
　　　　
    })

</script>

请求数据的本质： 看似用了ajax请求数据，其实没有。如果把url放到HTML中的img标签、script标签，iframe标签的中的src中就不会被浏览器的同源访问限制住。所以基于这种思想，就有了JSONP的的作用本质。

在客户端做了两件事：
　　1.创建了一个script标签：<script src='不同域名的url'></script>
　　2.创建了一个函数：
　　　　<script>
　　　　　　function list(args){
　　　　　　　　对请求到的args进行处理；
　　　　　　}
　　　　</script>
对方的返回数据也必须符合一个规则：
　　func = request.GET.get('callback')
　　HttpResponse(func(数据))

注意：
　　JSONP只能发送GET请求，因为它的本质是把一个url放到src中，发送到对方，请求数据,而不能发送数据。

CORE:

随着技术的发展，现在的浏览器可以支持主动设置从而允许跨域请求，即：跨域资源共享（CORS），其本质是设置响应头，使得浏览器允许跨域请求。

简单请求and非简单请求：

条件：
　　1、请求方式：HEAD，GET、POST
　　2、请求头信息：
　　　　Accept

　　　　Accept-Language

        Content-Language

        Last-Event-ID

        Content-Type 对应的值是以下三个中的任意一个

                                application/x-www-form-urlencoded

                                multipart/form-data

                                text/plain

注意：同时满足以上两个条件时，是简单请求，否则是非简单请求

 

简单请求和非简单请求的区别：

　　简单请求：一次请求

　　非简单请求：两次请求，在发送数据之前用于做“预检”，只有“预检”通过之后才再发送一次请求用于数据传输。

 

关于“预检”：

　　- 请求方式：OPTION

　　-“预检”其实是做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的信息

　　-如何“预检”：

　　　　1.如果复杂请求时PUT等请求，则服务器需要设置允许请求，如果服务器没有设置，则“预检”不会通过。

　　　　　　Access-Control-Request-Method

　　　　2.如果复杂请求设置了请求头，则服务器需要设置允许某请求头，否则“预检”不通过。

　　　　　　Access-Control-Request-Headers

 

基于CORS实现Ajax请求：

1. 支持跨域，简单请求(Ajax请求，可以发送数据)
　　服务器设置响应头：Access-Control-Allow-Origin = ‘域名’或‘*’
　　　　客户端：
　　　　　　　$.ajax({
                url: "http://c2.com:8000/test/",
                type: 'GET',
                dataType: 'text',
                success: function(data, statusText, xmlHttpRequest){
                    console.log(data);
                }
            })
　　　　
　　　　服务端：
　　　　　　只需要设置响应头：
　　　　　　response = HttpResponse(数据)
　　　　　　response['Access-Control-Allow-Origin'] = "客户端的域名"   -----> 意思是只能指定的客户端可以请求，其它的不用。
　　　　　　response['Access-Control-Allow-Origin'] = "*"  -----> 所有的请求都可以
　　　　　　return response
　　　　　　
2. 支持跨域，复杂请求
　　由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真是数据。
　　　　1.“预检”请求时，允许请求方式则需要服务器设置响应头：Access-Control-Request-Method
　　　　2.“预检”请求时，允许请求头则需要服务器设置响应头：Access-Control-Request-Headers
　　　　3.“预检”缓存时间，服务器设置响应头：Access-Control-Max-Age

　　
　　客户端：
　　　　　　$.ajax({
                url: "http://c2.com:8000/test/",
                type: 'PUT',
                dataType: 'text',
                headers: {'k1': 'v1'},
                success: function(data, statusText, xmlHttpRequest){
                    console.log(data);
                }
            })
　　服务器端：
　　　if request.method == "OPTIONS":
　　　　# 预检
　　　　response = HttpResponse（）
　　　　response['Access-Control-Allow-Origin'] = "*"  -----> 允许所有的客户端请求
　　　　response['Access-Control-Allow-Method'] = "PUT" ---->"预检"请求时，允许请求方式
　　　　response['Access-Control-Allow-Header'] = "xxx" ---->"预检"请求时，允许请求头

　　　　response['Access-Control-Allow-Header'] = "xxx" ---->告诉请求端可以xxx请求头
　　　　return response
　　elif request.method == "PUT":
　　　　　response = HttpResponse(数据)
　　　　　response['Access-Control-Allow-Origin'] = "*"
　　　　  return response