導航:首頁 > IDC知識 > html5web伺服器

html5web伺服器

發布時間:2020-10-25 23:37:58

1、html5的離線web應用的瀏覽器和伺服器交互的過程要是沒有緩存怎麼辦

html5的離線web應用的瀏覽器和伺服器交互的過程要是沒有緩存就需要每次交互都要實時介面調用,增加網路開銷。
一、離線存儲的作用
1、用戶可離線訪問應用,這對於無法隨時保持聯網狀態的移動終端用戶來說尤其重要
2、用戶訪問本地的緩存文件,通常意味著更快的訪問速度
3、僅僅載入被修改過的資源,避免同一資源對伺服器多次的請求,大大降低了對伺服器的訪問壓力
二、實現離線存儲
1、在html標簽里通過manifest屬性引用一個cache.manifest文件,該文件里聲明了瀏覽器需緩存的所有資源文件,如下所示:
<!DOCTYPE html>
<html lang='cn' manifest='cache.manifest'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>離線緩存示例頁面</title>
<!-- CSS文件引用 -->
</head>

<body>
<!-- 各種標簽 -->
</body>

<!-- 各種腳本文件 -->
</html>
2、關於cache.manifest的定義
CACHE MANIFEST
# 注釋:需要緩存的文件,無論在線與否,均從緩存里讀取
chched.js
cached.css

# 注釋:不緩存的文件,無論緩存中存在與否,均從新獲取
NETWORK:
uncached.js
uncached.css

# 注釋:獲取不到資源時的備選路徑,如index.html訪問失敗,則返回404頁面
FALLBACK:
index.html 404.html

2、html5怎麼從服務端獲取數據

前端通過介面去訪問伺服器,伺服器通過腳本去取資料庫里的數據,並將數據組織成xml或者json數據格式發送給前端,前端使用一個操作句柄進行接收。技術就是採用ajax。可以使用jquery封裝好的$.ajax去非同步獲取後台的數據。
直接百度ajax用法:
$.ajax({
type: "POST",
url: url,
data:{},//數據
async: false,//同步
dataType: 'json',
success: function (data) {
alert(JSON.stringify(data))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("報錯");
}
});

3、jQuery Mobile+html5寫的頁面上傳的web伺服器,為什麼手機瀏覽器和電腦上CSS樣式,JS都無效果?

因為你的外部引用的jquery和css都找不到,ie能顯示估計是緩存的問題,附上圖片

4、如何將HTML5架設到自己的伺服器上

直接用ftp工具,將你.html或者.htm結尾的文件放到伺服器的運行目錄

然後通過你的網站/html名字.html

5、html5網站用什麼操作系統web伺服器

就拿微軟vs舉例:

WEB控制項就是微軟封裝的HTNL控制項,功能強大,能實現與後台交互問題。

而HTML控制項,出純粹是形成靜態頁面的元素!主要顯示的頁面的

6、html5開發的移動web app如何連接伺服器資料庫交互信息?

1、利用先進的WebRTC
WebRTC是一種新的Web標准,用於實現Web環境中的實時點對點通信,可以傳輸數據、語音和視頻。有一些第三方javascript庫可以方便的支持WebRTC,比如PeerJS - Simple peer-to-peer with WebRTC。
2、自行通過WebSockets實現
WebSockets是一種為實時雙向數據傳輸建立的Web傳輸協議,它使得伺服器端能夠主動push數據到瀏覽器端。WebSockets目前在移動端的支持要略好一點,iOS 7以上和Android 4.4以上都可以支持。如果使用Crosswalk打包,應該可以在更多版本的Android系統上使用。基於WebSockets的第三方庫也不少。

7、jQuery Mobile+html5寫的頁面上傳的web伺服器,為什麼手機瀏覽器和電腦上CSS樣式,JS都無效果?

因為你的外部引用的jquery和css都找不到,ie能顯示估計是緩存的問題,附上圖片

8、html5現在可以實現伺服器推送了嗎

對於某些類型的應用來說,伺服器推送事件是最佳的選擇。本文對伺服器推送技術進行了詳細的介紹,包含瀏覽器端和伺服器端的相應實現細節,為在實踐中使用該技術提供了指南。

對於一般的 Web 應用開發,大多數開發人員並不陌生。在 Web 應用中,瀏覽器和伺服器之間使用的是請求 / 響應的交互模式。瀏覽器發出請求,伺服器根據收到的請求來生成相應的響應。瀏覽器再對收到的響應進行處理,展現給用戶。響應的格式可能是 HTML、XML 或 JSON 等。隨著 REST 架構風格和 AJAX 的流行,伺服器更多地使用 JSON 作為響應的數據格式。Web 應用使用 XMLHttpRequest 對象來發送請求,並根據伺服器端返回的數據,對頁面的內容進行動態更新。通常來說,用戶在頁面上的操作,比如點擊或移動滑鼠,會觸發相應的事件。由 XMLHttpRequest 對象來發出請求,得到伺服器響應之後進行頁面的局部更新。這種方式的不足之處在於:伺服器端產生的數據變化不能及時地通知瀏覽器,而是需要等到下次請求發出時才能被瀏覽器獲取。對於某些對數據實時性要求很高的應用來說,這種延遲是不能接受的。
為了滿足這類應用的需求,就需要有某種方式能夠從伺服器端推送數據給瀏覽器,以保證伺服器端的數據變化可以在第一時間通知給用戶。目前常見的解決辦法有不少,主要可以分成兩類。這兩類方法的區別在於是否基於 HTTP 協議來實現。不使用 HTTP 協議的做法是使用 HTML 5 新增的 WebSocket 規范,而使用 HTTP 協議的做法則包括簡易輪詢、COMET 技術和本文中要介紹的 HTML 5 伺服器推送事件。下面會對這幾種技術進行介紹。
簡介
在介紹 HTML 5 伺服器推送事件之前,首先介紹一些上面提到的幾種伺服器端數據推送技術。第一種是 WebSocket。WebSocket 規范是 HTML 5 中的一個重要組成部分,已經被很多主流瀏覽器所支持,也有不少基於 WebSocket 開發的應用。正如名稱所表示的一樣,WebSocket 使用的是套接字連接,基於 TCP 協議。使用 WebSocket 之後,實際上在伺服器端和瀏覽器之間建立一個套接字連接,可以進行雙向的數據傳輸。WebSocket 的功能是很強大的,使用起來也靈活,可以適用於不同的場景。不過 WebSocket 技術也比較復雜,包括伺服器端和瀏覽器端的實現都不同於一般的 Web 應用。
除了 WebSocket 之外,其他的實現方式是基於 HTTP 協議來達到實時推送的效果。第一種做法是簡易輪詢,即瀏覽器端定時向伺服器端發出請求,來查詢是否有數據更新。這種做法比較簡單,可以在一定程度上解決問題。不過對於輪詢的時間間隔需要進行仔細考慮。輪詢的間隔過長,會導致用戶不能及時接收到更新的數據;輪詢的間隔過短,會導致查詢請求過多,增加伺服器端的負擔。
COMET 技術改進了簡易輪詢的缺點,使用的是長輪詢。長輪詢的方式在每次請求時,伺服器端會保持該連接在一段時間內處於打開狀態,而不是在響應完成之後就立即關閉。這樣做的好處是在連接處於打開狀態的時間段內,伺服器端產生的數據更新可以被及時地返回給瀏覽器。當上一個長連接關閉之後,瀏覽器會立即打開一個新的長連接來繼續請求。不過 COMET 技術的實現在伺服器端和瀏覽器端都需要第三方庫的支持。
綜合比較上面提到的 4 種不同的技術,簡易輪詢由於其本身的缺陷,並不推薦使用。COMET 技術並不是 HTML 5 標準的一部分,從兼容標準的角度出發,也不推薦使用。WebSocket 規范和伺服器推送技術都是 HTML 5 標準的組成部分,在主流瀏覽器上都提供了原生的支持,是推薦使用的。不過 WebSocket 規范更加復雜一些,適用於需要進行復雜雙向數據通訊的場景。對於簡單的伺服器數據推送的場景,使用伺服器推送事件就足夠了。
在瀏覽器支持方面,伺服器推送事件已經在除 IE 外的大部分桌面和移動瀏覽器上得到了支持。支持伺服器推送事件的瀏覽器及其版本包括:Firefox 6.0+、Chrome 6.0+、Safari 5.0+、Opera 11.0+、iOS Safari 4.0+、Opera Mobile 11.1+、Chrome for Android 25.0+、Firefox for Android 19.0+ 以及 Blackberry Browser 7.0+ 等。關於 IE 的支持,在下面的章節中有詳細的介紹。
下面對伺服器推送事件的規范進行具體的說明。
規范
Server-sent Events 規范是 HTML 5 規范的一個組成部分,具體的規範文檔見參考資源。該規范比較簡單,主要由兩個部分組成:第一個部分是伺服器端與瀏覽器端之間的通訊協議,第二部分則是在瀏覽器端可供 JavaScript 使用的 EventSource 對象。通訊協議是基於純文本的簡單協議。伺服器端的響應的內容類型是「text/event-stream」。響應文本的內容可以看成是一個事件流,由不同的事件所組成。每個事件由類型和數據兩部分組成,同時每個事件可以有一個可選的標識符。不同事件的內容之間通過僅包含回車符和換行符的空行(「\r\n」)來分隔。每個事件的數據可能由多行組成。代碼清單 1 給出了伺服器端響應的示例。
清單 1. 伺服器端響應的示例
data: first event

data: second event
id: 100

event: myevent
data: third event
id: 101

: this is a comment
data: fourth event
data: fourth event continue

如代碼清單 1 所示,每個事件之間通過空行來分隔。對於每一行來說,冒號(「:」)前面表示的是該行的類型,冒號後面則是對應的值。可能的類型包括:
類型為空白,表示該行是注釋,會在處理時被忽略。
類型為 data,表示該行包含的是數據。以 data 開頭的行可以出現多次。所有這些行都是該事件的數據。
類型為 event,表示該行用來聲明事件的類型。瀏覽器在收到數據時,會產生對應類型的事件。
類型為 id,表示該行用來聲明事件的標識符。
類型為 retry,表示該行用來聲明瀏覽器在連接斷開之後進行再次連接之前的等待時間。
在代碼清單 1 中,第一個事件只包含數據「first event」,會產生默認的事件;第二個事件的標識符是 100,數據為「second event」;第三個事件會產生類型為「myevent」的事件;最後一個事件的數據為「fourth event\nfourth event continue」。當有多行數據時,實際的數據由每行數據以換行符連接而成。
如果伺服器端返回的數據中包含了事件的標識符,瀏覽器會記錄最近一次接收到的事件的標識符。如果與伺服器端的連接中斷,當瀏覽器端再次進行連接時,會通過 HTTP 頭「Last-Event-ID」來聲明最後一次接收到的事件的標識符。伺服器端可以通過瀏覽器端發送的事件標識符來確定從哪個事件開始來繼續連接。
對於伺服器端返回的響應,瀏覽器端需要在 JavaScript 中使用 EventSource 對象來進行處理。EventSource 使用的是標準的事件監聽器方式,只需要在對象上添加相應的事件處理方法即可。EventSource 提供了三個標准事件,如表 1 所示。
表 1. EventSource 對象提供的標准事件

名稱
說明
事件處理方法

open 當成功與伺服器建立連接時產生 onopen
message 當收到伺服器發送的事件時產生 onmessage
error 當出現錯誤時產生 onerror
如之前所述,伺服器端可以返回自定義類型的事件。對於這些事件,可以使用 addEventListener 方法來添加相應的事件處理方法。代碼清單 2 給出了 EventSource 對象的使用示例。
清單 2. EventSource 對象的使用示例
var es = new EventSource('events');
es.onmessage = function(e) {
console.log(e.data);
};

es.addEventListener('myevent', function(e) {
console.log(e.data);
});

如代碼清單 2 所示,在指定 URL 創建出 EventSource 對象之後,可以通過 onmessage 和 addEventListener 方法來添加事件處理方法。當伺服器端有新的事件產生,相應的事件處理方法會被調用。EventSource 對象的 onmessage 屬性的作用類似於 addEventListener( 『 message 』 ),不過 onmessage 屬性只支持一個事件處理方法。
在介紹完伺服器推送事件的規范內容之後,下面介紹伺服器端的實現。

9、HTML5網頁怎樣獲得伺服器的更新 伺服器發送事件

Server-Sent 事件 - 單向消息傳遞Server-Sent 事件指的是網頁自動獲取來自伺服器的更新。以前也可能做到這一點,前提是網頁不得不詢問是否有可用的更新。通過伺服器發送事件,更新能夠自動到達。例子:Facebook/Twitter 更新、估價更新、新的博文、賽事結果等。瀏覽器支持所有主流瀏覽器均支持伺服器發送事件,除了 Internet Explorer。接收Server-Sent 事件通知EventSource 對象用於接收伺服器發送事件通知:實例var source=new EventSource("demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "
"; }; 例子解釋:創建一個新的 EventSource 對象,然後規定發送更新的頁面的 URL(本例中是 "demo_sse.php")每接收到一次更新,就會發生 onmessage 事件當onmessage 事件發生時,把已接收的數據推入 id 為 "result" 的元素中檢測Server-Sent 事件支持在上面的 TIY 實例中,我們編寫了一段額外的代碼來檢測伺服器發送事件的瀏覽器支持情況:if(typeof(EventSource)!=="undefined") { // Yes! Server-sent events support! // Some code..... } else { // Sorry! No server-sent events support.. } 伺服器端代碼實例為了讓上面的例子可以運行,您還需要能夠發送數據更新的伺服器(比如 PHP 和 ASP)。伺服器端事件流的語法是非常簡單的。把 "Content-Type" 報頭設置為 "text/event-stream"。現在,您可以開始發送事件流了。

10、html5如何製作網站並使用自己的伺服器?

這個問題太籠統了,使用 html5可以開發靜態網站,其實你這里的 html5 指的是 html5 + css3+ javascript ,當然很多人以為 h5 是一種技術,其實 h5 就是 html5 + css3+javascript .
h5本來是不存在的,由於使用html5+css3+javascript可以寫出那些炫酷的效果,而培訓機構太多,很多業務員直接就用h5來說,導致出現的新名詞。
其實主要使用的是html5的 canvas 結合css3的 2d, 3d,和javascript 等技術來實現的。
至於怎麼開發網站,這個還真的不是三言兩語能說得完的。使用伺服器,伺服器也分兩種,一種是需要備案的,一種是不需要備案的,單有伺服器也還不行,還要域名,先將域名解析到伺服器,然後通過 ftp上傳代碼到伺服器的指定位置,就可以通過域名來打開你的網站了。

與html5web伺服器相關的知識