Cookie&Ajax&Json

Cookie概念

:用于存储页面的用户信息,常用于自动登录、记住用户名或密码

Cookie优点：

1.通过良好的编程，控制保存在cookie中的session对象的大小。

　　2.通过加密和安全传输技术（ssl），减少cookie被破解的可能性

　　3.只有cookie中存放不敏感数据，即使被盗了也不会有多大的损失

　　4.控制cookie的生命期，使之不会永远有效。

Cookie缺点：

1."cookie" 数量和长度的限制，每个domain 最多只能有20条cookie，每个cookie长度不能超过4kB，否则会被截掉。

　　2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也于事无补，因为截拦者不需要知道cookie的意义，只需要原样转发就能达到目的。

　　3.有些状态不可以保存在客户端。

使用JavaScript操作Cookie

创建Cookie

document.cookie="user=family";
document.cookie="pass=123456";
alert(document.cookie);

删除Cookie

var oDate=new Date();
oDate.setDate(oDate.getDate()+8);
alert(oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate());
document.cookie="user=family;expires="+oDate;

封装Cookie

    // 创建Cookie
    function setCookie(key,value,day){
        var date = new Date();
        date.setDate(date.getDate()+day);
        document.cookie = key+"="+value+";expires="+date
    }
    // 获取Cookie
    function getCookie(key){
        var arr = document.cookie.split("; ");
        console.log(arr)
        for (var i = 0; i < arr.length; i++) {
            var newarr = arr[i].split("=")
            if(newarr[0]==key){
                return newarr[1]
            }
        };
    }
    // 删除Cookie
    function removeCookie(key){
        setCookie(key,1,-1)
    }

 

AJAX 简介

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX = 异步 JavaScript 和 XML。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

创建XMLHttpRequest 对象（XMLHttpRequest 是 AJAX 的基础）

if (window.XMLHttpRequest){
    var oAjax=new XMLHttpRequest();//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
}else{
    var oAjax=new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5 浏览器执行代码 
}

AJAX - 向服务器发送请求

ajax.open("GET","test1.txt",true);
ajax.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。（string：仅用于 POST 请求）

GET 请求

ajax.open("GET","demo_get.asp",true);
ajax.send();

POST 请求

ajax.open("POST","demo_post.asp",true);
ajax.send();

url - 服务器上的文件

open() 方法的 url 参数是服务器上文件的地址：

异步 - True 或 False？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

ajax.open("GET","ajax_test.asp",true);

AJAX - onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

语法：

ajax.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

JSON  简介

JSON：JavaScript 对象表示法（JavaScript Object Notation）。

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）

JSON 是轻量级的文本数据交换格式

JSON 独立于语言 

JSON 具有自我描述性，更易理解

JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

JSON 语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。

• 数据在名称/值对中
• 数据由逗号分隔
• 花括号保存对象
• 方括号保存数组

JSON 名称/值对

"name" : "小明"

JSON值可以是可以是数字、字符串、逻辑值、数组、对象、null

值	示例
数字（整数或浮点数）	{ "age":30 }
对象（在大括号中）	{ "name":"baidu" , "url":"http://www.baidu.cn/" }
数组（在中括号中）	{"sites": [ { "name":"bai" , "url":"http://www.baidu.cn/" }, { "name":"google" , "url":"www.google.com" } ]}
逻辑值（true 或 false）	{ "flag":true }
null	{ "arr":null }

示例：

html：

<div id="box"></div>

js：

var jsons = {
    "msg": "ok",
    "data": [
        {
            "id": 28,
            "title": "小米空调",
            "cover": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603107243274&di=812014be742bb6c989081c26cad11310&imgtype=0&src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2Fmn01%2F03051Z93256%2F1Z305093256-4.jpg",
            "min_price": "25.00",
            "comments_count": 0,
            "comments_good_count": 0
        },
        {
            "id": 25,
            "title": "小米空调",
            "cover": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603108349251&di=d835454823d40a7978a2e23b00f5d999&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F4a8ebbf3fa4397e92c074f4029fe37161e5aa36f7608f-Mi1QQF_fw658",
            "min_price": "25.00",
            "comments_count": 16,
            "comments_good_count": 8
        },
        {
            "id": 26,
            "title": "小米空调",
            "cover": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603107243274&di=2f944042d3648141d49c3a371c4299b6&imgtype=0&src=http%3A%2F%2Fdingyue.nosdn.127.net%2FSoxuWTMB9XeJi9v0ZFU2SMf%3Dv%3D5z2fhhDYDUAU5fJiCFC1533199826960compressflag.jpg",
            "min_price": "25.00",
            "comments_count": 0,
            "comments_good_count": 0
        },
        {
            "id": 27,
            "title": "小米空调",
            "cover": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603107243275&di=54740ed8ac1a24dc2ce1a84966553b04&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20160330%2F1d343509d5b742e7808696991cb99aaf_th.jpg",
            "min_price": "25.00",
            "comments_count": 0,
            "comments_good_count": 0
        },
        {
            "id": 29,
            "title": "小米空调",
            "cover": "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1603097157&di=10f327dfffa0d0f9280e7ad5b559a03d&src=http://n.sinaimg.cn/sinacn15/727/w640h887/20180503/87c0-fzyqqiq3672417.jpg",
            "min_price": "25.00",
            "comments_count": 0,
            "comments_good_count": 0
        }
    ]
            }
    var list = jsons.data;
    var str = "<ul>";
    for (var i = 0; i < list.length; i++) {
        str+="<li class=item><p>"+list[i].title+"</p><img src="+list[i].cover+"><p>"+list[i].min_price+"</p></li>"
    };
    console.log(str)
    str+="</ul>"
    box.innerHTML = str;