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",这里提到的很多建议即有利于改进针对触屏设备的设计方式,同时也不会削弱传统键鼠设备上的用户体验。比如,放在页面右侧的导航列表可以对触屏设备的用户更加友好。因为多数人习惯用右手点击操作,而左手负责握住设备;这样,放在右侧的导航列表即方便右手的点击,又可以避免被握着设备的左手不小心触碰到。而这一点与键鼠设备用户的习惯完全不矛盾。