2019 Ajax 和 Bootstrap 面试题

AJAX

• 用post方式异步向服务器端提交数据时，需要在发送请求前设置什么？提交的数据放在什么位置？
  答：xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”); 数据放在send（）括号中
• 什么是异步数据加载？
  答：浏览器在向服务器发送请求的时候，不耽误用户在网页上做其它操作，可以同时开启多个任务，并且可以以无刷新的效果来更改页面中的局部内容。
• 异步请求数据的步骤分为哪几步？
  答：创建异步对象，绑定监听事件，创建异步请求，发送异步请求

	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4&&xhr.status==200){
			var resText = xhr.responseText;
		}
	}
	xhr.open(method,url,true);
	xhr.send(body);

• 异步请求中满足什么条件时才能取出响应的结果数据？
  答：请求状态码为4，响应状态码为200时
• 如何理解JSON？
  答：JSON是JS对象的一种表现方式，即以js对象的数据格式表现出来的字符串，JSON中的两个api如下：
  将JSON字符串转换成JSON对象 JSON.parse()
  将JSON对象转换成JSON字符串 JSON.stringify()
• http和https的区别？
  答：http传输的数据都是未加密的，也就是明文的
  https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。
  两者使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443
• 列举几种常见的3和4开头的状态码以及他们的意义？
  答：301 ：永久性重定向
  302 ：临时重定向
  304 ：请求资源未被修改，命中缓存
  400 (错误请求) 服务器不理解请求的语法。
  403 (禁止) 服务器拒绝请求。
  404 (未找到) 服务器找不到请求的网页。
• 什么是ajax？有哪些优缺点？
  答：AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。
  优点：
  1.局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验。
  2.减轻服务器的压力,按需取数据,最大程度的减少冗余数据请求。
  3.基于xml标准化,并被广泛支持,不需安装插件。
  4.促进页面和数据的分离。
  缺点：
  1.AJAX破坏了浏览器的Back和History功能
  2.AJAX安全问题
  3.对搜索引擎支持较弱
  4.破坏程序的异常处理机制
  5.AJAX不是很好支持移动设备

Bootstrap

• 用bootstrap中的栅格做网页布局的基本结构是什么？默认将一行分为多少列？
  答：容器中设置行，行内设置列、默认将一行分为12个单元格（列）
• 如何编写响应式网页？
  答：(1)声明viewport元标签
  (2)所有容器/文字/图片 使用相对尺寸
  (3)流式布局+弹性布局
  (4)使用CSS3 Media Query技术
• 同时监听多个scss文件的命令是什么？
  答：node-sass -w scss文件夹 –o css文件夹
• 在scss中如何定义混合器以及引用？
  答：@mixin 混合器名称{ 样式声明 }
  通过@include来使用混合器。
• 对于各类尺寸的设备，Bootstrap设置的class前缀分别是什么？
  答：超小设备手机（<768px）：.col-xs-
  小型设备平板电脑（>=768px）：.col-sm-
  中型设备台式电脑（>=992px）：.col-md-
  大型设备台式电脑（>=1200px）：.col-lg-
• Bootstrap如何设置响应式表格？
  答：增加class=“table-responsive”
• 使用Bootstrap激活或禁用按钮要如何操作？
  答：激活按钮：给按钮增加.active的class
  禁用按钮：给按钮增加disabled="disabled"的属性
• Bootstrap有哪些关于<img>的class？
  答:（1）.img-rounded 为图片添加圆角
  （2）.img-circle 将图片变为圆形
  （3）.img-thumbnail 缩略图功能
  （4）.img-responsive 图片响应式 (将很好地扩展到父元素)
• Bootstrap中有关元素浮动及清除浮动的class？
  答：class=“clearfix” 清除浮动
• Bootstrap如何制作下拉菜单？
  答：（1）将下拉菜单包裹在class=“dropdown"的
  中；
  （2）在触发下拉菜单的按钮中添加：class=“btn dropdown-toggle” id=“dropdownMenu1” data-toggle=“dropdown”
  （3）在包裹下拉菜单的ul中添加：class=“dropdown-menu” role=“menu” aria-labelledby=“dropdownMenu1”
  （4）在下拉菜单的列表项中添加：role=“presentation”。其中，下拉菜单的标题要添加class=“dropdown-header”，选项部分要添加tabindex=”-1"。
• Bootstrap如何制作按钮组？
  答：用class="btn-group"的
  去包裹按钮组；class="btn-group-vertical"可设置垂直按钮组。
• Bootstrap中的导航都有哪些？
  答：（1）导航元素：有class="nav nav-tabs"的标签页导航，还有class="nav nav-pills"的胶囊式标签页导航；
  （2）导航栏：class=“navbar navbar-default” role=“navigation”；
  （3）面包屑导航：class=“breadcrumb”
• Bootstrap中设置分页的class？
  答：默认的分页：class=“pagination”
• Bootstrap中如何制作徽章？
  答：<span class=“badge”>26</span>
• Bootstrap中超大屏幕的作用是什么？
  答：设置class="jumbotron"可以制作超大屏幕，该组件可以增加标题的大小并增加更多的外边距。
• Bootstrap 网格系统列与列之间的间隙宽度是多少？
  答：间隙宽度为30px（一个列的每边分别是15px）。
• 用Bootstrap，如何设置文字的对齐方式？
  答：class=“text-center” 设置居中文本
  class=“text-right” 设置向右对齐文本
  class=“text-left” 设置向左对齐文本