首页 > 代码库 > HTML5.与JQUERY与AJAX常见面试题
HTML5.与JQUERY与AJAX常见面试题
1. HTML5
1.1.简要描述 HTML5中的本地存储
参考答案：
很多时候我们会存储用户本地信息到电脑上，例如：比方说用户有一个填充了一半的长
表格，然后突然网络连接断开了，这样用户希望你能存储这些信息到本地，当网络恢复的时
他想获取这些信息然后发送到服务器进行存储。
现代浏览器拥有的存储被叫做“Local Storage”，用于存储这些信息。
1.2.简要描述 HTML5中 Canvas的作用
参考答案：
Canvas是 HTML5出现的新标签，拥有自己的属性、方法和事件，其中就有绘图的方
J ava Sc ri pt 能够调用它在网页上完成绘图。
Canvas也是 HTML5中最强大的特性之一，允许开发者使用动态和交互式可视化方法
在 Web上实现桌面应用程序的功能。
1.3. HTML5有哪些不同类型的存储？
参考答案：
HTML5支持本地存储，在之前的版本中是通过 Cookie实现的。 HTML5本地存储速
度快而安全。
有两种不同的对象可用来存储数据：
? localStorage：适用于长期存储数据，浏览器关闭后数据不丢失；? sessionStorage：存储的数据在浏览器关闭后自动删除。
1.4.除了音频和视频， HTML5还支持其他什么新的媒体元素？
参考答案：
HTML5对媒体支持很强，除了 audio和 video外，还提供：
? <embed>：作为外部应用的容器；? <track>：定义媒体的文本跟踪；? <source>：多种媒体源的支持。
1.5. HTM L5应用缓存是什么
参考答案：
常用于实现用户的离线浏览。如果网络连接不可用，页面应该来自浏览器缓存，离线应用缓存可以帮助你达到这个目的。
应用缓存可以帮助你指定哪些文件需要缓存，哪些不需要。
1.6.什么是 Web Worker？为什么我们需要他们？
参考答案：
查看如下代码（模拟会执行上百万次的繁重代码）：
function test( ) {
for(i=0;i< 10000000000; i++){
x=x+i;
}
}
如果上述代码在 HTML按钮点击以后执行，这种执行是同步的，即，浏览器必须等到此执行完毕之后才能进行其他操作。因为此操作耗时较长，那么这个操作会导致浏览器冻结并且没有响应，而且屏幕还会出现异常信息。
如果可以将这些繁重的代码移动到 Javascript文件中，并采用异步的方式运行，就可以解决这个问题。 这就是 web worker的作用。 Web Worker用于异步执行 JavaScript文件，提高浏览器的敏捷度。
1.7. HTM L5应用程序缓存和浏览器缓存有什么区别
参考答案：
应用程序缓存是 HTM L5的重要特性之一，提供了离线使用功能，让应用程序可以获取本地的网站内容，例如 HTML、 CSS、图片以及 Javascript。这个特性可以提高网站性能，它的实现借助于 manifest文件，代码如下：
<!doctype html>
<html manifest="example. appcache"> ....
JQU E RY而3
</html>
与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。
1.8.简要描述 HTML5中新增的表单元素
参考答案：
datalist，datetime， output， date， month，week，time，color， number， range，
email， url， search等。
2.jquery
2.1. body中的 onl oad()函数和 jQuery中的$(document).ready()有什么区别
参考答案：
onload（）和 document.ready（）的区别如下：
? 可以在页面中使用多个document.ready()，但只能使用一次onload()；? document.ready()函数在页面 DOM元素加载完成以后就会被调用，
onload()函数则要在所有的关联资源（包括图像，音频）加载完毕才会调用。
2.2. jQue ry中有哪几种类型的选择器
参考答案：
有3种类型的选择器，如下：
基本选择器：直接根据 id， css类名，元素名返回 dom元素；
层次选择器：也叫做路径选择器，可以根据路径层次来选择相应的dom元素；
过滤选择器：在前面的基础上过滤相关条件，得到匹配的 dom元素。
2.3.jQuery的美元符号$有什么作用？
参考答案：
美元符号$是‘jQuery‘的别名，它是jQuery选择器，查看如下代码：
$ (document) .ready(function( ) { } ) ;
4
也可以用 jQue ry来替代
jQuery(document) .ready(function( ) { }) ;
2.4.jQuery中的 Delegate（）函数有什么作用？
参考答案：
delegate()会在以下两个情况下使用到：
? 当需要给父元素其下的子元素添加事件时，代码如下：
Html代码
$ ("ul") .delegate("li", "click", function() { $ (this) .hide() ;
});
? 当元素在当前页面中不可用时，可以使用 delegate()
3. AJAX
3.1.请写出至少5种常见的 http状态码以及代表的意义
参考答案：
5种常见的 http状态码以及代表的意义如下：
? 200（ OK）：请求已成功，请求所希望的响应头或数据体将随此响应返回。
? 303（ See Other）：告知客户端使用另一个 URL来获取资源。
? 400（ Bad Request）：请求格式错误。1)语义有误，当前请求无法被服务器
理解。除非进行修改，否则客户端不应该重复提交这个请求；2)请求参数有误。? 404（ Not Found）：请求失败，请求所希望得到的资源未被在服务器上发现。? 500（ Internal Server Error）：服务器遇到了一个未曾预料的状况，导致了它
无法完成对请求的处理。
3.2.简要描述你对 AJAX的理解
参考答案：
AJAX的全称是“Asynchronous JavaScript and XML”，即异步的 JavaScript和XM L。 它是指一种创建交互式网页应用的网页开发技术，可以实现页面的异步请求和局部刷新。
5
AJAX包含下列技术：
? 基于 web标准 XHTML+CSS的表示
? 使用 DOM（ Document ObjectModel）进行动态显示及交互? 使用 XML和 XSLT进行数据交换及相关操作
? 使用 XMLHttpRequest进行异步数据查询、检索
3.3.请介绍一下 XMLHttprequest对象
参考答案：
AJAX的核心是 JavaScript对象XmlHttpRequest。 该对象在 Internet Explorer5中
首次引入，它是一种支持异步请求的技术。简而言之，Xml HttpRequest可以使用 JavaScript
向服务器提出请求并处理响应，而不阻塞用户。通过 XMLHttpRequest对象， Web开发
人员可以在页面加载以后进行页面的局部更新。
3.4. AJAX应用和传统 Web应用有什么不同
参考答案：
在传统的 Javascript编程中，如果想得到服务器端数据库或文件上的信息，或者发送
客户端信息到服务器，需要建立一个 HTM L form然后 GET或者 POST数据到服务器端。
用户需要点击“Submit”按钮来发送或者接受数据信息，然后等待服务器响应请求，页面
重新加载。因为服务器每次都会返回一个新的页面， 所以传统的 web应用有可能很慢而且
用户交互较差。
使用 AJAX技术， 就可以使 Javascript通过 XMLHttpRequest对象直接与服务器进
行交互。通过 HTTP Request， 一个web页面可以发送一个请求到 web服务器并且接受
web服务器返回的信息(不用重新加载页面)，展示给用户的还是同一个页面，但是只实现页
面的局部刷新，从而提高体验度。
3.5.介绍一下 XM LHttpRequest对象的常用方法和属性
参考答案：
? open(“method”,” URL”) ：建立对服务器的调用，第一个参数是 HTTP
请求方式（可以为 GET， POST或任何服务器所支持的您想调用的方式）， 第
二个参数是请求页面的 URL；
? send()方法：发送具体请求；
? abort()方法：停止当前请求；
? readyState属性：请求的状态，有5个可取值（ 0=未初始化，1=正在加载，
},error: function( ) {window.alert( "系统错误" ) ;}6
2=以加载，3=交互中，4=完成）；
? responseText属性：服务器的响应，表示为一个串；? reponseXML属性：服务器的响应，表示为XML；? status属性：服务器的 HTTP状态码。
3.6.简述 AJAX的交互模型，以及同步和异步的区别
参考答案：
AJAX主要用于实现从服务器获取数据并局部刷新页面。其交互模型为， AJAX在浏览器端引入一个执行引擎，它一边接收 user的请求，一边传送数据给服务器，并把服务器端返回的结果展现给 u se r。
同步：脚本会停留并等待服务器发送回复然后继续。
异步：脚本不停留并处理可能的回复。
3.7.现需要使用 jQuery代码实现 ajax请求，详细信息如下：
请求的 url ： carinfo.do
发送方式： post
发送数据： id为 s1的文本框的值
返回数据： json格式
请求成功：将返回数据写入id为 s2的文本框中请求失败：弹出文本“系统错误”
请提供代码实现上述功能。
参考答案：
$.ajax({
url: "carinfo. do",
type: "post" ,
data:$ ("#s1") .val() ,
dataType: "j son" ,
success:function(resText) {
$ ("#s2") .val(resText) ;
});
3.8. AJAX都有哪些优点和缺点
参考答案：
优点：
? 页面局部刷新，提高用户体验度；
? 使用异步方式与服务器通信，具有更加迅速的响应能力；
? 减轻服务器负担；
? 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
缺点：
? 不支持浏览器 back按钮；
? 安全问题；
HTML5.与JQUERY与AJAX常见面试题