1. HTML5 中引入了哪些新的JavaScript API具体有什么作用
简而言之,HTML5就是由新的标记引进的新元素形式和为现有元素新增的某些属性,与新的JavaScript APIs的结合体。那HTML5中引入了新增加了哪些新标签与JavaScript API结合体呢?我这里例举了我们平时最常用的几种:
1、 Canvas API是一个具有完整功能的JavaScript API并伴随产生了新HTML5元素<Canvas>。通过Canvas API,您可以利用它和WebGL在浏览器中创建一个2 D或3 D绘图场景,
2、 Contacts API主要应用在移动设备上,为浏览器提供对用户通用通讯录的访问。它在浏览器内建立一个本地存储库,来存储联系人信息。而不是通过访问让你所有联系人信息直接保存在Google +、Facebook或其他网站上, Contacts API将允许您有本地存储库,网站可以通过本地存储库访问存储的联系人信息。现在的主流浏览器都支持Contacts API
3、 通过File API 浏览器可以直接访问用户计算机的沙箱区域将数据存储到文件系统。
4、 在HTML5中Forms API得到了发展,内置了验证功能,在接下来的课程中,您将会学习到如何通过使用内置的规则实现表单验证,以及如何添加自定义规则进行表单验证。
5、 允许浏览器请求用户的位置信息,一旦获权,浏览器可以通过许多不同的方法来确定计算机或设备的实际位置,它将会有一个比例尺来确认精确的地点位置。通过该API能获取经纬度等数据,非常适合应用程序定位。
6、 Media Capture的功能是将本地设备通过JavaScript将与浏览器相连。你将能够访问摄像头,摄像头,等等。
7、 Messaging API被用来与其他API一起使用,比如web web workers,这个我们将将在后面的课程中进一步讨论。
8、 选择(Selection)API的就像jQuery库一样运用非常广泛。在流行jQuery 、HTML5的今天,试图从文档对象模型选择元素是比较复杂的。jQuery弥补了这一差距。其实变得很容易,HTML5将高级选择功能直接内置在浏览器中。使得浏览器的选择性能得到很大的改善,甚至于JQuery选择工具一样速度。我并不是贬低jQuery。jQuery的优势就是DOM的选择,但是,jQuery不仅仅只提供了选择功能,事实上,在本课程中未来的演示的案例中,您将清楚的知道什么时候使用jQuery会更加便利,然后什么时候切换到本地选择会更加方便。.
9、 Server-Sent Events API:一个网页获取新的数据通常需要发送一个请求到服务器,也就是向服务器请求的页面.使用Server-Sent Events API,服务器可以在任何时刻向我们的web页面推送数据和信息.这些被推送进来的信息可以在这个页面上作为事件/数据来处理。服务器推送事件(Server-Sent Events)的优点在于: 只要响应的内容类型是事件/数据流,事件就通过HTTP发送,浏览器能够识别该传输。
10、 Web Notifications API即web消息提醒,它可以使页面可以发出通知,通知将被显示在页面之外的系统层面上(通常使用操作系统的标准通知机制,但是在不同的平台和浏览器上的表现会有差异)。这个功能使 web 应用可以向用户发送信息,即使应用处于空闲状态。最明显的用例之一是一个网页版电子邮件应用程序,每当用户收到了一封新的电子邮件都需要通知用户,即使用户正在使用另一个应用程序。在2013年夏天,这个API还是在被W3C在试用,并没有被很多浏览器所应用。
11、 Web Sockets API:Web Sockets是一种基于 ws 协议的技术,它使得建立全双工连接成为可能。websocket 常见于浏览器中,但是这个协议不受使用平台的限制。它允许你收发信息到服务器端。这个典型的示例就是即时通信。你建立一个对话,如果没有sockets,你可能会去从服务器中去获取新的消息。如果具有了sockets,当消息通过浏览器发到服务端的时候,对方的客户端通过已经建立好的sockets链接就能自动的接收到信息。
12、 Web存储,它有两种版本,本地存储和会话存储。就WEB开发来说,一个会话就是你通过浏览器与服务器之间的一次通话,所以,如果你熟悉服务器端web开发,会话存储可能不是头一次听说。基本上,只要用户页在页面上的统一个会话内,工作数据就不会丢失。如果浏览器关闭或者转向另一个会话,那么此时数据就不复存在。本地存储在不同会话之间仍然能保存数据, 本地存储与cookie 和IndexedDB相比,它可以让你来贮存更多的信息。Web存储与cookie,数据不发送到请求的服务器而是保存在客户端。
这些都是HTML5中新加入的一些比较常用的功能API,如果你想要系统的了解HTML5的新功能,推荐你去一个叫做秒秒学的教程网站上看看,里面有专门的课程来讲解HTML5中的新特性,希望对你有帮助。
2. web前端怎么调用api接口
1、首先需要确定第三方的接口的基本信息:地址、请求方式,参数、返回值,接口模式这里第三方的接口是restful风格的,采用get请求。
3. 如何 爬取 web 服务 api
对于初学者,用maven构建项目并不是一件容易的事,springmvc并不是MVC中的主流,但是本人觉得springmvc比struts要好用,真正做到了零配置。一次使用,就放不下了。
二.准备工作
1.Eclipse 3.7
2.maven
3.Eclipse 需要安装maven插件。url:maven - http:// download.eclipse.org/technology/m2e/releases 。安装maven-3.0.4。并且选择本地的maven,如下图:
三.构建工程
1.用maven插件构建项目框架
maven具有强大构建功能,使用maven可以构建多种不同类型的工程。这里我们构建maven-archetype-webapp类型的项目。在Eclipse->New中选择other,找到maven Project型。如下图:
在选完路径之后,我们选择构建类型,如下图:
接下来,填写工程的Group Id,Artifact Id,如下图:
这里的Group Id就是大项目的id,Arifact Id就是该项目的Id。就像一个大项目中有许多小项目组成一样。此时,我们的项目已经成型了,样子如下图:
接下来,我们要完善项目的目录,配置。
2.完善项目
首先,完善目录,增加重要的source Folder,这个不是简单的Floder,这些文件夹是会参与编译的。增加src/main/java,src/test/resources,src/test/java目录。让目录变成标准的maven结构。如下图:
接下来,改变一些配置:
让工程的JDK用本地的jdk;
让工程的字符集为UTF-8;
改变工程的目录顺序;
这些都完成之后,工程目录应该是如下的样子:
3.将工程变成web工程
此时,我们的工程还不是标准的web工程,可以在eclipse中增加web工程的特性,选择工程的Properties,选Project Facets,如下图:
这里,我们选择Dynamic Web Mole,版本选择2.4,这个版本比较通用。如下图:
此时,我们看到目录中多了一个WebContent目录,由于使用maven构建,web目录是src/main/webapp,所以我们删除WebContent目录。接下来,要配置web项目的发布目录,就是Deployment Assembly,如图:
test目录不要发布,WebContent目录没有了,所以这三项都删掉。并且增加src/main/webapp目录,和Maven Dependenices,完成之后如下图:
于是,我们的工程就完全是一个web工程了。
4. HTML5 Web Worker是利器还是摆设
Worker能解决两个问题:解决程序阻塞问题:提升效率。不过Worker还有局限性,它不能操作DOM。解决方法如下:
1、首先在创建之前,检测所用浏览器是否支持它,当前除了IE浏览器以外,其它主流浏览器都是支持的。
5. HTLM5标准是什么
HTML 5是HTML下一个的主要修订版本,现在仍处于发展阶段。目标是取代1999年所定订的HTML 4.01和XHTML 1.0 标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。
新标记
HTML 5提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似<div>和<span>标签,但有一定含义,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准接口,如<audio>和<video>标记。[3]
一些过时的HTML 4标记将取消,其中包括纯粹用作显示效果的标记,如<font>和<center>,因为它们已经被CSS取代。还有一些透过DOM的网络行为。
新应用程序接口(API)
除了原先的DOM接口,HTML5增加了更多样化的API[4]:
即时二维绘图
Convas API:有关动态产出与渲染图形、图表、图像和动画的API。
定时媒体播放
HTML5 音频与视频:HTML5里新增的元素,它们为开发者提供了一套通用的、整合的、脚本式的处理音频与视频的API,而无需安装任何插件。
储存
Web Storage API:HTML5 Web存储(也就是 DOMStorage),该API令在多个Web请求间持久化资料变得简单。
离线
编辑
拖放
通讯/网络
Communication APIs:构建实时和跨源(cross-origin)通讯的两大基础: 跨文档通讯(Cross Document Messaging)与 XMLHttpRequest Level 2。
后退按钮管理
MIME和协议处理程序时表头登记
Geolocation API:使用者可共享地理位置,并在Web应用的协助下享用位置感知服务(location-aware services)。
Web Sockets API:定义全双工传输的通讯通道,它在Web之上通过单个Sockets进行工作。
WebSocket是HTML5中非常重要的新特性,允许使用者在浏览器中实作双向通信,以达服务器得以实作对映的资料即时推送技术,这个技术的意义在于我们可以通过网页实作以往难以达成的应用。使用者不再需要频繁的更新页面以获取新资料,新资料会自动由服务器端推送至使用者的电脑画面上。
Web Workers API:为Web应用提供后台处理的能力。
与HTML 4的不同之处
以下为大略的不同之处,与例子:
新的解析顺序:不再基于SGML
新的元素:section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr
input元素的新属性:日期和时间,email, url
新的通用属性:ping(用于a与area), charset(用于meta), async(用于script)
全域属性:id, tabindex, repeat
移除元素:acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u
异常处理
HTML5(text/html)浏览器将在错误语法的处理上更加灵活。HTML5在设计时保证旧的浏览器能够安全地忽略掉新的HTML5代码。与HTML4.01相比,HTML5给出了解析的详细规则,力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。
6. 腾讯地图webservice api 支持 https方式的调用吗
web service在企业应用中常常被用作不同系统之间的接口方式。但是如果没有任何安全机制的话,显然是难以委以重任的。比较直接的web service加密方式就是使用HTTPS方式(SSL证书加密)加密连接,并且只允许持有信任证书的客户端连接,即SSL双向认证。这样就保证了连接来源的可信度以及数据在传输过程中没有被窃取或篡改。通过HTTPS加密方式访问web service具体方法如下:
【准备工作】
(1)检查JDK的环境变量是否正确。本文使用JDK 1.6
(2)准备web服务器,这里选用TOMCAT 6.0
(3)准备web service服务端和客户端。
【生成证书】
这里用到的文件,这里存放在D:/SSL/文件夹内,其中D:/SSL/server/内的文件是要交给服务器用的,D:/SSL/client/内的文件是要交给客户端用的。
1生成服务端证书
开始-运行-CMD-在dos窗口执行下执行命令:
keytool -genkey -v -aliastomcat -keyalg RSA -keystore D:/SSL/server/tomcat.keystore -dname"CN=127.0.0.1,OU=zlj,O=zlj,L=Peking,ST=Peking,C=CN" -validity 3650-storepass zljzlj -keypass zljzlj
说明:
keytool 是JDK提供的证书生成工具,所有参数的用法参见keytool –help
-genkey 创建新证书
-v 详细信息
-alias tomcat 以”tomcat”作为该证书的别名。这里可以根据需要修改
-keyalg RSA 指定算法
-keystoreD:/SSL/server/tomcat.keystore 保存路径及文件名
-dname"CN=127.0.0.1,OU=zlj,O=zlj,L=Peking,ST=Peking,C=CN" 证书发行者身份,这里的CN要与发布后的访问域名一致。但由于这里是自签证书,如果在浏览器访问,仍然会有警告提示。真正场景中建议申请CA机构(wosign)签发的SSL证书更安全。
-validity 3650证书有效期,单位为天
-storepass zljzlj 证书的存取密码
-keypass zljzlj 证书的私钥
2 生成客户端证书
执行命令:
keytool ‐genkey ‐v ‐aliasclient ‐keyalg RSA ‐storetype PKCS12 ‐keystore D:/SSL/client/client.p12 ‐dname"CN=client,OU=zlj,O=zlj,L=bj,ST=bj,C=CN" ‐validity 3650 ‐storepassclient ‐keypass client
说明:
参数说明同上。这里的-dname 证书发行者身份可以和前面不同,到目前为止,这2个证书可以没有任何关系。下面要做的工作才是建立2者之间的信任关系。
3 导出客户端证书
执行命令:
keytool ‐export ‐aliasclient ‐keystore D:/SSL/client/client.p12 ‐storetype PKCS12 ‐storepass client‐rfc ‐file D:/SSL/client/client.cer
说明:
-export 执行导出
-file 导出文件的文件路径
4 把客户端证书加入服务端证书信任列表
执行命令:
keytool ‐import ‐aliasclient ‐v ‐file D:/SSL/client/client.cer ‐keystoreD:/SSL/server/tomcat.keystore ‐storepass zljzl
说明:
参数说明同前。这里提供的密码是服务端证书的存取密码。
5 导出服务端证书
执行命令:
keytool -export -aliastomcat -keystore D:/SSL/server/tomcat.keystore -storepass zljzlj -rfc -fileD:/SSL/server/tomcat.cer
说明:
把服务端证书导出。这里提供的密码也是服务端证书的密码。
6 生成客户端信任列表
执行命令:
keytool -import -fileD:/SSL/server/tomcat.cer -storepass zljzlj -keystoreD:/SSL/client/client.truststore -alias tomcat –noprompt
说明:
让客户端信任服务端证书
【 配置服务端为只允许HTTPS连接】
1 配置Tomcat 目录下的/conf/server.xml
Xml代码:
<Connectorport="8443" protocol="HTTP/1.1" SSLEnabled="true"
maxThreads="150" scheme="https" secure="true"clientAuth="true"
sslProtocol="TLS"keystoreFile="D:/SSL/server/tomcat.keystore"
keystorePass="zljzlj"truststoreFile="D:/SSL/server/tomcat.keystore"
truststorePass="zljzlj" />
说明:
在server.xml里面这段内容本来是被注释掉的,如果想使用https的默认端口443,请修改这里的port参数。其中的clientAuth="true" 指定了双向证书认证。
2 配置服务端项目web.xml
在<welcome-file-list>之后增加Xml代码:
<!-- 强制SSL配置,即普通的请求也会重定向为SSL请求 -->
<security-constraint>
<web-resource-collection>
<web-resource-name>SSL</web-resource-name>
<url-pattern>/service/*</url-pattern><!--全站使用SSL <url-pattern>/*</url-pattern>-->
</web-resource-collection>
<user-data-constraint>
<description>SSL required</description>
<!-- CONFIDENTIAL: 要保证服务器和客户端之间传输的数据不能够被修改,且不能被第三方查看到 -->
<!-- INTEGRAL: 要保证服务器和client之间传输的数据不能够被修改 -->
<!-- NONE: 指示容器必须能够在任一的连接上提供数据。(即用HTTP或HTTPS,由客户端来决定)-->
<transport-guarantee>CONFIDENTIAL</transport-guarantee>
</user-data-constraint>
</security-constraint>
说明:
这里限制了WEB service服务地址的访问必须为https连接。<url-pattern>要根据你的web service服务地址配置。
【修改客户端代码】
在执行访问之前,增加Java代码:
System.setProperty("javax.net.ssl.trustStore","D:/SSL/client/client.truststore");
System.setProperty("javax.net.ssl.trustStorePassword","zljzlj");
System.setProperty("javax.net.ssl.keyStoreType","PKCS12");
System.setProperty("javax.net.ssl.keyStore","D:/SSL/client/client.p12");
System.setProperty("javax.net.ssl.keyStorePassword","client");
StringendPoint="https://127.0.0.1:8443/easbCut/services/ApplyFormService";
...
通过设置参数来指定客户端连接时所使用的客户端证书,这里还可以采用修改JVM启动参数的的方式来执行,但出于不影响其他功能的考虑,这里采用System.setProperty的方式来设置这些参数,在使用结束后,可以还原这些参数配置。做为客户端的开发者,可以把拿到的证书文件后,只执行步骤3。
7. web workers何时使用
创建一个Worker
通常,与web worker相关的代码都放在一个独立的JavaScript文件中。父线程通过在Worker构造函数中指定一个JavaScript文件的链接来创建一个新的worker,它会异步加载并执行这个JavaScript文件。
var primeWorker = new Worker('prime.js');
启动Worker
要启动一个Worker,则父线程向worker传递一个信息,如下所示:
var current = $('#prime').attr('value');
primeWorker.postMessage(current);
父页面可以通过postMessage接口与worker进行通信,这也是跨源通信(cross-origin messaging)的一种方式。通过postMessage接口除了可以向worker传递私有数据类型,它还支持JSON数据结构。但是,你不能传递函数,因为函数也许会包含对潜在DOM的引用。
“父线程和worker线程有它们各自的独立空间,信息主要是来回交换而不是共享。”
信息在后台运行时,先在worker端序列化,然后在接收端反序列化。鉴于此,不推荐向worker发送大量的数据。
父线程同样可以声明一个回调函数,来侦听worker完成任务后发回的消息。这样,父线程就可以在worker完成任务后采取些必要的行动,比如更新DOM元素。如下代码所示:
primeWorker.addEventListener('message', function(event){
console.log('Receiving from Worker: '+event.data);
$('#prime').html( event.data );
});
event对象包含两个重要属性:
target:用来指向发送信息的worker,在多元worker环境下比较有用。
data:由worker发回给父线程的数据。
worker本身是包含在prime.js文件中的,它同时侦听message事件,从父线程中接收信息。它同样通过postMessage接口与父线程进行通信。
self.addEventListener('message', function(event){
var currPrime = event.data, nextPrime;
setInterval( function(){
nextPrime = getNextPrime(currPrime);
postMessage(nextPrime);
currPrime = nextPrime;
}, 500);
});
在本文例子中,我们寻找下一个最大的质数,然后不断将结果发回至父线程,同时不断更新界面以显示新的值。在worker的代码中,字段self和this都是指向全局作用域。Worker既可以添加事件侦听器来侦听message事件,也可以定义一个onmessage处理器,来接收从父线程发回的消息。
寻找下一个质数的例子显然不是worker的理想用例,但是在此选用这个例子是为了说明消息传递的原理。之后,我们会挖掘些可以通过web worker获得益处的实际用例。
8. 什么是WebService还有什么是api
api:应用程序开发接口。一般是提供一些库文件,然后调用。优点:效率高,集成度好;缺点:需要本地修改代码,依赖性比较大。
webservice:顾名思义是网站式服务,也就是说通过网址接入的方式访问服务,不需要本地调用api。优点:通过网络访问,与语言无关;需要网络支持,受网络及服务端性能限制。
视图:估计你的意思是通过远程访问数据库视图吧,这种就直接访问人家数据库了,需要的是数据库驱动和网络支持。优点:直接看到数据,便于处理;缺点:需要明白人家的数据结构和逻辑,不透明。
ftp:这种就比较牵强了,通过ftp交换文件,解析文件来传递数据信息。优点:传统的ftp协议很通用,便于部署维护;缺点:需要自己解析和处理文件格式。
9. 在webworker线程中可以使用indexedDB/localstorage吗
创建web worker
可以使用web workerAPI轻松的创建一个worker实例,例如:
var worker = new Worker("worker.js")
上面个的这行代码将会加载worker.js这个文件,然后再后台运行。你需要调用Worker()这个构造函数,并将需要在后台执行的文件的URI作为参数。如果你想从worker中得到数据,你需要注册该worker的onmessage事件处理函数,例如:
var worker = new Worker("router.js");
worker.onmessage = function(event){
console.log("called here form the router");
}
同样你也可以通过addEventListener来监听你的worker,
var worker = new Worker("router.js")
worker.addEventListener('message',function(event){
console.log("called here form the router");
},false);
worker.postMessage();//启动这个worker
web worker能做什么?不能做什么?
worker是不能访问“父”页面(即创建页面)的dom,他不能访问以下任何一个对象:
window 对象
document对象
parent对象
并且最后同样重要的是,在worker中不能使用依赖以上对象的javascript库,像jQuery。
由于多线程性质,web worker 只能访问某些特定的javascript特性。下面这些列表时他可以访问的
navigator对象
location对象(只读)
XMLHttpRequest方法
atob()、btoa()方法,可以讲base64编码转成二进制数据,或逆操作
setTimeout() / clearTimeout() and setInterval() / clearInterval()
mp()
应用程序缓存
可以通过importScripts()方法,导入外部js
创建次级worker 即 worker中创建worker
web worker 的执行
在web worker线程自身中,代码会自上而下的同步执行,之后他们会进入到事件响应的异步阶段。这样,就允许将web worker分成两大类:
注册了onmessage事件相应程序的web worker,用来长时间执行任务,并且在后台执行。这个web worker是不会推出的,因为他一直监听新的消息
另一种是没有注册onmessage事件的web worker,处理一个独立的任务(可以从web app 主线程中脱离的),例如抓取和解析超大的json对象。这样的web worker一点操作结束就会退出。(在某些情况下,如果你注册了callback处理,那么将会等待所有的callback结束后再退出。)
10. web workers 有哪些api
Web Workers 是一种机制,从一个web应用的主执行线程中分离出一个后台线程,在这个后台线程中运行脚本操作。这个机制的优势是耗时的处理可以在一个单独的线程中来执行,与此同时,主线程(通常是UI)可以在毫不堵塞的情况下运行。
Web Workers概念和用法
一个worker是一个使用构造函数(例如:Worker())来创建的对象,在一个命名的JS文件里面运行,这个文件包含了在worker线程中运行的代码。Workers不同于现在的window,是在另一个全局上下文中运行的。在专用的workers例子中,是由DedicatedWorkerGlobalScope对象代表了这个上下文环境(标准workers是由单个脚本使用的;共享workers使用的是SharedWorkerGlobalScope)。
在worker线程里面,你可以运行任何你喜欢的代码,当然也有一些例外。例如,你不能直接操作在worker里面的DOM,也不能使用window对象的一些默认方法和属性。但是,你可以使用window下许多可用的项目,包括WebSockets,类似IndexedDB和Firefox OS独有的Data Store API这样的数据存储机制。更多细节请查阅《Functions and classes available to workers》https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
Workers和主线程之间是通过系统消息来传递数据的。两边使用postMessage()方法来发送消息,通过onmessage事件处理程序来应答(消息是包含在Message事件的数据属性中。)系统消息是复制数据,不是共享数据。
只要workers和父页面同源,workers会轮流制造新workers。另外,workers会使用XMLHttpRequest作为网络I/O,但是有一个例外,XMLHttpRequest的responseXML和channel属性永远返回null。
除了专用workers,还有其他类型的worker:
l 在不同的windows(例如IFrames)运行的多个脚本可以使用共享workers,只要它们和workder同源就可以。共享workers比专用workers略复杂——脚本必须通过一个活动的端口来通信。预知详情请看《SharedWorker》https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker
l ServiceWorkders本质上是作为web应用间的代理服务,如果可能的话,作为浏览器和网络。ServiceWorkers(除其他事情外)致力于创造有效的离线操作,拦截网络请求,基于网络是否可用和服务器上更新过的资源进行适当的操作。ServiceWorkers也可以推送通知和后台同步API。