BOM浏览器对象
BOMBOM又称浏览器对象模型，操作浏览器的API浏览器缓存问题1：本地缓存有哪些？(存数据有哪些？)cookie,sesstorage,Localstorage他们的相同点和不同点有哪些？相同点: cookie,sessionStorage,localStorage都是存放在客户端(浏览器端),都是缓存.不同点1.作用不一样：cookie数据始终在同源的http请求中携带,在浏览器和服务器来回传
BOM
BOM又称浏览器对象模型，操作浏览器的API
浏览器缓存
问题1：本地缓存有哪些？(存数据有哪些？)
cookie,sesstorage,Localstorage
他们的相同点和不同点有哪些？
相同点: cookie,sessionStorage,localStorage都是存放在客户端(浏览器端),都是缓存.
不同点
1.作用不一样：
cookie数据始终在同源的http请求中携带,在浏览器和服务器来回传递,而sessionStorage和localStorage仅在本地(浏览器)保存
2.大小限制区别
cookie数据不超过4kb，sessionStorage和localStorage最大为5M,sessionSorage和localStorage是HTML5新特性
字节一个英文字母是一个字节,一个中文是一个字节
1024字节=1kb,1024kb=1M,1024M=1G,1024G=1T
3.数据有效期不同
cookie在设置的(服务器设置)有效期内有效,不管窗口和浏览器的关闭
sessionStorage仅在当前浏览器窗口关闭之前有效,关闭即销毁(临时储存)
localStorage始终有效,用于持久化的本地存储,除非主动删除数据,否则不过期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// sessionStorage存数据
sessionStorage.setItem('username','张三');
sessionStorage.setItem('age',18);
// sessionStorage取数据
var username = sessionStorage.getItem('username');
console.log(username);
var age = sessionStorage.getItem('age');
console.log(age);
// 清除
sessionStorage.removeItem('username');
// localStorage存数据
localStorage.setItem("username","李四");
// localStorage取数据
var username = localStorage.getItem('username');
console.log(username);
// 全部清除
localStorage.clear();
</script>
</body>
</html>
apii终结
1.存数据setitem(‘名称’,‘值’);
2.取数据 getItem(‘名称’)
3.移除数据removeItem(‘名称’);
4.全部移除clear();
(2)window的一些方法
1.JSON
(1).JSON数据格式
(2).JSON.stringfy() —将符合JSON格式的对象转为JSON字符串
(3).JSON.parse()----将符合JSON格式的字符串转化为JSON对象
2.open();打开一个窗口
3.eval() //能够计算字符串中的运算
4.parseint()–转整型和parseFloat()—转浮点型
5.endodeURL()–将url的字符转换为服务器端看的懂的字符，decodeURL()将之前的url转换为原先的url
6.setTimeout()和clearTimeout()
7.setInterval()和clearInterval()
JSON
json数据是一个轻量级的数据格式,非常方便再互联网上传输
它的格式如下:
1.一般是对象或者数组,服务器端返回给前端的一般就是这种数据格式
2.以键值对存储,键名必须是双引号,值如果是字符串也必须是双引号,最后一个键值对不能加逗号(普通对象可以加)
[
{
"username": "张三",
"age": 18
},
{
"username": "张三2",
"age": 18
},
{
"username": "张三3",
"age": 18
}
]
2.对象和json字符串互转
var obj = {username: '张三', age: 18};
// 对象转json字符串
var str = JSON.stringify(obj);
typeof str; // string
// str2是个符合json数据格式的字符串
var str2 = '{"username":"张三","age":18}';
// json字符串转对象
var obj2 = JSON.parse(str2);
typeof obj2; // object
3.JSON应用
localStorage和sessionStorage无法存对象,能存字符串,所以我们想存放对象,可以先将对象转成字符串,需要使用的时候,再讲字符串转成对象,举例:将张三存取
<script>
var obj={
"username" : "张三",
"age" : 18
}
// 将张三这个对象存放到本地存储中
// 1.将对象转换为字符串
obj=JSON.stringify(obj);
// 2.将我们转换的字符串添加到本地存储中
localStorage.setItem('parson',obj);
//获取我们在本地存储的值
console.log(localStorage.getItem("parson"));
//拿到原来的数据
obj=JSON.parse(localStorage.getItem('parson'));
console.log(obj);
</script>
window其他方法
// 打开一个窗口
window.open('http://www.baidu.com');
// 将url编码
var url = 'http://huruqing.cn:3003?username=张三&age=18";
var newUrl = encodeURI(url);
// 解码
var newUrl = decodeURI(newUrl);
// 延迟执行
var timer = setTimeout(function(){
alert(2222);
}, 3000);
// 清除延迟器
clearTimeout(timer);
// 定时器
var count = 60;
var timer = setInterval(function() {
console.log(--count);
if (count === 0) {
// 清除定时器
clearInterval(timer);
}
},1000);
BOM
浏览器对象模型(Browser Object Model)简称BOM,浏览器对象模型(BOM)使JavaScript有能力与浏览器”对话“
BOM对象包含了以下内容
1.location:包含了当前网页文档的URL信息
2.history:包含浏览器窗口访问过的URL信息.
3.navigator:包含了客户端有关浏览器哦信息
4.screen：包含客户端屏幕的信息
5.frames : 返回窗口中所有命名的框架
6.XMLHttpRequest:用来创建ajax对象的构造函数
1.location
包含当前网页文档的 URL 信息。
location.href 获取浏览器地址 (window.location)
location.href = ‘http://www.baidu.com’ // 跳转到百度
location.href = ‘http://www.baidu.com?username=zhangsan&age=18’
问: 如何获取url后面的参数
location.search 获取url问号后面的字符串(一般称为参数)
2. history
包含浏览器窗口访问过的 URL 信息。
history.back(); // 后退
history.forward(); // 前进
history.go(); // go(1)前进一个记录, go(-1)后退一个记录
3.navigator
包含客户端有关浏览器信息.主要用到的是
navigator.userAgent:检测用户用的是pc端还是移动端
// 判断用户使用的设备是pc还是移动端,可以使用|添加更多设备类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
if (navigator.userAgent.match(/ipad|iphone|android|playbook/i)){
console.log('这是移动端');
location.href = 'https://m.maizuo.com/v5/#/films/nowPlaying';
} else {
console.log('这是pc端')
location.href = 'https://www.maizuo.com/#/';
}
</script>
</head>
<body>
</body>
</html>
Ajax
1.什么是ajax
ajax（异步的JavaScript和xml）.
Ajax最大的优点实在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容
2.创建Ajax的过程
概念:接口和接口地址,接口是服务器给前端提供数据的出口(服务器接口)，接口地址,就是接口所在的位置
前端可以使用Ajax请求接口从而获取服务器提供的数据,以下是请求数据的全过程（步骤）
1.创建异步Ajax请求对象
2.设置请求的参数
(1).请求方法get和post
(2).请求参数
3.发送请求
4.注册(绑定事件)
5.获取返回数据
ajax创建过程
<h3>用户列表</h3>
<ol>
<!-- 具体用户 -->
</ol>
<script>
//1.创建ajax对象
var xhr = new XMLHttpRequest();
//2.设置请求参数: 请求方法get|post,请求参数
xhr.open('GET','http://huruqing.cn:3009/getUsers');
//3. 发送请求
xhr.send();
//4. 注册处理请求的事件和函数
xhr.onreadystatechange = function() {
console.log(xhr.readyState);
// readyState为4,代表已经跟服务器连接上了
// status为200, 代表服务器返回了成功的数据
if(xhr.readyState === 4 && xhr.status === 200) {
// responseText是服务器给前端返回的数据
// console.log(typeof xhr.responseText);
// console.log(xhr.responseText);
// 将json字符串转为数组或者对象
var list = JSON.parse(xhr.responseText);
console.log(list);
}
}
</script>
ajax请求参数
<script>
// 封装成一个函数
function getUser(userId) {
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://huruqing.cn:3009/getUserDetail?userId='+userId);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
}
}
getUser('92be12aba9b01f');
getUser('b3e6758a5490e5');
</script>
3.查看网络请求
认识浏览器控制台
元素
控制台
来源: 源代码
网络: 查看网络请求
其他
网络一栏
http请求: 一个图片, 一个css文件, 一个js文件这些都是从服务器端取回来的, 都叫一个http请求, XHR请求就是ajax请求了
过滤: 搜索某个网络请求
双击一个xhr请求, 就能查看到请求的详细信息
ajax请求详解
请求消息
常规消息
请求头
响应头
载荷: 请求参数
预览: 服务器返回数据预览
响应: 服务器返回的数据
其它…
4.get请求和post区别
用途不一样
get 一般用于获取数据: 数据事先存在服务器, 通过get请求去获取
post 一般用于发送数据: 比如用户注册, 用户填好表单后, 通过post把数据传给服务器, 服务器再将数据存入数据库
ps: 实际项目中, 也并非一定要这么做, 具体情况根据公司实际情况处理, 后台一般会提供接口文档, 指定请求方法
传递参数方式不一样
get请求如果需要传递参数，那么会默认将参数拼接到url的后面；然后发送给服务器；get请求传递参数大小是有限制的；是浏览器的地址栏有大小限制；
post传递参数，需要把参数放进请求体中，发送给服务器；post请求参数放进了请求体中，对大小没有要求；
安全性问题
get安全性相对较低
post安全性相对比较高；
ps: 安全性是相对而言的, 网页的安全性其实不管用那种方式, 安全性都很难很高, 因为别人甚至可以绕过浏览器去请求数据, 所以在实际项目中, 一般前端要校验数据, 后端也要校验数据
浏览器缓存
get 一般会走缓存，为了防止走缓存，给url后面每次拼的参数不同；放在?后面，一般用个时间戳
post请求不会走缓存；
// get请求
function aa(userId) {
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://huruqing.cn:3009/getUserDetail?userId='+userId);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log('get请求',data);
}
}
}
aa('92be12aba9b01f');
// post请求
function bb(userId) {
var xhr = new XMLHttpRequest();
xhr.open('post', 'http://huruqing.cn:3009/getUserDetail');
// Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded; charset=UTF-8');
xhr.send('userId='+userId);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log('post请求',data);
}
}
}
bb('92be12aba9b01f');
CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)