2019 Ajax 和 Bootstrap 面试题

「爱情、让人受尽委屈。」 2024-04-19 11:11 71阅读 0赞

# 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” 设置向左对齐文本