web前端面试题合辑（四）

Ajax/ ES6/Http/安全等知识

• Ajax是什么? 如何创建一个Ajax？
  • Ajax的全称：Asynchronous Javascript And XML。
  • Ajax是一种用于创建快速动态网页的技术, 异步的JavaScript和XML

  所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

  • 创建
    (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
    (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
    (3)设置响应HTTP请求状态变化的函数
    (4)发送HTTP请求
    (5)获取异步调用返回的数据
    (6)使用JavaScript和DOM实现局部刷新
• 手写一个ajax

function creatXhr() {
      var xhr;
      if(window.XMLHttpRequest){ //code for IE7+,Firefox,Chrome,Opera,Safari
          xhr = new XMLHttpRequest();
      } else {
          xhr = new ActiveXObject("Microsoft.XMLHttp");
      }
      return xhr;
  }
  let xhr = creatXhr();
  xhr.onreadystatechange = function () {
      if(xhr.readyState == 4){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
            alert(xhr.responseText);
        }else {
          alert("Request was unsuccessful:" + xhr.status)
        }
        
      } 
  }
  xhr.open('POST',url,true);
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//请求
  xhr.send();

• Ajax的优缺点
  • 优点：
    1.减轻服务器的负担，Ajax一般只从服务器获取只需要的数据。
    2.无需刷新整个页面, 减少用户等待时间。
    3.更好的客户体验，可以将一些服务器的工作转移到客户端完成，节约网络资源，提高用户体验。
    4.基于标准化的对象，不需要安装特定的插件, 浏览器都能支持Ajax
    5.彻底将页面与数据分离。
  • 缺点：
    1.没有浏览历史, 不能回退
    2.存在跨域请求问题
    3.对搜索引擎支持比较弱
    4.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中,不过这些都有相关方法解决
• Ajax 解决浏览器缓存问题？

1. 在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
2. 在ajax发送请求前加上anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
3. 在URL后面加上一个随机数： "fresh=" + Math.random();。
4. 在URL后面加上时间戳："nowtime=" + new Date().getTime();。
5. 如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

• 同步和异步的区别?

同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.

• 同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。

• 异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

• 如何解决跨域问题?
  jsonp、CORS(跨域资源共享)、iframe、window.name、window.postMessage、服务器上设置代理页面

• 怎么理解不同源

  • 协议名不同
  • 域名不同
  • 端口号不同

• 详细说说jsonp

基本思想

• 网页通过添加一个，
  保存后最终存储的会是 <script>window.location.href="http://www.baidu.com"</script>
  在展现时浏览器会对这些字符转换成文本内容显示，而不是一段可执行的代码。

• 什么是CSRF攻击？如何防御？
  
  • Cross-Site Request Forgery: 跨站请求伪造

• 原理：攻击者盗用你的身份，以你的名义发送恶意请求。CSRF能做的事情包括：以你的名义发邮件，发消息，盗取你的账号，甚至购买商品，虚拟货币转账…
  造成的问题包括：个人隐私的泄露以及财产安全
• CSRF攻击是源于web的隐式身份验证机制！web 的身份验证机制虽然可以保证一个请求是来自于某个用户的浏览器，但是却无法保证该请求是用户批准发送的！

• 如何防御呢？
• CSRF的防御可以从服务端和客户端两方面着手，防御效果是从服务端着手效果比较好，现在一般的CSRF防御也都在服务端进行。

1. Cookie Hashing(所有表单都包含同一个伪随机值)
   这可能是最简单的解决方案了，因为攻击者不能获得第三方Cookie(理论上)，所以表单中的数据也就构造失败了:>
   构造加密的Cookie信息
   在表单里增加Hash值，以认证这确实是用户发送的请求
   然后在服务端里进行Hash值验证
2. 验证码
   这个方案的思路是：每次用户提交都需要用户在表单中填写一个图片上的随机字符串，这个方案可以完全解决CSRF，但易用性方面似乎不太好还有听闻是验证码图片的使用涉及了一个被称为MHTML的Bug，可能在某些版本的微软IE中受影响。
3. One-Time Tokens （不同的表单包含一个不同的伪随机值）
   在实现One-Time Tokens时，需要注意一点：就是“并行会话的兼容”。如果用户在一个站点上同时打开了两个不同的表单，CSRF保护措施不应该影响到他对任何表单的提交。考虑一下如果每次表单被装入时站点生成一个伪随机值来覆盖以前的伪随机值将会发生什么情况：用户只能成功地提交他最后打开的表单，因为所有其他的表单都含有非法的伪随机值。必须小心操作以确保CSRF保护措施不会影响选项卡式的浏览或者利用多个浏览器窗口浏览一个站点。