目录 面试系列内容介绍1、Ajax 是什么? 如何创建一个Ajax？①、Ajax②、异步③、步骤 2、同步和异步的区别?①、同步②、异步 3、如何解决跨域问题?4、http状态码有那些？分别代表是什么意思？5、一个页面从输入URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）①、注②、详细版③、简洁版 6、请解释JSONP 的工作原理，以及它为什么不是真正的AJAX。7、请解释一下JavaScript 的同源策略8、为什么要有同源限制？9、创建ajax过程①、步骤②、代码 10、常见web安全及防护原理①、sql注入原理②、XSS原理及防范③、XSS防范方法④、XSS与CSRF有什么区别吗？③、CSRF的防御 11、HTTP和HTTPS12、为什么HTTPS安全13、GET和POST的区别，何时使用POST？①、跳转②、假链接③、假链接 14、ajax的缺点和在IE下的问题？①、ajax的缺点②、IE缓存问题③、Ajax请求的页面历史记录状态问题 15、说说你对Promise的理解①、Promise②、Promise 的构造函数 16、前端需要注意哪些SEO17、web开发中会话跟踪的方法有哪些18、什么是Ajax和JSON，它们的优缺点。①、Ajax优点：②、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？ ①、Ajaxajax的全称：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状态码有那些？分别代表是什么意思？ 状态码类型说明100Continue继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息200OK正常返回信息201Created请求成功并且服务器创建了新的资源202Accepted服务器已接受请求，但尚未处理301Moved Permanently请求的网页已永久移动到新位置。302Found临时性重定向。303See Other临时性重定向，且总是使用GET 请求新的URI。304Not Modified自从上次请求后，请求的网页未修改过。400Bad Request服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。401Unauthorized请求未授权。403Forbidden禁止访问。404Not Found找不到如何与URI 相匹配的资源。500Internal Server Error最常见的服务器端错误。503Service 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，其目的是防止某个文档或脚本从多个不同源装载。
它的精髓很简单：它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。
这里的同源指的是：同协议，同域名和同端口
我们举例说明：比如一个黑客程序，他利用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和HTTPSHTTP协议通常承载于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);//
依照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 (...) { // succeedresolve(result); } else { // failsreject(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开发中会话跟踪的方法有哪些 cookiesessionurl重写隐藏inputip地址 18、什么是Ajax和JSON，它们的优缺点。Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。
①、Ajax优点： 可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量避免用户不断刷新或者跳转页面，提高用户体验 ②、Ajax缺点： 对搜索引擎不友好要实现ajax下的前后退功能成本较大可能造成请求数的增加跨域问题限制JSON是一种轻量级的数据交换格式，ECMA的一个子集
③、JSON优点：优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）
标签：前端面试，Ajax
更多演示案例，查看 案例演示
欢迎评论留言!