三、Ajax (一) -- Ajax 的引入【传统Web应用请求和响应的局限性】

最新推荐文章于 2021-08-06 17:44:39 发布

二旬、

最新推荐文章于 2021-08-06 17:44:39 发布

阅读量174

点赞数

分类专栏：黑马 -- web2

本文链接：https://blog.csdn.net/weixin_45602227/article/details/106191039

版权

黑马 -- web2 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、模拟传统web请求案例

	点击按钮获取时间。

在这里插入图片描述

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="./time"  method="get">
		当前时间:	${now}
		<input type="button" value="获取当前时间"><div id="box"></div>
	</form>
	
	<div style=" width:100px ;height:100px ; margin-top:100px;border:1px solid red ;overflow:hidden" >
		22222222222222222
		22222222222222222
		22222222222222222
	</div>
</body>

	
	<script type="text/javascript">
		

		var button=document.getElementsByTagName("input")[0];
		button.onclick=function(){
			var elem=document.forms[0];
			elem.submit();
		}
		
	</script>

</html>

TimeServlet.java

public class TimeServlet extends  HttpServlet {
		
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
			
		Date d=new Date();
		SimpleDateFormat sf=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
		String time = sf.format(d);
		
		req.setAttribute("now", time);
		
		req.getRequestDispatcher("./index2.jsp").forward(req, resp);
	}
}

实现效果

在这里插入图片描述

二、传统web请求的问题

	
		我们每一次点击按钮，都会重新刷新时间。
		这时候，如果点击后退按钮，会发现，之前缓冲的页面会出现。
		此时，相当于我们每点一次按钮，都会缓存一次相同的页面，只是时间发生了改变。
		假设这个页面，时间内容占10k。剩余不变的内容占90k。
		如果我们每刷新一次，都会缓存100k。
		对于不变的内容，显然发生了资源浪费的问题，

在这里插入图片描述

三、传统Web请求的特点


   （1）请求：浏览器以HTTP协议的方式提交请求到服务器
   （2）响应：服务器以HTTP协议的方式响应内容到浏览器
	          注意：HTTP是WEB大众化非安全协议	 	
	HTTPS是WEB安全协议，是基于HTTP协议的，且加了一些加密等特殊功能，常用于在线支付，或者是需要安全性较高的网站中，例如：12306网站	
	          HTTP请求有三个部份组成：请求行，请求头，请求体
	          HTTP响应有三个部份组成：响应行，响应头，响应体  
	          				
   （3）状态栏：有明显的进度条刷新现象，如果服务器响应较慢的话，进度条刷新也会变慢，IE9等中高版本浏览器，有明显转圈圈图标。
   
   （4）历史栏：会收集原来已访问过的web页面，进行缓存
   
   （5）缺点：不需变化的大量数据，也全部刷新，造成浏览器加载和处理负担	
   （6）可改进的地方：让不需变化的大量数据，原封不动，不用缓存到历史栏中，无需全部刷新，只刷新某些需要变化的数据区域，例如：当前时间的区域

三、传统Web请求的局限性

	
	对于传统的web请求，浏览器会缓存重复数据，造成内存浪费。

二旬、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三、Ajax (一) -- Ajax 的引入【传统Web应用请求和响应的局限性】

一、模拟传统web请求点击按钮获取时间。index.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title>&l
复制链接

扫一扫

专栏目录