博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
AJAX基础笔记
阅读量：3948 次
发布时间：2019-05-24

本文共 18303 字，大约阅读时间需要 61 分钟。

AJAX基础笔记

1. 服务器软件安装

1. 基本概念

1. 什么是服务器？

  • 服务器也是电脑，只不过是一台24小时不断电，不关机的电脑
  • 根据提供的服务功能不同：文件服务器，邮件服务器，Web服务器等等；
  • 简而言之，服务器其实就是一台“提供了某种功能”的超级电脑

2. 如何让电脑能够提供某种服务?

  • 如何让电脑可以聊天?听歌?浏览网页?
  • 想让电脑提供聊天服务,可以安装相应的聊天软件, 例如:QQ/旺旺…
  • 想让电脑可以提供听歌服务,可以安装相应音乐软件, 例如:酷我/酷狗…
  • 想让电脑可以提供浏览网页服务,可以安装相应浏览网页软件, 例如:谷歌/欧朋…

3. 如何让电脑提供管理网站的服务?

  • 安装Web服务相关软件, 例如: Apache、IIS、Tomcat、Nginx、NodeJS等；
  • 安装了Web服务软件的电脑, 我们称之为"Web服务器"
  • Web服务器软件：Apache、IIS、Tomcat、Nginx、NodeJS等；

2. Web 服务器搭建

1. 什么是 WAMPServer 软件?

  • W: Windows操作系统
  • A: Apache 世界排名第一的服务器软件,特点是简单,速度快,性能稳定
  • M: MySQL 开源免费的数据库软件，特点是体积小、速度快、使用成本低
  • P: PHP 超文本预处理器,直接将代码嵌入HTML文档中执行, 特点是简单易学,容易上手

2. 如何搭建Apache服务器?

  • 双击提供的安装包
  • 点击Next
  • 选择安装路径(注意:路径中不要出现中文)
  • 勾选两个方框,点击next继续安装
  • 点击install开始安装
  • 安装完毕以后点击finish即可启动wamp

3. 测试访问

打开浏览器输入127.0.0.1查看显示的内容

4. 如何修改默认端口号?

  • 在httpd.conf文件中搜索Listen , 改为你想要的数字即可
  • 重启WAMP

3. 服务器原理

1. 什么是C/S架构(Client/Server)

  • 对于C/S架构,最为常见的例子就是网络游戏,例如"魔兽世界"如果不联网无法使用,你在软件内所做的所有操作通过互联网能够传递到其他玩家身上
  • 优点:性能较高/界面酷炫/用户体验好
  • 缺点:更新软件/重量级

2. 什么是B/S架构(Browser/Server)

  • 对于B/S架构, 现在所有的网站都是B/S架构,较为常见的例子有百度,淘宝,网易云音乐等等,所有只需要通过浏览器即可使用
  • 优点:更新软件/轻量级/用户体验稍差
  • 缺点:性能较低/兼容问题

3. HTTP请求头

属性 功能 例子
User-Agent 浏览器的具体类型 User-Agent：Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/20100101 Firefox/17.0
Accept 浏览器支持哪些数据类型 Accept: text/html,application/xhtml+xml,application/xml;q=0.9
Accept-Charset 浏览器采用的是哪种编码 Accept-Charset: ISO-8859-1
Accept-Encoding 浏览器支持解码的数据压缩格式 Accept-Encoding: gzip, deflate
Accept-Language 浏览器的语言环境 Accept-Language zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Host 请求的主机名，允许多个域名同处一个IP地址，即虚拟主机 Host:www.baidu.com
Connection 表示是否需要持久连接。Keep-Alive/close，HTTP1.1默认是持久连接，它可以利用持久连接的优点，当页面包含多个元素时（例如Applet，图片），显著地减少下载所需要的时间。要实现这一点，Servlet需要在应答中发送一个Content-Length头，最简单的实现方法是：先把内容写入ByteArrayOutputStream，然后在正式写出内容之前计算它的大小。 Connection: Keep-Alive
Content-Length 表示请求消息正文的长度。对于POST请求来说Content-Length必须出现。
Content-Type WEB服务器告诉浏览器自己响应的对象的类型和字符集 Content-Type: text/html; charset=‘gb2312’
Content-Encoding WEB服务器表明自己使用了什么压缩方法（gzip，deflate）压缩响应中的对象 Content-Encoding：gzip
Content-Language WEB服务器告诉浏览器自己响应的对象的语言
Cookie 最常用的请求头，浏览器每次都会将cookie发送到服务器上，允许服务器在客户端存储少量数据
Referer 包含一个URL，用户从该URL代表的页面出发访问当前请求的页面。服务器能知道你是从哪个页面过来的 Referer: http://www.baidu.com/

4. HTTP响应头

属性 功能 例子
Server WEB 服务器表明自己是什么软件及版本等信息 Server：Apache/2.0.61 (Unix)
Accept-Ranges WEB服务器表明自己是否接受获取其某个实体的一部分（比如文件的一部分）的请求。bytes：表示接受，none：表示不接受
Content-Type WEB 服务器告诉浏览器自己响应的对象的类型 Content-Type：application/xml
Etag 就是一个对象（比如URL）的标志值，就一个对象而言，比如一个html文件，如果被修改了，其Etag也会别修改，所以，ETag的作用跟Last-Modified的作用差不多，主要供WEB服务器判断一个对象是否改变了。比如前一次请求某个html文件时，获得了其 ETag，当这次又请求这个文件时，浏览器就会把先前获得ETag值发送给WEB服务器，然后WEB服务器会把这个ETag跟该文件的当前ETag进行对比，然后就知道这个文件有没有改变了。
Allow 服务器支持哪些请求方法（如GET、POST等）
Location 表示客户应当到哪里去提取文档，用于将接收端定位到资源的位置（URL）上。Location通常不是直接设置的，而是通过HttpServletResponse的sendRedirect方法，该方法同时设置状态代码为302。
Content-Base 解析主体中的相对URL时使用的基础URL
Content-Encoding WEB服务器表明自己使用了什么压缩方法（gzip，deflate）压缩响应中的对象 Content-Encoding：gzip
Content-Language WEB 服务器告诉浏览器理解主体时最适宜使用的自然语言。
Content-Length WEB服务器告诉浏览器自己响应的对象的长度或尺寸 Content-Length: 26012
Content-Location 资源实际所处的位置
Content-MD5 主体的MD5校验和
Content-Range 实体头用于指定整个实体中的一部分的插入位置，他也指示了整个实体的长度。在服务器向客户返回一个部分响应，它必须描述响应覆盖的范围和整个实体长度。一般格式： Content-Range:bytes-unitSPfirst-byte-pos-last-byte-pos/entity-legth 传送头500个字节次字段的形式：Content-Range:bytes0- 499/1234如果一个http消息包含此节（例如，对范围请求的响应或对一系列范围的重叠请求），Content-Range表示传送的范围，Content-Length表示实际传送的字节数。
Expires WEB服务器表明该实体将在什么时候过期，对于过期了的对象，只有在跟WEB服务器验证了其有效性后，才能用来响应客户请求。是 HTTP/1.0 的头部 Expires：Sat, 23 May 2009 10:02:12 GMT
Last-Modified WEB服务器认为对象的最后修改时间，比如文件的最后修改时间，动态页面的最后产生时间等等 Last-Modified：Tue, 06 May 2008 02:42:43 GMT

5. 状态码相关解释

2. PHP 基础语法

1. PHP基础

  1. PHP基础语法大部分和JS差不多
   ";// PHP中取出数组中的内容echo $arr[1];// JS中如何定义对象//var dict = {"name":"lnj", "age":"33"};// dict["name"];// PHP中如何定义对象$dict = array("name"=>"lnj", "age"=>"33");print_r($dict);echo  "
";// PHP中取出对象中的内容echo $dict["name"];// 5.PHP中的分支循环语句// if/switch/三目/for/while$age = 16;if($age >= 18){
       echo "成年人";}else{
       echo "未成年人";}$res = ($age >= 18) ? "成年人" : "未成年人";echo $res;switch ($age){
       case -1:        echo "非人类";        break;    case 18:        echo "成年人";        break;    default:        echo "未成年人";        break;}$arr = array(1, 3, 5);for($i = 0; $i < count($arr); $i++){
       echo $arr[$i];    echo "
";}$index = 0;while ($index < count($arr)){
       echo $arr[$index];    echo "
";    $index++;}?>
  1. 如何运行编写好的PHP文件?
  • 因为PHP是服务端编程语言, 所以要在服务端运行
  • php文件名称不能有中文
  • php文件必须放到服务器文件夹下
  • 通过ip找到服务器文件夹, 选中php文件访问
  1. 服务端返回浏览器的是什么?
  • php程序的执行结果
  • 注意: 执行结果中有中文, 必须在php文件顶部设置header(“content-type:text/html; charset=utf-8”);
  • 浏览器访问http服务器,接收到响应时,会根据响应报文头的内容进行一些具体的操作,在php中,我们能够使用 header来设置这些内容

3. GET 请求

1. GET 请求处理

  1. 可以通过form标签的method属性指定发送请求的类型
  2. 如果是get请求会将提交的数据拼接到URL后面（?userName=lnj&userPwd=123456）
  • 前端发送get请求
  • 后端获取get请求

2. Ajax-GET 基本使用

1. 什么是Ajax

  • AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
  • AJAX存在的意义就是发送异步请求

2. 使用步骤

  1. 创建一个异步对象
var xmlhttp=new XMLHttpRequest();
  1. 设置请求方式和请求地址
  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）
xmlhttp.open("GET", "04-ajax-get.php", true);
  1. 发送请求
xmlhttp.send();
  1. 监听状态的变化
  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪
xmlhttp.onreadystatechange = function (ev2) {
       if(xmlhttp.readyState === 4){
           // 判断是否请求成功        if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||           xmlhttp.status === 304){
               // 5.处理返回的结果            console.log("接收到服务器返回的数据");        }else{
               console.log("没有接收到服务器返回的数据");        }    }}
  1. 处理返回的结果
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||   xmlhttp.status === 304){
       // 5.处理返回的结果    console.log("接收到服务器返回的数据");}else{
       console.log("没有接收到服务器返回的数据");}

3. Ajax-GET-IE兼容问题

1. IE5 和 IE6 使用 ActiveXObject

  • 为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。
  • 如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xmlhttp;if (window.XMLHttpRequest){
   // code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();}else{
   // code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

2. Ajax 在IE中的缓存问题

  • 在IE浏览器中, 如果通过Ajax发送GET请求, 那么IE浏览器认为同一个URL只有一个结果
xhr.open("GET","05-ajax-get.txt?t="+(new Date().getTime()),true);

4. Ajax-GET 封装

1. 简单封装(IE兼容）

function ajax(url,success, error) {
       // 1.创建一个异步对象    var xmlhttp;    if (window.XMLHttpRequest)    {
   // code for IE7+, Firefox, Chrome, Opera, Safari        xmlhttp=new XMLHttpRequest();    }    else    {
   // code for IE6, IE5        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");    }    // 2.设置请求方式和请求地址    xmlhttp.open("GET", url+"?"+(new Date().getTime()), true);    // 3.发送请求    xmlhttp.send();    // 4.监听状态的变化    xmlhttp.onreadystatechange = function (ev2) {
           if(xmlhttp.readyState === 4){
               // 判断是否请求成功            if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||                xmlhttp.status === 304){
                   // 5.处理返回的结果                // console.log("接收到服务器返回的数据");                success(xmlhttp);            }else{
                   // console.log("没有接收到服务器返回的数据");                error(xmlhttp);            }        }    }}

2. 完善封装(传递参数)

function obj2str(obj) {
   	/*	{	    "userName":"lnj",	    "userPwd":"123456",	    "t":"3712i947132987649813å2"	}	*/	obj = obj || {
   }; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象	obj.t = new Date().getTime();	var res = [];	for(var key in obj){
   	    // 在URL中是不可以出现中文的, 如果出现了中文需要转码	    // 可以调用encodeURIComponent方法	    // URL中只可以出现字母/数字/下划线/ASCII码	    res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key])); // [userName=lnj, userPwd=123456];    }    return res.join("&"); // userName=lnj&userPwd=123456}function ajax(url, obj,success, error) {
       // 0.将对象转换为字符串    var str = obj2str(obj); // key=value&key=value;    // 1.创建一个异步对象    var xmlhttp;    if (window.XMLHttpRequest)    {
   // code for IE7+, Firefox, Chrome, Opera, Safari        xmlhttp=new XMLHttpRequest();    }    else    {
   // code for IE6, IE5        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");    }    // 2.设置请求方式和请求地址    xmlhttp.open("GET", url+"?"+str, true);    // 3.发送请求    xmlhttp.send();    // 4.监听状态的变化    xmlhttp.onreadystatechange = function (ev2) {
           if(xmlhttp.readyState === 4){
               clearInterval(timer);            // 判断是否请求成功            if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||                xmlhttp.status === 304){
                   // 5.处理返回的结果                // console.log("接收到服务器返回的数据");                success(xmlhttp);            }else{
                   // console.log("没有接收到服务器返回的数据");                error(xmlhttp);            }        }    }}

3. 完成封装(超时功能,中文转码)

function obj2str(obj) {
       obj = obj || {
   }; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象    obj.t = new Date().getTime();    var res = [];    for(var key in obj){
      		// 在URL中是不可以出现中文的, 如果出现了中文需要转码        // 可以调用encodeURIComponent方法        // URL中只可以出现字母/数字/下划线/ASCII码        res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key])); // [userName=lnj, userPwd=123456];    }    return res.join("&"); // userName=lnj&userPwd=123456}function ajax(url, obj, timeout, success, error) {
       // 0.将对象转换为字符串    var str = obj2str(obj); // 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.设置请求方式和请求地址    xmlhttp.open("GET", url+"?"+str, true);    // 3.发送请求    xmlhttp.send();    // 4.监听状态的变化    xmlhttp.onreadystatechange = function (ev2) {
           if(xmlhttp.readyState === 4){
               clearInterval(timer);            // 判断是否请求成功            if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||                xmlhttp.status === 304){
                   // 5.处理返回的结果                // console.log("接收到服务器返回的数据");                success(xmlhttp);            }else{
                   // console.log("没有接收到服务器返回的数据");                error(xmlhttp);            }        }    }    // 判断外界是否传入了超时时间    if(timeout){
           timer = setInterval(function () {
               console.log("中断请求");            xmlhttp.abort();            clearInterval(timer);        }, timeout);    }}

4. POST 请求

1. POST 请求处理

  1. 如果是post请求会将提交的数据放到请求头中
  • 前端发送post请求
  • 后端获取post请求

2. POST 上传文件

注意:

  • 前端
  1. 上传文件一般使用POST提交
  2. 上传文件必须设置enctype=“multipart/form-data”
  • 后端
  1. 上传的文件在PHP中可以通过$_FILES获取
  2. PHP中文件默认会上传到一个临时目录, 接收完毕之后会自动删除

默认情况下服务器对上传文件的大小是有限制的, 如果想修改上传文件的限制可以修改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 最大的内存消耗
  • 前端post上传文件
  • 后端post获取
   ";//print_r($_FILES);// 1.获取上传文件对应的字典$fileInfo = $_FILES["upFile"];//print_r($fileInfo);// 2.获取上传文件的名称$fileName = $fileInfo["name"];// 3.获取上传文件保存的临时路径$filePath = $fileInfo["tmp_name"];//echo $fileName;//echo "
";//echo $filePath;// 4.移动文件move_uploaded_file($filePath, "./source/".$fileName);?>

3. Ajax-POST 基本使用

1. 基本结构

var xhr;	if (window.XMLHttpRequest)	{
   // code for IE7+, Firefox, Chrome, Opera, Safari	   xhr=new XMLHttpRequest();	}	else	{
   // code for IE6, IE5	   xhr=new ActiveXObject("Microsoft.XMLHTTP");	}	// var xhr = new XMLHttpRequest();	xhr.open("POST","08-ajax-post.php",true);	// 注意点: 以下代码必须放到open和send之间	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");	xhr.send("userName=zs&userPwd=321");	xhr.onreadystatechange = function (ev2) {
   	    if(xhr.readyState === 4){
   	        if(xhr.status >= 200 && xhr.status < 300 ||	        xhr.status === 304){
   	            // alert("请求成功");	            alert(xhr.responseText);	        }else{
   	            alert("请求失败");	        }	    }	}

2. 完全封装

function obj2str(data) {
       data = data || {
   }; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象    data.t = new Date().getTime();    var res = [];    for(var key in data){
           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.设置请求方式和请求地址(判断请求方式为 GET 还是 POST)    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) {
           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);    }}

5. jQuery 中的 Ajax

1. 基本使用

$.ajax({
       url: "09-ajax-jquery.php",    type: "get",    data: "userName=lnj&userPwd=654321",    success: function(msg){
           alert(msg );    },    error: function (xhr) {
           alert(xhr.status);    }});

2. jQuery 中的 Ajax 优点

1. 不区分 GET 和 POST 大小写

toLowerCase() === "get"

2. 可以打乱参数位置

  • 将参数归为一个对象
  • 获取参数即向对象中取
function ajax(option)
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("请求失败");    }});

6. Ajax-XML

1. XML 格式

   
   
     // 根节点（随便写）	// 数据

2. Ajax-XML 基本使用

js

ajax({
       type:"get",    url:"11-ajax-xml.php",    success: function (xhr) {
           // console.log(xhr.responseXML);        // console.log(document);        var res = xhr.responseXML;        console.log(res.querySelector("name").innerHTML);        console.log(res.querySelector("age").innerHTML);    },    error: function (xhr) {
           console.log(xhr.status);    }})

php

7. Ajax-json

1. 什么是 json

  • JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

  • josn 语法规则

    • JSON是一个标记符的序列。这套标记符包含六个构造字符、字符串、数字和三个字面名。
    • JSON是一个序列化的对象或数组。

  • JSON 与 JS 对象的关系

  • JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

var obj = {
   a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串
  • JSON 和 JS 对象互转
  • 要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
  • 要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：
var json = JSON.stringify({
   a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'

2. Ajax-json 基本使用

js

ajax({
       type:"get",    url:"12-ajax-json.php",    success: function (xhr) {
           // console.log(xhr.responseText);        var str = xhr.responseText;        /*        在低版本的IE中, 不可以使用原生的JSON.parse方法, 但是可以使用json2.js这个框架来兼容        */        var obj = JSON.parse(str);        // console.log(obj);        console.log(obj.name);        console.log(obj.age);    },    error: function (xhr) {
           console.log(xhr.status);    }})

php

json

{
       "name":"lnj",    "age":"33"}

8. Cookie 使用

1. 什么是cookie

  • cookie

    • 会话跟踪技术(客户端)
    • 指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）。

  • session

    • 会话跟踪技术(服务端)
    • Session对象存储特定用户会话所需的属性及配置信息。
    • 当用户在应用程序的Web页之间跳转时，存储在Session对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。

2. cookie作用:

  • 将网页中的数据保存到浏览器中
document.cookie = "name=lnj;";document.cookie = "age=33;";

3. cookie生命周期:

  • 默认情况下生命周期是一次会话(浏览器被关闭)
  • 如果通过expires=设置了过期时间, 并且过期时间没有过期, 那么下次打开浏览器还是存在
  • 如果通过expires=设置了过期时间, 并且过期时间已经过期了,那么会立即删除保存的数据
var date = new Date();date.setDate(date.getDate() - 1);document.cookie = "age=33;expires="+date.toGMTString()+";";

4. cookie注意点:

  • cookie默认不会保存任何的数据
  • cookie不能一次性保存多条数据, 要想保存多条数据,只能一条一条的设置
  • cookie有大小和个数的限制
    • 个数限制: 20~50
    • 大小限制: 4KB左右

5. cookie作用范围:

  • 同一个浏览器的同一个路径下访问(默认)
  • 如果在同一个浏览器中, 默认情况下下一级路径就可以访问
  • 如果在同一个浏览器中, 想让上一级目录也能访问保存的cookie, 那么需要添加一个path属性才可以;
document.cookie = "name=zs;path=/;domain=127.0.0.1;";

6. cookie 添加方法封装

window.onload = function (ev) {
             function addCookie(key, value, day, path, domain) {
           // 1.处理默认保存的路径        // if(!path){
           //     var index = window.location.pathname.lastIndexOf("/")        //     var currentPath = window.location.pathname.slice(0, index);        //     path = currentPath;        // }        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+";";        }    }    function getCookie(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];            }        }    }    console.log(getCookie("name"));    // 默认情况下只能删除默认路径中保存的cookie, 如果想删除指定路径保存的cookie, 那么必须在删除的时候指定路径才可以    function delCookie(key, path) {
           addCookie(key, getCookie(key), -1, path);    }    delCookie("name", "/");}

9. hash 使用

  • 记录当前页码
window.location.hash = 3;console.log(window.location.hash.substring(1));

转载地址：http://ddqwi.baihongyu.com/

你可能感兴趣的文章
Android应用技巧总结
查看>>
Android创建sdcard详细图解
查看>>
Android开发：如何实现TCP和UDP传输
查看>>
Android电源管理相关应用技巧分享
查看>>
Android录音失真具体解决方案
查看>>
Android根文件系统相关应用介绍
查看>>
Android文件系统深入剖析
查看>>
Android判断网络状态方法详解
查看>>
在Android上实现Junit单元测试的四部曲
查看>>
有效控制Android应用程序的耗电量
查看>>
Android术语列表概览
查看>>
全方位解读Android多媒体框架源码
查看>>
Android音乐编程的管理音频硬件
查看>>
Android UI控件组合应用之一：建立数据模型
查看>>
避免Andriod平台图片失真的图片形式
查看>>
Android之Gridview图片列表
查看>>
objdump的使用方法
查看>>
编译错误处理noproguard.classes-with-local.dex已杀死
查看>>
LTE - CSFB技术
查看>>
GSM链路层信令协议
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-09-18 20:28:32   当前IP: 3.21.248.77   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我