前端技术面试深度解析：Ajax、Cookie与CSS特性

"前端面试题集合" 前端技术涵盖了HTML、CSS和JavaScript等核心领域，而JavaScript作为客户端脚本语言，其重要性不言而喻。AJAX（异步JavaScript和XML）是JavaScript的一个重要应用，它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。创建一个AJAX请求的基本步骤包括： 1. 首先，需要创建一个XMLHttpRequest对象，这是所有AJAX交互的基础。 2. 然后，设置HTTP请求的类型（GET或POST）、验证信息以及请求头等。 3. 接下来，定义一个onreadystatechange事件处理函数，这个函数会在HTTP请求的状态改变时被调用，特别是当服务器响应准备就绪时。 4. 使用open()方法启动HTTP请求，传入请求类型、URL和是否异步。 5. send()方法用于发送HTTP请求，如果是POST请求，还需要传递额外的数据。 6. 当服务器响应完成，通过readyState和status属性检查请求状态，然后通过responseText或responseXML获取返回的数据。 7. 最后，利用JavaScript和DOM操作将返回的数据动态地更新到页面的相应位置。 尽管Cookie在存储客户端数据方面非常有用，但它也存在一些明显的弊端： - 限制数量：每个域名下的Cookie数量有限，如IE6之前的版本最多20个，而现代浏览器如Firefox可达到50个。 - 大小限制：每个Cookie的大小通常限制在4KB左右，过大的Cookie会被截断。 - 安全隐患：如果Cookie未加密，被拦截后可能会泄露用户会话信息。 - 性能影响：每个请求都会携带所有的Cookie，对于多个Cookie和大尺寸的Cookie，可能会影响网络性能。 - 清理策略：不同浏览器有不同的清理策略，可能导致某些Cookie被意外删除。 在CSS中，`display:none;`和`visibility:hidden;`都是用来隐藏元素，但两者之间存在显著区别： - `display:none;`的元素不仅不显示，而且在布局上也不占据空间，影响其他元素的排列。 - `visibility:hidden;`的元素虽然不显示，但依然占据原有的空间，周围的元素不会移动。 - `display:none;`不能通过改变子孙元素的CSS使其重新显示，而`visibility:hidden;`可以通过设置`visibility:visible;`让子孙元素可见。 - 对于屏幕阅读器，`display:none;`的元素将被完全忽略，而`visibility:hidden;`的元素则会被读取。 CSS Hack是解决浏览器之间的兼容性问题的一种技巧，因为不同浏览器对CSS的支持和解析方式可能存在差异。常见的CSS Hack包括： - 属性Hack：例如，`_height`仅在IE6中生效，`-moz-linear-gradient`仅在Firefox中生效。 - 选择器Hack：如`*html .class`只影响IE6，`@media screen\9`针对IE8及以下版本。 - 优先级Hack：通过在CSS规则前添加特殊字符，如`!important`，提高该规则的优先级。 了解这些前端基础和细节对于面试和实际开发都至关重要，它们是构建高效、用户体验良好的Web应用的基础。