首页 > 其他 > 详细

前端工程师基础课程作业

时间:2014-07-25 19:13:02      阅读:479      评论:0      收藏:0      [点我收藏+]
一、问答题:
(1)139邮箱资源服务器与缓存相关的响应首部是怎么配置的?
(2)登录139邮箱web2.3,在浏览器有缓存的情况下,刷新页面,浏览器会不会重新发送请求获取静态资源?如果会,请列出与缓存相关的请求首部以及响应状态码;如果不会,请说明原因。
(3)请指出Cache-Control与Expires的区别
(4)新功能上线后,如何清空浏览器的缓存,让用户获取最新的资源文件?
问题1、问题2 可用Fiddler抓包然后截图说明。
二、编程题:
请写一个页面,并封装相应的JS代码,完成139邮箱的写信功能,无需调用邮箱组件,完成发信功能即可。
 
 
我的答案:
一 问答题:
(1)、139邮箱资源服务器与缓存相关的响应首部配置如下图所示:
  bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣
bubuko.com,布布扣
(2)、依然会重新发送请求获取静态资源,服务器响应304 Not Modified,所以会使用本地资源。
           从请求头部可知缓存max-age = 0,没有缓存请求,所以会再发送请求。
    bubuko.com,布布扣  bubuko.com,布布扣
(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">&quot;&quot;&lt;‘+email+‘&gt;</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;
                   }
               }
           }
        }
            

 

 

 

前端工程师基础课程作业,布布扣,bubuko.com

前端工程师基础课程作业

原文:http://www.cnblogs.com/qianlihorse/p/3868121.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!