ajax,cookie与hash 0719

2019-07-19 本文已影响0人煤球快到碗里来

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));

ajax,cookie与hash 0719

ajax技术和php

1.get和post

1.1基本

1.2 GET请求和POST请求的异同

1.3 GET/POST请求应用场景

2.文件上传

3.ajax

3.1 什么是ajax

3.2 ajax用法:共五步

3.3 在IE浏览器注意的问题

3.4 封装get和post

3.5 在jQuery中的ajax封装

4. cookie的使用

4.1cookie基础

4.2 cookie的封装

猜你喜欢

热点阅读