首页 > 代码库 > 前端工程师基础课程作业
前端工程师基础课程作业
一、问答题：
（1）139邮箱资源服务器与缓存相关的响应首部是怎么配置的？
（2）登录139邮箱web2.3，在浏览器有缓存的情况下，刷新页面，浏览器会不会重新发送请求获取静态资源？如果会，请列出与缓存相关的请求首部以及响应状态码；如果不会，请说明原因。
（3）请指出Cache-Control与Expires的区别
（4）新功能上线后，如何清空浏览器的缓存，让用户获取最新的资源文件？
问题1、问题2 可用Fiddler抓包然后截图说明。
二、编程题：
请写一个页面，并封装相应的JS代码，完成139邮箱的写信功能，无需调用邮箱组件，完成发信功能即可。
我的答案：
一 问答题：
（1）、139邮箱资源服务器与缓存相关的响应首部配置如下图所示：
（2）、依然会重新发送请求获取静态资源，服务器响应304 Not Modified，所以会使用本地资源。
从请求头部可知缓存max-age = 0，没有缓存请求，所以会再发送请求。
（3）、
网页的缓存是由HTTP消息头中的“Cashe-control”来控制的，其中max-age的值表示在此值内的时间里不会重新访问服务器。
Expires 表示存在时间，允许客户端在这个时间之前不去检查（发请求），等同max-age的效果。但是如果同时存在，则被Cache-Control的max-age覆盖。
Cache-control:
根据是否可缓存分为
Public 指示响应可被任何缓存区缓存。
Private 指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的
部分响应消息，此响应消息对于其他用户的请求无效。
no-cache 指示请求或响应消息不能缓存（HTTP/1.0用Pragma的no-cache替换）
根据什么能被缓存
no-store 用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
根据缓存超时
max-age 指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。
min-fresh 指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
max-stale 指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。
Expires:
数据包中的格式：Expires = "Expires" ":" HTTP-date
例如Expires: Thu, 01 Dec 1994 16:00:00 GMT（必须是GMT格式）
（4）、
可以在地址后面加版本号。
因为HTTP请求时候，如果访问的路径不变，而客户端缓存中又有该文件时，浏览器会直接调用缓存中的文件。这样的话，即使服务器的资源文件更新了，但是客户端仍然有可能显示的是以前的资源文件。而加上新的版本号以后，浏览器会认为这是一个新的地址，会重新下载最新版本的文件。加版本号会强制浏览器更新，清空浏览器的缓存，让用户获取最新的资源文件。
二、编程题：
我的思路是
1、用139邮箱的写信功能发送一封信件，通过Fiddler抓包获取邮件发送接口。
2、通过抓包，在TextView中观察发送出去的数据。
3、编写写信页面（包含收件人、主题、正文），命名为index.html，将其挂载在Fiddler上。
4、获取登陆后URL中sid的值。
5、用ajax将写信页面中的收件人、主题、正文的值传到服务器。
HTML代码：
<!DOCTYPE><html><head><meta charset="UTF-8"><title>139邮箱</title><script charset="utf-8" src="javascript.js" type="text/javascript"></script></head><body> <!--以下这个table包含收件人、主题、正文--> <table align="center" style="margin-top:150px" > <tr> <th colspan=‘2‘ align="center">139邮箱写信页面</th> </tr> <tr> <td align="right">收件人：</td> <td><input type="text" name="to" style="width:300px"></td> </tr> <tr> <td align="right">主题：</td> <td><input type="text" name="subject" style="width:300px" ></td> </tr> <tr> <td align="right">正文：</td> <td> <textarea rows="5" cols="50" name="content"></textarea> </td> </tr> <tr> <td colspan=‘2‘ align="right"><input type="button" value="发送" onclick="send();"/></td> </tr> </table> <div id="resText"></div> <!--包含收件人、主题、正文的table结束--> </body></html>
JS代码：
function send() { function QueryString(){ //这个函数是获取sid值 var name; var value; var str=location.href; var num=str.indexOf("?") var str=str.substr(num+1); var arrtmp=str.split("&"); for(var i=0 ; i < arrtmp.length ; i++){ num=arrtmp[i].indexOf("="); if(num>0){ name=arrtmp[i].substring(0,num); value=arrtmp[i].substr(num+1); this[name]=value; } } } function cookieString(){ //这个函数是获取cookie中的电话值 var name; var value; var str=document.cookie; var arrtmp=str.split("; "); for(var i=0 ; i < arrtmp.length ; i++){ num=arrtmp[i].indexOf("="); if(num>0){ name=arrtmp[i].substring(0,num); value=arrtmp[i].substr(num+1); this[name]=value; } } } var Request1=new cookieString(); cookieNum = Request1["Login_UserNumber"]; email = cookieNum+"@139.com"; //调用函数QueryString()获取URL中的sid var Request=new QueryString(); ID=Request["sid"]; var to; //收件人 var subject; //主题 var content; //正文 to = document.getElementsByName("to")[0].value; //获取收件人地址 subject = document.getElementsByName("subject")[0].value; //获取主题内容 content = document.getElementsByName("content")[0].value; //获取正文内容 //将从页面获得的数据插入到抓包得到的数据 var str = ‘<object> <object name="attrs"><string name="id" /><string name="mid" /><string name="messageId" /><string name="account">""<‘+email+‘></string><string name="to">‘+to+‘</string><string name="cc" /><string name="bcc" /><int name="showOneRcpt">0</int><int name="isHtml">1</int><string name="subject">‘+subject+‘</string><string name="content">‘+content+‘</string><int name="priority">3</int><int name="signatureId">0</int><int name="stationeryId">0</int><int name="saveSentCopy">1</int><int name="requestReadReceipt">0</int><int name="inlineResources">1</int><int name="scheduleDate">0</int><int name="normalizeRfc822">0</int><array name="attachments"></array></object><string name="action">deliver</string> <int name="replyNotify">0</int><int name="returnInfo">1</int></object>‘; //先声明一个异步请求对象 var xmlHttpReg = null; if (window.ActiveXObject) {//如果是IE xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg } //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求 if (xmlHttpReg != null) { xmlHttpReg.open("post", "http://appmail.mail.10086.cn/RmWeb/mail?func=mbox:compose&categroyId=103000000&sid="+ID , true); xmlHttpReg.send(str); xmlHttpReg.onreadystatechange = doResult; //设置回调函数 } //回调函数，一旦readyState的值改变,将会调用这个函数,readyState=4表示完成相应设定函数doResult() function doResult() { if (xmlHttpReg.readyState == 4) {//4代表执行完成 if (xmlHttpReg.status == 200) {//200代表执行成功 //将xmlHttpReg.responseText的值赋给ID为resText的元素 document.getElementById("resText").innerHTML = xmlHttpReg.responseText; } } } }
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。