首页 > 代码库 > 前端工程师基础培训_问答（139邮箱）

前端工程师基础培训_问答（139邮箱）

2024-07-14 00:03:07   229人阅读

一、问答题：
（1）139邮箱资源服务器与缓存相关的响应首部是怎么配置的？
（2）登录139邮箱web2.3，在浏览器有缓存的情况下，刷新页面，浏览器会不会重新发送请求获取静态资源？如果会，请列出与缓存相关的请求首部以及响应状态码；如果不会，请说明原因。
（3）请指出Cache-Control与Expires的区别
（4）新功能上线后，如何清空浏览器的缓存，让用户获取最新的资源文件？
问题1、问题2 可用Fiddler抓包然后截图说明。
二、编程题：
请写一个页面，并封装相应的JS代码，完成139邮箱的写信功能，无需调用邮箱组件，完成发信功能即可。
 
 
 
第（1）题：
139邮箱资源服务器与缓存相关的响应首部配置如下：

响应头部Cache-Control:max-age=86400,所以响应头部会缓存一天。

第（2）题：

第一次请求如下：
 
    从上面两个图可以看出，请求头部Cache-Control:max-age=0,所以请求头部不会缓存，响应头部Cache-Control:max-age=86400,所以响应头部会缓存一天。还可以看到有Expires: Wed, 23 Jul 2014 02:45:29 GMT，但Max-age的优先级也是高于Expires的，所以以Max-age为准。（PS：max-age: 请求:强制响应缓存者，根据该值,校验新鲜性.即与自身的Age值,与请求时间做比较.如果超出max-age值,则强制去服务器端验证.以确保返回一个新鲜的响应.其功能本质上与传统的Expires类似,但区别在于Expires是根据某个特定日期值做比较.一但缓存者自身的时间不准确.则结果可能就是错误的.而max-age,显然无此问题. Max-age的优先级也是高于Expires的.）

有缓存之后再刷新：
所以刷新之后会重新请求静态资源。但是响应状态码304.
 
第（3）题：
HTTP头的Expires与Cache-control区别：

1.概念
Cache-control 用于控制HTTP缓存（在HTTP/1.0中可能部分没实现，仅仅实现了 Pragma: no-cache）
Expires 表示存在时间，允许客户端在这个时间之前不去检查（发请求），等同max-age的效果。但是如果同时存在，则被Cache-Control的max-age覆盖。
2格式
Cache-control: 
数据包中的格式：
Cache-Control: cache-directive
cache-directive可以为以下：
request时用到：
| "no-cache"
| "no-store"
| "max-age" "=" delta-seconds
| "max-stale" [ "=" delta-seconds ]
| "min-fresh" "=" delta-seconds
| "no-transform"
| "only-if-cached"
| "cache-extension"
response时用到：
| "public"
| "private" [ "=" <"> field-name <"> ]
| "no-cache" [ "=" <"> field-name <"> ]
| "no-store"
| "no-transform"
| "must-revalidate"
| "proxy-revalidate"
| "max-age" "=" delta-seconds
| "s-maxage" "=" delta-seconds
| "cache-extension"
部分说明：
根据是否可缓存分为
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格式）

3.应用
通过HTTP的META设置expires和cache-control

 

第（4）题：

在地址栏后加上？v=‘版本号‘。

因为http请求时，如果访问的路径不变，而客户端缓存中又有该文件时，浏览器会直接调用缓存中的文件，这样的话，即使服务端的内容变化了，但是客户端仍然有可能显示的是旧文件，而加上新的版本号以后，浏览器会认为这是一个新的访问地址，会重新下载最新版本的文件。从而会强制浏览器更新。



二、实现写信并发送邮件功能代码如下：
index.html页面（写信页）
 1 <html> 2 <head> 3 <title>写邮件</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <link type="text/css" rel="stylesheet" href="../css/main-index.css"> 6 <script type="text/javascript" src="../js/createAjax.js"></script> 7 </head> 8 <body> 9 <table>10     <tr><td colspan="2" class="title">139邮箱发邮件</td></tr>11     <tr>12         <td>收件人：</td>13         <td>14         <input type="text" id="receiver" onFocus="focusEvent()" onBlur="blurEvent()" value="example@139.com"/>15 16         <div id="reminder">17             18         </div>19         </td>20     </tr>21     <tr>22         <td>主&nbsp;&nbsp;&nbsp;题：</td>23         <td><input type="text" id="theme"/></td>24     </tr>25     <tr>26         <td>内&nbsp;&nbsp;&nbsp;容：</td>27         <td><textarea cols="50" rows="20" id="content"></textarea></td>28     </tr>29     <tr>30     <td></td><td><input type="button" value="发送" onClick="post();"/></td>31     </tr>32 </table>33 34 </body>35 </html>
createAjax.js代码如下：
  1 //创建ajax的兼容所有浏览器的httpRequest对象  2 function createXMLHttpRequest(){  3     var request = false;  4     //一般先判断非IE浏览器  5     //window对象中有XMLHttpRequest存在就是非IE，包括（IE7，IE8）  6     if(window.XMLHttpRequest){  7         request=new XMLHttpRequest();//非IE以及IE7，IE8浏览器  8   9         if(request.overrideMimeType){ 10             request.overrideMimeType("text/xml");//重置mime类型 11         } 12      13     //window对象中有ActiveXObject属性存在就是IE浏览器的低版本 14     }else if(window.ActiveXObject){ 15  16         var versions=[‘Microsoft.XMLHTTP‘, ‘MSXML.XMLHTTP‘, ‘Msxml2.XMLHTTP.7.0‘,‘Msxml2.XMLHTTP.6.0‘,‘Msxml2.XMLHTTP.5.0‘, ‘Msxml2.XMLHTTP.4.0‘, ‘MSXML2.XMLHTTP.3.0‘, ‘MSXML2.XMLHTTP‘];//各种IE浏览器创建Ajax对象时传递的参数 17  18         for(var i=0; i<versions.length; i++){ 19                 try{ 20                     request=new ActiveXObject(versions[i]);//各个IE浏览器版本的参数不同 21  22                     if(request){ 23                         return request; 24                     } 25                 }catch(e){ 26                     request=false; 27                 } 28         } 29     } 30     return request; 31 } 32  33 function post(){ 34     var ajax = createXMLHttpRequest(); 35     var sid = location.href.match(/sid=([^?#&]*)[?#&]?/)[1]; 36     var receiver = document.getElementById("receiver").value; 37     var theme = document.getElementById("theme").value; 38     var content = document.getElementById("content").value; 39     var account = document.cookie.match("(^|)Login_UserNumber=([^;]*)(;|$)")[2]; 40     console.log(receiver); 41     console.log(theme); 42     console.log(content); 43     console.log(account); 44      45     var data = http://www.mamicode.com/[ ‘‘, 46                ‘<object name="attrs">‘, 47                  ‘<string name="id" />‘, 48                  ‘<string name="mid" />‘, 49                  ‘<string name="messageId" />‘, 50                  ‘<string name="account">‘ + account + ‘@139.com</string>‘, 51                  ‘<string name="to">‘ + receiver + ‘</string>‘, 52                  ‘<string name="cc" />‘, 53                  ‘<string name="bcc" />‘, 54                  ‘<int name="showOneRcpt">0</int>‘, 55                  ‘<int name="isHtml">1</int>‘, 56                  ‘<string name="subject">‘ + theme + ‘</string>‘, 57                  ‘<string name="content">‘ + content + ‘</string>‘, 58                  ‘<int name="priority">3</int>‘, 59                  ‘<int name="signatureId">0</int>‘, 60                  ‘<int name="stationeryId">0</int>‘, 61                  ‘<int name="saveSentCopy">1</int>‘, 62                  ‘<int name="requestReadReceipt">0</int>‘, 63                  ‘<int name="inlineResources">1</int>‘, 64                  ‘<int name="scheduleDate">0</int>‘, 65                  ‘<int name="normalizeRfc822">0</int>‘, 66                  ‘<array name="attachments">‘, 67                  ‘</array>‘, 68                ‘</object>‘, 69                ‘<string name="action">deliver</string>‘, 70                ‘<int name="replyNotify">0</int>‘, 71                ‘<int name="returnInfo">1</int>‘, 72              ‘</object>‘].join(""); 73  74     var url="http://appmail.mail.10086.cn/RmWeb/mail?func=mbox:compose&sid="+sid; 75     ajax.open("post",url,true); 76     ajax.onreadystatechange = function(){ 77         if(ajax.readyState==4){//数据返回成功   78             var xmlData =http://www.mamicode.com/ ajax.responseText;   79             if(xmlData.indexOf("S_OK") >= 0){ 80                 alert("邮件发送成功！"); 81             }else{ 82                 alert("抱歉，邮件发送失败！请检查。。。"); 83             } 84             console.log(xmlData); 85             console.log(xmlData.indexOf("S_OK")); 86         } 87     } 88     ajax.send(data); 89 } 90  91 //收件人输入框聚焦时间 92 function focusEvent(){ 93     var val = document.getElementById("receiver").value; 94     var reminder = document.getElementById("reminder"); 95  96     if(val == "example@139.com"){ 97         document.getElementById("receiver").valuehttp://www.mamicode.com/= ""; 98         document.getElementById("receiver").style.color = "black"; 99     }100 101     reminder.innerHTML = "";102 }103 104 //收件人输入框失去焦点事件105 function blurEvent(){106     var val = document.getElementById("receiver").value;107     if(val == ‘‘){108         document.getElementById("receiver").valuehttp://www.mamicode.com/= "example@139.com";109         document.getElementById("receiver").style.color = "gray";110     }111 112     if(val.indexOf("@139.com") <= 0){113         var reminder = document.getElementById("reminder");114         var text_Fail = document.createTextNode("请输入正确的139邮箱");115         reminder.appendChild(text_Fail);116     }117 }
main-index.css文件如下：
body{    font-family:"微软雅黑";    color:black;}table{    margin:auto;}table tr td.title{    text-align:center;}#receiver{    color:gray;}#reminder{    float:right;    color:red;}
readMe.txt
看效果之前你需要这样做
1、先用fiddler挂载以下几个页面：
css/main-index.css
html/index.html
js/createAjax.js
2、然后进入139登录首页，登录账号即为发件人，发件人账号从cookie中获取。
3、写邮件时，需要填写收件人、主题以及邮件内容。
4、收件人没有填写时，默认是"example@139.com"，收件人格式不包含“@139.com”格式的视为不正确的139邮箱，会在输入框的后面出现提示。
5、邮件发送成功会弹出发送成功的提示。
 


























        

            
                
                  
                
                

                    联系

                    我们