目录
- 面试系列
- 内容介绍
- 1、Ajax 是什么? 如何创建一个Ajax?
- 2、同步和异步的区别?
- 3、如何解决跨域问题?
- 4、http状态码有那些?分别代表是什么意思?
- 5、一个页面从输入URL 到页面加载显示完成,这个过程中都发生了什么?(流程说的越详细越好)
- 6、请解释JSONP 的工作原理,以及它为什么不是真正的AJAX。
- 7、请解释一下JavaScript 的同源策略
- 8、为什么要有同源限制?
- 9、创建ajax过程
- 10、常见web安全及防护原理
- 11、HTTP和HTTPS
- 12、为什么HTTPS安全
- 13、GET和POST的区别,何时使用POST?
- 14、ajax的缺点和在IE下的问题?
- 15、说说你对Promise的理解
- 16、前端需要注意哪些SEO
- 17、web开发中会话跟踪的方法有哪些
- 18、什么是Ajax和JSON,它们的优缺点。
面试系列
后续更新分类将同步更新系列目录:
- 前端面试大全(序篇):https://blog.csdn.net/cainiaoyihao_/article/details/116518423
- 前端面试大全(HTML篇):https://blog.csdn.net/cainiaoyihao_/article/details/116519021
- 前端面试大全(CSS篇——1/2):https://blog.csdn.net/cainiaoyihao_/article/details/116521551
- 前端面试大全(CSS篇——2/2):https://blog.csdn.net/cainiaoyihao_/article/details/117020429
- 前端面试大全(Ajax篇):https://blog.csdn.net/cainiaoyihao_/article/details/116979060
- 前端面试大全(jQuery篇——含移动端常见问题):https://blog.csdn.net/cainiaoyihao_/article/details/117281709
- 前端面试大全(JavaScript篇——面试利器值得拥有!):https://blog.csdn.net/cainiaoyihao_/article/details/117355120
内容介绍
前端面试大全(Ajax篇)。
1、Ajax 是什么? 如何创建一个Ajax?
①、Ajax
ajax的全称:Asynchronous Javascript And XML。异步传输+js+xml。
②、异步
所谓异步,在这里简单地解释就是:向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果它自己会根据设定进行后续操作,与此同时,页面是不会发生整页刷新的,提高了用户体验
③、步骤
- 创建XMLHttpRequest对象,也就是创建一个异步调用对象
- 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
- 设置响应HTTP请求状态变化的函数
- 发送HTTP请求
- 获取异步调用返回的数据
- 使用JavaScript和DOM实现局部刷新
ajax是一种创建交互式网页的计算
2、同步和异步的区别?
同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性
①、同步
同步:浏览器访问服务器请求,用户看得到页面刷新,重新发请求,等请求完,页面刷新,新内容出现,用户看到新内容,进行下一步操作。
②、异步
异步:浏览器访问服务器请求,用户正常操作,浏览器后端进行请求。等请求完,页面不刷新,新内容也会出现,用户看到新内容。
3、如何解决跨域问题?
jsonp、iframe、window.name、window.postMessage、服务器上设置代理页面
4、http状态码有那些?分别代表是什么意思?
状态码 | 类型 | 说明 |
---|---|---|
100 | Continue | 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息 |
200 | OK | 正常返回信息 |
201 | Created | 请求成功并且服务器创建了新的资源 |
202 | Accepted | 服务器已接受请求,但尚未处理 |
301 | Moved Permanently | 请求的网页已永久移动到新位置。 |
302 | Found | 临时性重定向。 |
303 | See Other | 临时性重定向,且总是使用GET 请求新的URI。 |
304 | Not Modified | 自从上次请求后,请求的网页未修改过。 |
400 | Bad Request | 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。 |
401 | Unauthorized | 请求未授权。 |
403 | Forbidden | 禁止访问。 |
404 | Not Found | 找不到如何与URI 相匹配的资源。 |
500 | Internal Server Error | 最常见的服务器端错误。 |
503 | Service Unavailable | 服务器端暂时无法处理请求(可能是过载或维护) |
5、一个页面从输入URL 到页面加载显示完成,这个过程中都发生了什么?(流程说的越详细越好)
①、注
这题胜在区分度高,知识点覆盖广,再不懂的人,也能答出几句,而高手可以根据自己擅长的领域自由发挥,从URL规范、HTTP协议、DNS、CDN、数据库查询、到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等;
②、详细版
- 浏览器会开启一个线程来处理这个请求,对URL 分析判断如果是http 协议就按照Web 方式来处理;
- 调用浏览器内核中的对应方法,比如WebView 中的loadUrl 方法;
- 通过DNS解析获取网址的IP地址,设置UA 等信息发出第二个GET请求;
- 进行HTTP协议会话,客户端发送报头(请求报头);
- 进入到web服务器上的Web Server,如Apache、Tomcat、NodeJS 等服务器;
- 进入部署好的后端应用,如PHP、Java、JavaScript、Python 等,找到对应的请求处理;
- 处理结束回馈报头,此处如果浏览器访问过,缓存上有对应资源,会与服务器最后修改时间对比,一致则返回304;
- 浏览器开始下载html文档(响应报头,状态码200),同时使用缓存;
- 文档树建立,根据标记请求所需指定MIME类型的文件(比如css、js),同时设置了cookie;
- 页面开始渲染DOM,JS根据DOM API操作DOM,执行事件绑定等,页面显示完成。
③、简洁版
- 浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求;
- 服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、JS、CSS、图象等);
- 浏览器对加载到的资源(HTML、JS、CSS等)进行语法解析,建立相应的内部数据结构(如HTML的DOM);
- 载入解析到的资源文件,渲染页面,完成。
6、请解释JSONP 的工作原理,以及它为什么不是真正的AJAX。
jsonp的工作原理
是,动态的创建了一个全局方法,并且动态生成script标签请求数据,在请求回来的数据中是执行请求是动态生成的js方法,并且传递参数是请求的数据,生成了假象的ajax
7、请解释一下JavaScript 的同源策略
同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。
它的精髓很简单:它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时,它们应该只被允许访问来自同一站点的资源,而不是那些来自其它站点可能怀有恶意的资源。
这里的同源指的是:同协议
,同域名
和同端口
8、为什么要有同源限制?
我们举例说明:比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
9、创建ajax过程
①、步骤
- 创建
XMLHttpRequest
对象,也就是创建一个异步调用对象. - 创建一个新的
HTTP
请求,并指定该HTTP
请求的方法、URL
及验证信息. - 设置响应
HTTP
请求状态变化的函数. - 发送
HTTP
请求. - 获取异步调用返回的数据.
- 使用JavaScript和DOM实现局部刷新.
②、代码
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
}
}
10、常见web安全及防护原理
①、sql注入原理
就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。
总的来说有以下几点:
- 永远不要信任用户的输入,要对用户的输入进行校验,可以通过正则表达式,或限制长度,对单引号和双"-"进行转换等。
- 永远不要使用动态拼装SQL,可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
- 永远不要使用管理员权限的数据库连接,为每个应用使用单独的权限有限的数据库连接。
- 不要把机密信息明文存放,请加密或者hash掉密码和敏感的信息。
②、XSS原理及防范
Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意html标签或者javascript代码。比如:攻击者在论坛中放一个
看似安全的链接,骗取用户点击后,窃取cookie中的用户私密信息;或者攻击者在论坛中加一个恶意表单
当用户提交表单的时候,却把信息传送到攻击者的服务器中,而不是用户原本以为的信任站点。
③、XSS防范方法
- 代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤;其次任何内容写到页面之前都必须加以encode,避免不小心把html tag 弄出来。这一个层面做好,至少可以堵住超过一半的XSS 攻击。
- 首先,避免直接在cookie 中泄露用户隐私,例如email、密码等等。
- 其次,通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值,不可能拿来重放。
- 如果网站不需要再浏览器端对cookie 进行操作,可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。
- 尽量采用POST 而非GET 提交表单
④、XSS与CSRF有什么区别吗?
XSS是获取信息,不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作,需要知道其他 用户页面的代码和数据包。
要完成一次CSRF攻击,受害者必须依次完成两个步骤:
- 登录受信任网站A,并在本地生成Cookie。
- 在不登出A的情况下,访问危险网站B。
③、CSRF的防御
- 服务端的CSRF方式方法很多样,但总的思想都是一致的,就是在客户端页面增加伪随机数。
- 通过验证码的方法
11、HTTP和HTTPS
-
HTTP协议通常承载于TCP协议之上,在HTTP和TCP之间添加一个安全协议层(SSL或TSL),这个时候,就成了我们常说的HTTPS。
-
默认HTTP的端口号为80,HTTPS的端口号为443。
12、为什么HTTPS安全
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息,而如果使用HTTPS,密钥在你和终点站才有。https之所以比http安全,是因为他利用ssl/tls协议传输。它包含证书,卸载,流量转发,负载均衡,页面适配,浏览器适配,refer传递等。保障了传输过程的安全性
13、GET和POST的区别,何时使用POST?
①、跳转
②、假链接
③、假链接
GET
:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符
POST
:一般用于修改服务器上的资源,对所发送的信息没有限制。
区别
:
GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量的值,也就是说Get是通过地址栏来传值,而Post是通过提交表单来传值。
然而,在以下情况中,请使用POST
请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比GET 更稳定也更可靠
14、ajax的缺点和在IE下的问题?
①、ajax的缺点
- ajax不支持浏览器back按钮。
- 安全问题AJAX暴露了与服务器交互的细节。
- 对搜索引擎的支持比较弱。
- 破坏了程序的异常机制。
- 不容易调试。
②、IE缓存问题
在IE浏览器下,如果请求的方法是GET,并且请求的URL不变,那么这个请求的结果就会被缓存。解决这个问题的办法可以通过实时改变请求的URL,只要URL改变,就不会被缓存,可以通过在URL末尾添加上随机的时间戳参数(‘t’= + new Date().getTime())
或者
:
open(‘GET’,‘demo.php?rand=+Math.random()’,true);//
③、Ajax请求的页面历史记录状态问题
- 可以通过锚点来记录状态,location.hash。让浏览器记录Ajax请求时页面状态的变化。
- 还可以通过HTML5的history.pushState,来实现浏览器地址栏的无刷新改变
15、说说你对Promise的理解
①、Promise
依照Promise/A+ 的定义,Promise 有四种状态
:
- pending: 初始状态, 非fulfilled 或rejected.
- fulfilled: 成功的操作.
- rejected: 失败的操作.
- settled: Promise已被fulfilled或rejected,且不是pending
另外,fulfilled 与rejected 一起合称settled。
Promise 对象用来进行延迟(deferred) 和异步(asynchronous ) 计算。
②、Promise 的构造函数
构造一个Promise
,最基本的用法如下:
var promise = new Promise(function(resolve, reject) {
if (...) { // succeed
resolve(result);
} else { // fails
reject(Error(errMessage));
}
});
Promise 实例拥有then 方法
(具有then 方法的对象,通常被称为thenable)。它的使用方法如下:
promise.then(onFulfilled, onRejected)
接收两个函数作为参数,一个在fulfilled 的时候被调用,一个在rejected 的时候被调用,接收参数就是future,onFulfilled 对应resolve, onRejected 对应reject。
16、前端需要注意哪些SEO
- 合理的title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同;
- description把页面内容高度概括,长度合适,不可 过分堆砌关键词,不同页面description有所不同;keywords列举出重要关键词即可
- 语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页
- 重要内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取
- 重要内容不要用js输出:爬虫不会执行js获取内容
- 少用iframe:搜索引擎不会抓取iframe中的内容
- 非装饰性图片必须加alt
- 提高网站速度:网站速度是搜索引擎排序的一个重要指标
17、web开发中会话跟踪的方法有哪些
- cookie
- session
- url重写
- 隐藏input
- ip地址
18、什么是Ajax和JSON,它们的优缺点。
Ajax是异步JavaScript和XML,用于在Web页面中实现异步数据交互。
①、Ajax优点:
- 可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量
- 避免用户不断刷新或者跳转页面,提高用户体验
②、Ajax缺点:
- 对搜索引擎不友好
- 要实现ajax下的前后退功能成本较大
- 可能造成请求数的增加
- 跨域问题限制
JSON是一种轻量级的数据交换格式,ECMA的一个子集
③、JSON优点:
优点:轻量级、易于人的阅读和编写,便于机器(JavaScript)解析,支持复合数据类型(数组、对象、字符串、数字)
标签:前端面试,Ajax
更多演示案例,查看 案例演示
欢迎评论留言!