原理题怎么答?我带你们答。
回答流程如下:
如果是英文词汇就先翻译成中文一句话描述该技术的用途描述该技术的核心概念或运作流程口述该技术的代码书写思路该技术的优点该技术的缺点如何弥补缺点教完了,接下来实战:
请问AJAX的原理是什么?
AJAX就是异步的JS和XML的缩写,目前我们一般用JSON代替XML。AJAX主要用于在不刷新页面的情况下向浏览器发起请求并接受响应,最后局部更新页面。该技术最核心概念是XMLHttpRequest对象,该对象可发起HTTP请求,我们可以监听其readystate的变化获得响应。具体代码是这样的blablabla优点刚才说了,无刷新请求。缺点是被浏览器限制不能跨域。想要跨越就要用到JSONP或CORS了。
接下来面试官可能问JSONP的原理,解题思路如下:JSONP是jsonwithpadding的缩写该技术通过script不受同源策略限制来达到跨域的目的该技术核心是前端构造script发起get请求,后端将数据放到js回调里,前端接受响应后执行回调拿到数据具体代码是blablabla优点是通过简单的约定就能跨域缺点是不支持get以外的动词,而且存在csrf风险解决办法是CORS或csrftoken你看,按照我的步骤就能得满分。
面试官可能还会再问CORS的原理,答题示例:CORS是跨域资源共享的缩写该技术通过在目标域名返回CORS响应头来达到获取该域名的数据的目的改技术核心就是设置responseheader,分为简单请求和复杂请求两种简单请求只需要设置Access-Control-Allow-Origin:目标源即可,复杂请求则分两步走,第一步是浏览器发起OPTIONS请求,第二步才是真实请求。
OPTIONS请求需要把服务器支持的操作通过响应头来表明,如Access-Control-Allow-Methods:POST,GET,OPTIONS,另外一个重要的响应头是Access-Control-Allow-Credentials:true用来表明是否接受请求中的Cookie。blablabla优点是通过简单的配置就能跨域缺点是某些古老浏览器不支持CORS或不支持Credentials解决办法是用JSONP或P3P等技术又满分了。