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 发生变化。
|
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;