专题复习八、闭包及js跨域

• 何为闭包
  闭包解决的是函数外部访问函数内部变量的问题，举例说明：
  function xxx (){
  var user = {
  name:'frank',
  age:20}
  }
  假设现在想访问函数内部user的相关数据，怎么办？有两种实现方法：
  ①绑定全局变量上
  function xxx (){
  var user = {
  name:'frank',
  age:20
  }
  window.usergetter ={
  namegetter:function(){
  return user.name
  },
  agegetter:function(){
  return user.age
  },
  old:function(){
  user.age+=1
  }
  }
  }
  （window.usergetter是可以访问到function xxx的变量的，绑定到全局变量中，这样其他函数也可以访问了。如下面的yyy函数。在这里window.usergetter就叫做闭包，它是沟通外部与内部的桥梁）
  function yyy(){
  window.usergetter.namegetter()
  window.usergetter.agegetter()
  }
  ②不使用全局变量
  function xxx (){
  var user={
  name:'frank'
  age:20
  }
  return function (){
  user.age +=1
  }(精华之笔，意味着xxx的返回值是一个函数且这个函数里有xxx里面的变量)
  }
  如何拿到变量
  var fn = xxx() fn.call()
• 跨域
  跨域就是指一个域名的网页去请求另一个域名的资源。只要协议、域名、端口有任何一个不同就当做是跨域。浏览器一般不对script、img等进行跨域限制，所以我们有机会通过script实现跨域访问
  跨域一般有一下方法：
  1、jsonp
  假设现在服务器代码如下：
  case 'main.js':
  var number = query.data（拿到查询参数）
  response.end('alert('+number+')')
  我们访问路径：main.js?data=1
  控制台打出：alert（1）zh
  现在假设我们不改后面改前面，代码如下：
  case 'main.js':
  var functionName = query.callback（拿到查询参数）
  response.end('functionName'+'(1)')
  我们访问路径：main.js?callback=xxx
  控制台打出：xxx（1）,这就是jsonp，就是你callback后面值是什么，我函数名就是什么
  那怎么利用jsonp实现跨域访问呢。假设现在'(1)'变成重要的信息，例如：‘我的密码是yyy’
  现在我一个域名想要获取你的main.js文件
  服务器代码：
  swich(path){
  case 'index.html'
  response.end(')
  break;
  }
  打开这个域名下的index.html，发现它请求了http://localhost:8888/main.js?callback=ccc路径下的文件，且在控制台打出ccc(‘我的密码是yyy’).这样的话，我们就拿到了另一个js的数据，我们只需要重新定义ccc函数就可以实现将相关信息输入到页面中。如：function ccc(x){document.write(x)}.
  ccc可以自己定义，这样就是二者的桥梁。jsonp就是动态js（callback约定），把数据放到callback里面
  2、document.domain
  使用条件：①有其他页面window对象引用 ②二级域名相同 ③协议相同 ④端口相同
  例如：http://wenku.baidu.con http://zhidao.baidu.com（二级域名都是baidu.com）
  原理：把二者的document.domain都设置为同一个值，表明他们需要协作，例如本例中可以都设置为baidu.com，这样用一个页面的window对象操作另一个页面了
  上述方法不常用，最常用的是把其中一个页面通过iframe嵌套在另一个页面中，设置二者的document.domain相同，这样这个页面就对iframe有掌控权了
  3、window.name
  原理：打开一个页面设置其window.name，页面跳转后，新页面的window.name不会发生改变，利用这个原理，在window.name存一些想要的数据，通过iframe交互。例：
  var iframe =document.getElementById('iframe');
  var data='';
  iframe.onload = function(){
  data = iframe.contentwindow.name;（获取name里的内容）
  iframe.src='about:blank';（跳转空页面，保证同源）
  }
  4、[HTML5]postMessage
  参考链接：postMessage
  5、CORS
  浏览器一旦发现ajax请求是跨源，就会自动添加一些附加的头信息，用来与服务器判别交互。实现CORS，关键是服务器，只要服务器实现CORS接口，就可以跨源通信
  跨源通信一般分为简单请求和费简单请求，区别在于请求方法（head、get、post）及头信息的限制，非简单请求会比简单请求多一个预检请求流程
  Origin(浏览器，源) Access-Content-Allow-Origin（服务器：响应）
  与jsonp比较更强大，因为jsonp只支持get请求，而CORS支持所有类型的请求，但是CORS会存在安全问题
  参考链接:CORS