當前位置:首頁 » 網頁前端 » web響應教程
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web響應教程

發布時間: 2022-12-11 00:13:31

A. javaweb如何實現請求和響應

先來看一個流程圖:


伺服器處理請求的流程:

(1)伺服器每次收到請求時,都會為這個請求開辟一個新的線程。

(2)伺服器會把客戶端的請求數據封裝到request對象中,request就是請求數據的載體!

(3)伺服器還會創建response對象,這個對象與客戶端連接在一起,它可以用來向客戶端發送響應。

由流程圖可以看出,在JavaWeb的請求與響應中,最重要的兩個參數為request以及response,這兩參數在Servlet的service( )方法中。

1、response概念:

response是Servlet.service方法的一個參數,類型為javax.servlet.http.HttpServletResponse。在客戶端發出每個請求時,伺服器都會創建一個response對象,並傳入給Servlet.service()方法。response對象是用來對客戶端進行響應的,這說明在service()方法中使用response對象可以完成對客戶端的響應工作。

response對象的功能分為以下四種:

(1)設置響應頭信息

(2)發送狀態碼

(3)設置響應正文

(4)重定向

2、response響應正文

response是響應對象,向客戶端輸出響應正文(響應體)可以使用response的響應流,repsonse一共提供了兩個響應流對象:

(1)PrintWriter out = response.getWriter():獲取字元流;

(2)ServletOutputStream out = response.getOutputStream():獲取位元組流;

當然,如果響應正文內容為字元,那麼使用response.getWriter(),如果響應內容是位元組,例如下載時,那麼可以使用response.getOutputStream()。

注意,在一個請求中,不能同時使用這兩個流!也就是說,要麼你使用repsonse.getWriter(),要麼使用response.getOutputStream(),但不能同時使用這兩個流。不然會拋出illegalStateException異常。

B. 如何將web頁面改成響應式

第一步:檢測網頁響應式
瀏覽器打開調試模式,打開響應式設計模式,在預覽區域拖動大小范圍,如果頁面元素隨大小變化而自適應,則頁面是響應式頁面,反之,頁面是固定非響應式頁面。如圖:

第二步:編輯網頁源文件
用Dreamweaver打開頁面源文件,查看代碼樣式及文件結構,(Web頁面的視覺效果由CSS樣式表文件控制)。如圖:

第三步:植入響應式代碼
在CSS樣式表中插入以下代碼:
@media screen and (min-width:200px) and (max-device-width:640px){
/*這里寫元素的樣式*/
}
代碼解釋:這句代碼是指定了在200像素~640像素之間的終端,顯示的效果,在其他終端不顯示。

第四步:橫屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:auto; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示(全屏拉伸縮放無滾動條),垂直方向用滾動條展示。如圖:

第五步:豎屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:auto;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示(全屏拉伸縮放無滾動條),垂直方向用滾動條展示。如圖:

第六步:全屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示(全屏拉伸縮放無滾動條),垂直方向用滾動條展示。如圖:

7
第七步:加工檢測
響應式設計完成之後,用不同的終端全部檢測一遍,有不合格的地方繼續修改,這是程序員必須知道的也不能忽視的。

C. 四十二、移動端web開發之響應式布局

就是使用媒體查詢針對不同寬度的設備進行布局和樣式的設置,從而適配不同設備的目的。
設備的劃分情況:

響應式需要一個父級作為布局容器,來配合子級元素來實現變化效果。
原理就是在不同屏幕下,通過媒體查詢來改變這個布局容器的大小, 再改變裡面子元素的排列方式和大小,從而實現不同屏幕下,看到不同的頁面布局和樣式變化。
父容器版心的尺寸劃分

但是我們也可以根據實際情況自己定義劃分

bootstrap來自Twitter(推特),是目前最受歡迎的前端框架。bootstrap是基於HTML、CSS和JavaScript的,它簡潔靈活,使得web開發更加快捷。
中文網 官網 推薦網站
框架:顧名思義就是一套架構,它有一套比較完整的網頁功能解決方案,而且控制權在框架本身,有預制樣式庫、組件和插件。使用者要按照框架所規定的某種規范進行開發。

在現階段,我們還沒有接觸JS相關課程,所以我們只考慮使用它的樣式庫。
Bootstrap使用四步曲:

bootstrap需要為頁面內容和柵格系統包裹一個 .container 或者 .container-fluid 容器,它提供了兩個作此用處的類。

.container

.container-fluid

柵格嵌套
柵格系統內置的柵格系統將內容再次嵌套。簡單理解就是一個列內再分成 若干份小列。我們可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內。

列偏移
使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距(margin)。

列排序
通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列(column)的順序。

響應式工具
為了加快對移動設備友好的頁面開發工作,利用媒體查詢功能,並使用這些工具類可以方便的針對不同設備展示或隱藏頁面內容。

演示效果

D. 電腦web沒有響應,怎樣設置

尊敬的用戶您好:
可能是因為計算機的網路連接使用了代理伺服器造成的。代理伺服器可以用作偽裝IP、切換連接,使本機的網路連接通過另一台遠程計算機進行轉換,許可權是遠程計算機持有的許可權,IP是遠程伺服器的IP,收到的數據是從遠程伺服器發送的。
當計算機設置了代理伺服器之後,就會在每一次請求網路連接時自動連接到遠程伺服器,請求成功後就開始使用遠程伺服器進行網路訪問。因此,如果連接到遠程伺服器失敗,就會導致整個網路連接直接斷開,除非切換一個代理伺服器或者取消代理設置,否則不可能恢復正常網路連接。
Web代理是現在最常用的、Windows默認的代理伺服器連接方式,並且通過Windows進行代理時無法選擇其他代理方式。如果數據傳輸過程中出現問題或者雙方代理連接方式不一致,也可能導致代理伺服器出現問題,無法響應。
因此,要解決這個問題,應當檢查與代理伺服器之間的網路連接是否正常。Web代理方式也可能導致問題,因此也需要檢查代理伺服器是否使用了其他系統,不能兼容Web連接方式。
您可以在安徽電信網上營業廳選購電信手機,網廳辦理合約機贈送高額話費,可以0元購機,非常優惠,目前多個品牌4G機型全面上市!

E. 做響應式web 頁面怎麼設計

響應式Web設計的方法
介紹完響應式Web的背景和概念之後,是時候該介紹具體的實現方法了,其實響應式Web設計的方法很簡單,就是利用CSS3的媒體查詢Media Queries和Viewport來解決問題的。
首先我們一起來看看Media Queries,這里我只會對其做一個簡單的列舉介紹。
通過媒體查詢的設置,我們可以根據屏幕寬度、屏幕方向等各個屬性來載入不同場景下不同的CSS文件來渲染頁面的視覺風格。具體的使用方法有以下兩種:
1、通過link標簽:
<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />

示例代碼代表當當前屏幕寬度小於479px的時候,載入testcssbywidth1.css文件來渲染頁面。
2、CSS中直接設置:
@media screen and (max-width:479px) {
/* 具體的CSS屬性設置 */
}
對於Media Queries的一些常用屬性,只對常用的幾個做一個簡單列舉說明,其他的屬性請各位自行查閱相關資料:
width:描述終端設備顯示區域的寬度,接受max/min的前綴;
height:描述終端設備顯示區域的高度,接受max/min的前綴;
device-width:描述終端設備屏幕的寬度,接受max/min的前綴;
device-height:描述終端設備屏幕的高度,接受max/min的前綴;
orientation:描述終端設備處於橫屏還是豎屏的狀態,取值分別為:landscape/portrait。
當我們調整瀏覽器大小的時候,上面通過媒體查詢屬性的操作就可以完成響應式Web設計的工作,但是這卻不能滿足移動終端的瀏覽器,因為移動瀏覽器默認頁面是為寬屏幕設計的,所以會把他縮小來適應小屏幕,但是終端設備卻無法識別正確的寬度,所以光靠媒體查詢是解決不了移動終端設備的響應式Web設計的

F. 求教web請求響應的流程

你仔細看下web.xml的介紹。

每個servlet都會映射到URL 用戶請求這個URL就定位到servlet了 或者把URL寫到form的action屬性

servlet到jsp。在servlet中使用dispath,就行了

G. web響應式怎麼把水波動弄為動畫效果

在製作頁面切換。首先打開web響應式軟體,進入製作頁面,然後選擇高級模式,點擊水波動,最後將其切換為動畫控制項即可。

H. web響應式網站怎麼做

Step1:信息架構,確定內容策略。
根據產品定位和用戶分析,交互設計師確定站點信息架構。(信息架構呈現方式有很多種,這不是本文重點,不詳述)。
這時候可以明確這個產品有多少頁面,每個頁麵包含多少內容,內容優先順序是什麼。很多產品包含N多頁面,每個頁面一一考慮響應式設計容易造成混亂且成 本巨大。所以下一步重要工作是分析頁面類型把頁面歸類。以玩客為例,可以把10多個頁面分成三類:列表類頁面、詳情類頁面、操作類頁面。
Step2:響應式移動框架
先說下為什麼第二步要先設計移動框架。移動優先是移動互聯網浪潮下應運而生的理念,由Luke Wroblewski最早提出。移動優先並不是指移動更重要,響應式設計理念里設備是同等重要的。它是指優先設計手機端的體驗,有三個原因:
手機讓設計專注,強迫你想清楚什麼信息是最重要的。因為手機屏幕小,每屏呈現的內容少;觸屏手機使用手指操作而非滑鼠這樣的精密設備來操作,對操 作有更高要求;手機使用場景更加豐富,很多場景用戶是缺乏耐心的,比如當你排隊看電影正在找手機上的電子票,馬上排到你了翻半天卻遲遲找不到那張票這是多 么令人崩潰的事情。
手機許多特性讓設計更強大。手機上的語音輸入、地理位置定位、豐富的手勢操作、越來越多感測器,手機交互比PC擁有更多可能性。從手機開始設計,讓你更早地思考如何發揮這些特性。
手機正在迅猛增長。手機即將超越PC,成為最主流的上網方式,這個趨勢是不可逆的。
從移動開始做設計對習慣了PC環境的設計師可能是一種挑戰,思考方式工作習慣都被迫做出改變。但這種改變必須去適應,因為用戶習慣在改變。
回正題,上一步已經把頁面歸類並確定每個頁面內容優先順序,現在接著分析每種類型頁面的導航、主體內容等框架結構,最終得出一份框架結構表。從玩客框 架結構看出,全局導航是所有頁面公共的,局部導航只有列表類頁面才有,詳情類頁面都有一個「頁面主人」信息,而關聯導航不是每個頁面都有。
Step3:響應式設計框架
根據手機端的框架拓展出平板和PC端框架。這是復雜產品實現響應式設計的關鍵步驟,它是讓眾多頁面有條理地響應起來的基礎。第一件事情是確定響應式 模式,即從手機到平板到PC,導航怎麼變化,頁面布局用哪種響應方式,根據內容優先順序如何調整模塊順序,等等。玩客在PC端以三欄布局為主,左邊欄作為局 部導航或者主人信息區,中間欄始終是頁面主體信息,當頁面需要關聯導航時統一放在右邊欄。
應式是一種設計理念與前端技術緊密結合的新興形態,鼓勵盡早進行跨職能溝通協作。交互確定響應式框架和柵格系統後,其他角色就可以同步開展工作 了。前端開始介入完成柵格和框架搭建,產出頁面基礎框架。視覺同步開始探索和定義視覺風格探索,制定視覺框架,產出風格關鍵詞、產品配色方案。整個過程需 要幾個角色不斷討論確定。
Step4:模塊設計
按照用戶體驗中的移動優先的原則應該先進行移動端的模塊細節設計,不過我們選擇了從PC端開始設計細節。因為PC端開發能夠充分暴露業務復雜度,項目團隊的設 計、開發、測試在PC環境下擁有成熟的工具和流程,從PC開始讓開發過程更順暢。所以個人認為移動優先是確定內容策略時應該遵循的理念,細節設計和開發過 程是否要移動優先,取決於產品定位和項目團隊情況。
響應式框架確定了頁面結構和響應模式,模塊設計這個過程開始完善所有信息排版和交互形式,這是交互設計師最熟練也是最耗時的工作。這個過程與傳統流程沒太大區別,只是心裡要不斷提醒自己,這個模塊不是只為這個設備設計,它在其它設備下會出問題嗎?
交互確定頁面模塊細節後可以抽取出產品用到的控制項、組件和公共模塊,現在視覺和前端開始做一件有別於傳統流程的事情。視覺根據前期定義的風格設計控組件和公共模塊的視覺效果,把它們拼成一個模擬的頁面,我們稱之為風格拼貼稿。前端再把風格拼貼稿里的控組件和公共模塊實現出來,統一維護一套組件規范代碼。
Step5:響應式模塊設計
PC端頁面模塊細節和風格拼貼稿完成後,剩下工作是拓展出平板和手機端的完整設計稿,前端產出全部響應式頁面代碼。進行響應式模塊設計時最需要關注的仍然是讓操作符合設備習慣,充分利用設備特性。
至此,一個全站響應式產品的頁面就陸續出來了。很多人認為響應式設計維護成本高的理由是一個頁面要同時設計多套設計稿。玩客這次經驗告訴我們,確定一套設計稿和柵格系統後再拓展出其它設備下的設計方案,工作量遠比想像中的低。
Step6:測試&討論&優化,提交開發
離大功告成還差最後一步,在真實設備下測試頁面效果,項目團隊討論並持續優化用戶體驗。
在提交開發之前需要盡早明確服務端響應(RESS) 的策略。服務端與客戶端結合是目前解決響應式頁面性能問題的最合理方案。哪些大圖片在移動設備下只需輸出小尺寸圖片?哪些內容在什麼設備下是不需要開發輸 出的?哪些可以減少輸出的數據數量?與開發團隊協作的響應式可以有效控制頁面文件大小,避免頁面成為移動設備上燒用戶流量的罪魁禍首。
測試通過後提交頁面進入開發環節。我們從可用性和可訪問性兩方面總結了一份響應式頁面測試checklist,測試要點包括但不限於以下內容。

I. WEB請求處理之瀏覽器響應

當我們使用瀏覽器進行瀏覽操作的時候,會產生一系列的數據請求。現在瀏覽器和伺服器之間的數據交互是基於B/S架構的,而這種架構是建立在HTTP請求的基礎上的,當我們在瀏覽器的地址欄中輸入一個網頁的地址後,會觸發一些列事件,如下圖所示:

以上就是我們訪問網頁時會觸發的一系列事件,也是web請求處理的基本流程,接下來對幾個概念詳細介紹.

TCP協議是OSI七層協議中傳輸層的一項協議,它是一種面向連接的可靠交付的數據傳輸協議,和UDP用戶數據報協議不同的是,它需要建立連接,並且需要無差錯和可靠地交付數據。通過TCP建立連接,需要經過三次握手,關閉TCP連接需要四次揮手。

OSI七層模型中TCP處於的層級位置如圖所示

TCP建立連接是為了可靠地傳輸數據,因此建立過程比較復雜,以確保可靠地傳輸數據。具體流程如下圖所示:

TCP四次揮手

當數據傳輸成功後需要關閉連接,這就是TCP四次揮手。四次揮手比握手還要復雜,具體流程如下圖所示:

在這個過程中,為什麼會涉及到四次揮手呢,這是因為在客戶端發送主動關閉連接請求時,伺服器端收到關閉請求並返回確認收到請求報文,但是伺服器不會立即關閉,因為在這個時間段內可能還會有數據傳送,伺服器端會繼續傳送數據給客戶端,當沒有數據傳送時,伺服器端會主動發送報文給客戶端請求關閉,等待客戶端返回確認時伺服器端就進入了close狀態。

從上面的OSI七層模型中我們可以看到HTTP處於七層協議中的應用層,也就是最接近用戶的一層。它主要是處理WEB數據請求,它是無狀態無連接的協議。無狀態是指上一次傳送的數據是沒有存儲下來的,下一次操作獲取不到上次的數據。無連接是指需要請求數據時才會建立連接,否則處於無連接狀態。在WtEB請求處理過程中,我們主要是關心HTTP請求頭和響應頭還有就是狀態碼.

下面是使用FIDDLER抓包工具抓取的請求包
CONNECT www..com:443 HTTP/1.1
Host: www..com:443
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36

人們習慣記憶域名,但機器間互相只認IP地址,域名與IP地址之間是多對多的關系,一個ip地址不一定只對應一個域名,且一個域名可以對應多個ip地址,它們之間的轉換工作稱為域名解析,域名解析需要由專門的域名解析伺服器來完成,整個過程是自動進行的。

由於DNS域名解析有些復雜,本文章就不就過多的講解。

總結:以上就是web請求處理中瀏覽器響應的相關知識,由於涉及到的 知識太多因此沒喲很詳細的將解,只將解了部分的重要內容,待到以後學習加深,進一步完善。

J. 什麼是響應式Web設計怎樣進行(4)

但是對於頁面中的文字內容信息來說,則不能簡單的只從"同比縮小"和"調整布局結構"這兩方面去處理。對於手機等移動設備來說,在文字內容方面,已經有了很多最佳實踐方式和指導原則:簡化的導航、更易聚焦的內容、以信息列表代替傳統的多行文案內容等。響應式Web設計的思想,一方面要保證頁面元素及布局具有足夠的彈性,來兼容各類設備平台和屏幕尺寸;另一方面,則是增強可讀性和易用性,幫助用戶在任何設備環境中都能更容易的獲取最重要的內容信息。有一條樣式代碼,我們已經使用了多年:display: none;我們可以在一個針對某類小屏幕設備的樣式表中使用它來隱藏掉頁面中的某些塊級元素,也可以使用前文的方法,通過JS判斷當前硬體屏幕規格,在小屏幕設備的情況下直接為需要隱藏的元素添加工具類class。比如,對於手機類設備,我們可以隱藏掉大塊的文字內容區,而只顯示一個簡單的導航結構,其中的導航元素可以指向詳細內容頁面。注意,不要使用visibility: hidden的方式,因為這只能使元素在視覺上不做呈現;display屬性則可幫助我們設置整塊內容是否需要被輸出。對於移動設備來說,避免這些不必要的資源浪費還是很重要的。我們來看一個簡單的示例:圖中上半部分是大屏幕設備所顯示的完整頁面,下面的則是該頁面在小屏幕設備的呈現方式。頁面HTML代碼如下:<p class="sidebar-nav"><a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a></p> <div id="content"> <h2>Main Content</h2></div><div id="sidebar-left"> <h2>A Left Sidebar</h2></div><div id="sidebar-right"> <h2>A Right Sidebar</h2> </div>下面是默認的主樣式表,其中,我們要隱藏掉鏈接導航部分(sidebar-nav),因為默認樣式適用的設備屏幕會足夠大,足夠顯示包括兩個側邊欄在內的所有內容。#content{ width: 54%; float: left; margin-right: 3%;}#sidebar-left{ width: 20%; float: left; margin-right: 3%;}#sidebar-right{ width: 20%; float: left;} .sidebar-nav{display: none;}下面是用於小屏幕移動設備的樣式表代碼。現在,我們要隱藏掉兩個側邊欄,並使sidebar-nav顯示出來。藉助JavaScript,當用戶點擊sidebar-nav中的鏈接時,對應的側邊欄可以恢復顯示。當然,觸發恢復顯示的方式有很多種,即可以通過JS改變側邊欄的display屬性值,也可以為其添加額外的布局樣式。#content{ width: 100%;}#sidebar-left{ display: none;}#sidebar-right{ .sidebar-nav{display: inline;}現在,我們的頁面已經可以隨著設備和屏幕規格的變更,響應式的做到元素的同比縮放、布局結構的改變、內容的優化調整。特別是對於手機設備,我們還要在實踐過程中注意一些該類設備共有的設計指導原則。比如,針對手機設備,使用一個特定的樣式,將頁面原有的文字導航元素變為更易操作的圖標形式。下面的一些文章資源可作參考閱讀:Mobile Web Design Trends For 20097 Usability Guidelines for Websites on Mobile Devices觸屏與滑鼠觸屏設備已經成為主流。雖然目前多數觸屏設備還是小屏幕類型的產品,比如手機,但是市場上越來越多的大屏幕設備也開始使用觸屏技術;且不說iPad一類的平板電腦,就連一些筆記本和台式機也加入了這一行列。比如HP Touchsmart tm2t,即使用傳統的鍵鼠設備,同時也加入了觸屏技術。相比於傳統的基於滑鼠指針的互動,觸屏技術顯然帶來了截然不同的交互方式與相應的設計規范;兩者又有各自所適用的領域。所幸,要使我們的設計方案同時滿足這兩類設備的規范,並非一件難事,只是有些地方需要注意。比如,觸屏設備無法反映CSS定義的hover行為及相應的樣式,因為它沒有滑鼠指針的概念,手指點擊就是click行為。所以不要讓任何功能依賴於對hover狀態的觸發。有興趣的話,可以讀讀這篇"Designing for Touchscreen",這里提到的很多建議即有利於改進針對觸屏設備的設計方式,同時也不會削弱傳統鍵鼠設備上的用戶體驗。比如,放在頁面右側的導航列表可以對觸屏設備的用戶更加友好。因為多數人習慣用右手點擊操作,而左手負責握住設備;這樣,放在右側的導航列表即方便右手的點擊,又可以避免被握著設備的左手不小心觸碰到。而這一點與鍵鼠設備用戶的習慣完全不矛盾。