前端面试题

Ajax优缺点

• 优点

1. 页面无刷新
2. 异步通信，更加快速响应
3. 按需取数据，减少冗余请求

• 缺点

1. 安全问题，暴露与服务器交互细节
2. 对搜索引擎和SEO支持较弱

Ajax工作原理

通过XMLHttpRequest对象来向服务器发送异步请求，获取数据更新页面

跨域解决办法

只要协议，域名，端口有任何一个的不同，就被当作是跨域
CORS跨域资源共享

1. 'Access-Control-Allow-Origin:*'//或指定域

2. JSONP

   • 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。
   • JSONP的原理：通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。（即用JavaScript动态加载一个script文件，同时定义一个callback函数给script执行而已。）
   • JSONP的优缺点：
     JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

     JSONP的缺点是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

3. 浏览器允许通过设置document.domain共享 Cookie或者处理iframe
   如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。如果两个窗口一级域名相同，只是二级域名不同，那么document.domain属性，就可以规避同源政策，拿到DOM。(或者服务器也可以对cookie进行设置)

   document.domain = 'example.com'
   //现在，A网页通过脚本设置一个 Cookie
   document.cookie = "test1=hello";
   //B网页就可以读到这个 Cookie
   var allCookie = document.cookie;
   或
   
   Set\-Cookie: key=value; domain=.example.com; path=/
   
   //这样的话，二级域名和三级域名不用做任何设置，都可以读取这个Cookie。
   
   

4. window.name
   在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name
   window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量
   在a.html页面中使用一个隐藏的iframe来充当一个中间人角色，由iframe去获取b.html的数据，然后a.html再去得到iframe获取到的数据

5. HTML5的window.postMessage

   <iframe id="frame1" src="http://127.0.0.1/JSONP/b.html" frameborder="1"></iframe>
   document.getElementById('frame1').onload = function(){
       var win = document.getElementById('frame1').contentWindow;
       win.postMessage("我是来自a页面的","http://127.0.0.1/JSONP/b.html")
   }
   
   window.onmessage = function(e){
   e = e || event;
   console.log(e.data);//我是来自a页面的
   }
   
   window.opener.postMessage('我是来自b页面的', 'http://a.com');
   //父窗口和子窗口都可以通过message事件，监听对方的消息。
   

6. websocket(同源策略对web sockets不适用)
7. 图像ping
8. 片段识别符
   父窗口可以把信息，写入子窗口的片段标识符（URL的#号后面的部分）
9. nginx反向代理

10. webpack-dev-server反向代理

    其他详见-链接