码迷,mamicode.com
首页 > 其他好文 > 详细

前端工程师基础培训_问答(139邮箱)

时间:2014-07-25 18:56:42      阅读:624      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   使用   os   文件   

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

第(2)题:

第一次请求如下:
bubuko.com,布布扣
 
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
    从上面两个图可以看出,请求头部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的.)

有缓存之后再刷新:
bubuko.com,布布扣
bubuko.com,布布扣
所以刷新之后会重新请求静态资源。但是响应状态码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 = [ ‘<object>‘,
 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 = 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").value = "";
 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").value = "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、邮件发送成功会弹出发送成功的提示。

 

前端工程师基础培训_问答(139邮箱),布布扣,bubuko.com

前端工程师基础培训_问答(139邮箱)

标签:style   blog   http   java   color   使用   os   文件   

原文地址:http://www.cnblogs.com/jq-melody/p/3868069.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!