zoukankan      html  css  js  c++  java
  • javascript与服务器1

    A.  通过在客户端设置Cookie,然后在服务器端读取它.
       关于Cookie只说明一点, 它是存储在客户端机器上的一小块信息, 可以有客户端程序或服务器程序创建,并通过http传递.常用于跟踪用户在客户端的一些动作,如:
    上次访问时间,存储用户登录信息, 以及浏览的历史.
    Cookie由6部分组成:
    1. 名称:  表示一个唯一的名称,由字母,数字和下划线组成, 不区分大小写. 不过最好是区分大小写.
    2. 值:    保存在Cookie中的字符串值. 这个值在存储之前必须用encodeRUIComponent()对其编码.以免数据丢失.
    3. 域:    出于安全考虑,网站不能访问其它域创建的cookie.
    4. 路径:  另一个cookie安全特征,路径限制了对web服务器上的特定目录的访问. 如:http://www.wrox.com/books中创建的cookie不能在http://www.wrox.com/上的网页访问.
    5. 失效日期:  一个GMT格式的日期
    6. 安全标志 :  一个true或false值.
    一个完整的cookie类似与如下形式:
    cookie_name=cookie_value; expires=expires_time; path=domain_path; domain=domain_name; secure   --分号隔离
    1>,创建cookie:
    document.cookie = "name=Nicholas";
    document.cookie = "book=" +encodeURIComponent("Professional Javascript");
    因为要创建cookie必须要安照它的格式,所以我们用一个函数来处理:
    function setCookie(sName,sValue,oExpress,sPath,sDomain,bSecure)
    {
        var sCookie = sName + "=" + encodeURIComponent(sValue);
        if(oExpres){
          sCookie += "; expires=" +oExpress.toGMTString();
        }
        if(sPath){
          sCookie +=";  path=" + sPath;
        }
       if(sDomain){
          sCookie +="; domain=" +sDomain;
       }
       if(bSecure){
          sCookie +="; secure;
       document.cookie = sCookie;
    }
    调用
    setCookie("name","Nicholas");
    setCookie("book","Professional Javascript",new Date(Date.parse("Jan 1, 2006")),"/books","http://www.wrox.com",true)
    2>, 访问cookie
    function getCookie(sName){
      var sRE = "(?:;)?"+ sName +"=([^;]*);?";
      var oRE = new RegExp(sRE);
      if(oRE.test(document.cookie)){
         return decodeURIComponent(RegExp["$1"]);
       }else {
         return null
      }
    }
    调用:
    var sName = getCookie("name");
    var sBook = getCookie("book");
     
    B. 通过隐藏框架和服务器交互
        这其实是一个小技巧, 基本的概念就是:创建一个可用Javascript与服务器进行通信的0像素高的框架,这样就隐藏了这个框架.这中通信方式要求2部分内容:
    用于处理客户端通信的Javascript对象和在服务器端处理通信的特殊页面.
      例如:
    <html>
      <head>
        <title>Hiddle Frame Example</title>
      </head>
      <body>
        <frameset rows="*,0">
          <frame src="main.html"   name="mainFrame"/>
          <frame src="hiddle.aspx" name="hiddenFrame"/>
        </frameset>
      </body>
    </html>
      注意,这个框架集由两个框架组成,第二个框架高度为0,第一个框架用于用户进行交互;第二个用于与服务器交互.
    在第一个框架定义如下2个函数:
      <html>
        <head>
            <title>Hidden Frame Example (Main)</title>
            <script type="text/javascript">
                function getServerInfo() {
                    parent.frames["hiddenFrame"].location.href = "hiddle.aspx";  //使隐藏框架访问一次服务器
                }
            
                function handleResponse(sResponseText) {   //接收返回的数据
                    alert("The server sent back this message: " + sResponseText);
                }
            </script>
        </head>
        <body>
            <p>单击该按钮调用服务器端返回的数据</p>
            <input type="button" onclick="getServerInfo()" value="获取服务器上的数据" />
        </body>
    </html>
    在第二个框架定义用于发送返回的消息
    <html>
        <head>
            <title>Hidden Frame Example (Response)</title>
            <script type="text/javascript">
            
                window.onload = function () {
                    parent.handleResponse(document.forms["formResponse"].result.value); --把数据返回
                };
            </script>
     
        </head>
        <body>
            <form name="formResponse">
                <textarea name="result">This is some data coming from the server.</textarea>
            </form>
        </body>
    </html>
     
    C. 通过iframe和服务器交互
    1. 动态创建一个隐藏框架,用于创建向服务器发送请求的函数,和一个用于处理响应的函数
      <html>
        <head>
            <title>Hidden Frame Example (Main)</title>
            <script type="text/javascript">
            
                var oHiddenFrame = null;  --创建一个全局变量
                
                function getServerInfo() {
                    if (oHiddenFrame == null) {
                        oHiddenFrame = document.createElement("iframe");
                        oHiddenFrame.name = "hiddenFrame";
                        oHiddenFrame.id = "hiddenFrame";
                        oHiddenFrame.style.height = "0px";
                        oHiddenFrame.style.width = "0px";
                        oHiddenFrame.style.position = "absolute";
                        oHiddenFrame.style.visibility = "hidden";
                        document.body.appendChild(oHiddenFrame);                
                    }
                
                    setTimeout(function () {
                        frames["hiddenFrame"].location.href = "hiddle.aspx";
                    }, 10);  --由于要重绘DOM,所以延迟10毫秒
                }
            
                function handleResponse(sResponseText) {
                    alert("The server sent back this message: " + sResponseText);
                }
            </script>
        </head>
        <body>
            <p>单击该按钮调用服务器端返回的数据</p>
            <input type="button" onclick="getServerInfo()" value="Get Server info" />
        </body>
    </html>
    2. 给客户端返回数据
    <html>
        <head>
            <title></title>
            <script type="text/javascript">
            
                window.onload = function () {
                    parent.handleResponse(document.forms["formResponse"].result.value);
                };
            </script>
     
        </head>
        <body>
            <form name="formResponse">
                <textarea name="result">This is some data coming from the server.</textarea>
            </form>
        </body>
    </html>
  • 相关阅读:
    RESTful规范
    Django REST framework 基本组件
    Django出错Xadmin后台报list index out of range
    Vue Cli
    nodejs的安装与npm的介绍
    Axios
    shell脚本中set -e作用
    Linux进程批量管理工具
    Docker-compose容易忽略的使用细节
    Docker部署WordPress网站
  • 原文地址:https://www.cnblogs.com/shaoshao/p/3384839.html
Copyright © 2011-2022 走看看