ajax,cookie与hash 0719

ajax技术和php

1.get和post

1.1基本
  • 含义:可以通过form标签的method属性指定发送请求的类型

  • 如果是get请求会将提交的数据拼接到URL后面,?userName=lnj&userPwd=123456

  • 如果是post请求会将提交的数据放到请求头中

  • <form action="post.php" method="post">
      <input type="text" name="username"/><br />
      <input type="password" name="userpass" />
      <input type="submit" value="提交" />
    </form>
    
1.2 GET请求和POST请求的异同
  • 4.1相同点:都是将数据提交到远程服务器
  • 不同点:提交数据存储的位置不同,GET请求会将数据放到URL后面,POST请求会将数据放到请求头中
    • 提交数据大小限制不同:GET请求对数据有大小限制,POST请求对数据没有大小限制
1.3 GET/POST请求应用场景
  • GET请求用于提交非敏感数据和小数据
  • POST请求用于提交敏感数据和大数据

2.文件上传

  • html代码

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>03-post-file</title>
    </head>
    <body>
    <!--
    注意:
    1.上传文件一般使用POST提交
    2.上传文件必须设置enctype="multipart/form-data"
    
    3.上传的文件在PHP中可以通过$_FILES获取
    4.PHP中文件默认会上传到一个临时目录, 接收完毕之后会自动删除
    -->
    <!--
    默认情况下服务器对上传文件的大小是有限制的, 如果想修改上传文件的限制可以修改xampp的php.ini文件
    file_uploads = On   ; 是否允许上传文件 On/Off 默认是On
    upload_max_filesize = 2048M       ; 上传文件的最大限制
    post_max_size = 2048M             ; 通过Post提交的最多数据
    
    max_execution_time = 30000      ; 脚本最长的执行时间 单位为秒
    max_input_time = 30000          ; 接收提交的数据的时间限制 单位为秒
    memory_limit = 2048M            ; 最大的内存消耗
    -->
    <form action="03-post-file.php" method="post" enctype="multipart/form-data">
        <input type="file" name="upFile"><br>
        <input type="submit" value="上传"><br>
    </form>
    </body>
    </html>
    
  • php代码

  • <?php
    
    //print_r($_FILES);//会输出一个关键字是表单中name的数组
    
    // 1.获取上传文件对应的字典
    $fileInfo = $_FILES["upFile"];//包含当前文件的名字,路径,大小等信息
    //print_r($fileInfo);
    // 2.获取上传文件的名称
    $fileName = $fileInfo["name"];
    // 3.获取上传文件保存的临时路径
    $filePath = $fileInfo["tmp_name"];
    
    // 4.移动文件
    move_uploaded_file($filePath, "./source/".$fileName);
    ?>
    

3.ajax

3.1 什么是ajax
  • AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
3.2 ajax用法:共五步
  • <script>
        window.onload = function (ev) {
            var oBtn = document.querySelector("button");
           oBtn.onclick = function (ev1) {
               // 1.创建一个异步对象
               var xmlhttp=new XMLHttpRequest();
               // 2.设置请求方式和请求地址
               /*
               method:请求的类型;GET 或 POST
               url:文件在服务器上的位置
               async:true(异步)或 false(同步)
               */
               xmlhttp.open("GET", "04-ajax-get.php", true);
               // 3.发送请求
               xmlhttp.send();
               // 4.监听状态的变化
               xmlhttp.onreadystatechange = function (ev2) {
                   /*
                   0: 请求未初始化
                   1: 服务器连接已建立
                   2: 请求已接收
                   3: 请求处理中
                   4: 请求已完成,且响应已就绪
                   */
                   //我们只需监听最后一个
                   if(xmlhttp.readyState === 4){
                       // 判断是否请求成功 xmlhttp.status是状态码200~300或304
                       if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                          xmlhttp.status === 304){
                           // 5.处理返回的结果
                           console.log("接收到服务器返回的数据");
                       }else{
                           console.log("没有接收到服务器返回的数据");
                       }
     
                   }
               }
           }
       }
    </script>
    
3.3 在IE浏览器注意的问题
3.4 封装get和post
  • JavaScript代码

  • window.onload = function (ev) {
       var oBtn = document.querySelector("button");
       var res = encodeURIComponent("wd=张三");
       console.log(res);
       oBtn.onclick = function (ev1) {
           //  汉字不能识别需要转换成这种格式 %E5%BC%A0%E4%B8%89
           // https://www.baidu.com/s?wd=%E5%BC%A0%E4%B8%89
           // url?key=value&key=value;
           //以下写法的优点,参数的位置没有影响,因为是对象
            ajax({
                url:"04-ajax-get.php",
                data:{
                    "userName":"lnj",
                    "userPwd":"123456"
                },
                timeout: 3000,
                type:"post",
                success: function (xhr) {
                    alert(xhr.responseText);
                },
                error: function (xhr) {
                    alert("请求失败");
                }
            });
       }
    }
    
    
  • 自己封装的方法

  • function obj2str(data) {
        /*
        {
            "userName":"lnj",
            "userPwd":"123456",
            "t":"3712i9471329876498132"
        }
        */
        data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
        data.t = new Date().getTime();
        var res = [];
        for(var key in data){
            // 在URL中是不可以出现中文的, 如果出现了中文需要转码
            // 可以调用encodeURIComponent方法
            // URL中只可以出现字母/数字/下划线/ASCII码
            res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key])); // [userName=lnj, userPwd=123456];
        }
        return res.join("&"); // userName=lnj&userPwd=123456
    }
    function ajax(option) {
        // 0.将对象转换为所要格式字符串
        var str = obj2str(option.data); // key=value&key=value;
        // 1.创建一个异步对象,处理兼容性问题
        var xmlhttp, timer;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 2.设置请求方式和请求地址
        /*
        method:请求的类型;GET 或 POST
        url:文件在服务器上的位置
        async:true(异步)或 false(同步)
        */
        if(option.type.toLowerCase() === "get"){
            xmlhttp.open(option.type, option.url+"?"+str, true);
            // 3.发送请求
            xmlhttp.send();
        }else{
            xmlhttp.open(option.type, option.url,true);
            // 注意点: 以下代码必须放到open和send之间
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send(str);
        }
    
        // 4.监听状态的变化
        xmlhttp.onreadystatechange = function (ev2) {
            /*
            0: 请求未初始化
            1: 服务器连接已建立
            2: 请求已接收
            3: 请求处理中
            4: 请求已完成,且响应已就绪
            */
            if(xmlhttp.readyState === 4){
                clearInterval(timer);
                // 判断是否请求成功
                if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                    xmlhttp.status === 304){
                    // 5.处理返回的结果
                    // console.log("接收到服务器返回的数据");
                    option.success(xmlhttp);
                }else{
                    // console.log("没有接收到服务器返回的数据");
                    option.error(xmlhttp);
                }
            }
        }
        // 判断外界是否传入了超时时间
        if(option.timeout){
            timer = setInterval(function () {
                console.log("中断请求");
                xmlhttp.abort();
                clearInterval(timer);
            }, option.timeout);
        }
    }
    
3.5 在jQuery中的ajax封装
  • //jQuery已经帮我们封装好了ajax,直接用就行
     ajax({
        url:"04-ajax-get.php",
        data:{
            "userName":"lnj",
            "userPwd":"123456"
        },
        timeout: 3000,
        type:"post",
        success: function (xhr) {
            alert(xhr.responseText);
        },
        error: function (xhr) {
            alert("请求失败");
        }
    });
    

4. cookie的使用

  • 4.1cookie基础
    •     window.onload = function (ev) {
          /*
          cookie: 会话跟踪技术 客户端
          session:  会话跟踪技术  服务端
      
          cookie作用:
          将网页中的数据保存到浏览器中
      
          cookie生命周期:
          默认情况下生命周期是一次会话(浏览器被关闭)
          如果通过expires=设置了过期时间, 并且过期时间没有过期, 那么下次打开浏览器还是存在
          如果通过expires=设置了过期时间, 并且过期时间已经过期了,那么会立即删除保存的数据
      
          cookie注意点:
          cookie默认不会保存任何的数据
          cookie不能一次性保存多条数据, 要想保存多条数据,只能一条一条的设置
          cookie有大小和个数的限制
          个数限制: 20~50
          大小限制: 4KB左右
      
          cookie作用范围:
          同一个浏览器的同一个路径下访问
          如果在同一个浏览器中, 默认情况下下一级路径就可以访问
          如果在同一个浏览器中, 想让上一级目录也能访问保存的cookie, 那么需要添加一个path属性才可以;
          document.cookie = "name=zs;path=/;";
      
          例如:
          保存到了www.it666.com/jQuery/Ajax/路径下,
          我们想在 www.it666.com/jQuery/Ajax/13-weibo/,
          和 www.it666.com/jQuery/ 路径下也能访问
      
          例如:
          我们在www.it666.com下面保存了一个cookie,
          那么我们在edu.it666.com中是无法访问的
          如果想在edu.it666.com中也能访问, 那么我们需要再添加一个domain属性才可以;
          document.cookie = "name=zs;path=/;domain=it666.com;";
          */
          alert(document.cookie);
          var date = new Date();
          date.setDate(date.getDate() - 1);
          document.cookie = "age=33;expires="+date.toGMTString()+";";
          alert(document.cookie);
      
          document.cookie = "name=lnj;";
          document.cookie = "age=33;";
          alert(document.cookie);
          document.cookie = "name=lnj;age=33;gender=male;";
      
          document.cookie = "name=zs;path=/;domain=127.0.0.1;";
          }
      
      
  • 4.2 cookie的封装
    • ;(function ($, window) {
          $.extend({
              addCookie: function (key, value, day, path, domain) {
                  // 1.处理默认保存的路径
                  var index = window.location.pathname.lastIndexOf("/")
                  var currentPath = window.location.pathname.slice(0, index);
                  path = path || currentPath;
                  // 2.处理默认保存的domain
                  domain = domain || document.domain;
                  // 3.处理默认的过期时间
                  if(!day){
                      document.cookie = key+"="+value+";path="+path+";domain="+domain+";";
                  }else{
                      var date = new Date();
                      date.setDate(date.getDate() + day);
                      document.cookie = key+"="+value+";expires="+date.toGMTString()+";path="+path+";domain="+domain+";";
                  }
              },
              getCookie:function (key) {
                  // console.log(document.cookie);
                  var res = document.cookie.split(";");
                  // console.log(res);
                  for(var i = 0; i < res.length; i++){
                      // console.log(res[i]);
                      var temp = res[i].split("=");
                      // console.log(temp);
                      if(temp[0].trim() === key){
                          return temp[1];
                      }
                  }
              },
              delCookie:function (key, path) {
                  addCookie(key, getCookie(key), -1, path);
              }
          });
      })(jQuery, window);
      
  • 5.hash

    • //hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。
      //假设设置了Location对象的 hash 属性,那么浏览器就会转移到当前文档中的一个指定的位置。
      //该属性的作用与cookie类似
      //设置hash
       window.location.hash = 3;
      //获取hash
       console.log(window.location.hash.substring(1));
      
      
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容

  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,192评论 0 7
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,168评论 0 3
  • Ajax在前端开发中有着举足轻重的地位,关于Ajax的使用和注意事项一直是一个重要的话题,借此机会,本文希望对Aj...
    grain先森阅读 1,504评论 4 55
  • 原址:https://segmentfault.com/a/1190000003096293#articleHea...
    LH_0811阅读 586评论 0 4
  • 江南有多美,期待就有多美。 在梦中都是你的影子,醒来后想见你的样子。江南六月,是不是很温婉。我们打着油纸伞,突然遇...
    哲哲鹿阅读 261评论 0 1