Bom 和 Ajax

最新推荐文章于 2024-08-27 09:41:07 发布

超级小丑_Supclown

最新推荐文章于 2024-08-27 09:41:07 发布

阅读量365

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/m0_57860459/article/details/123486167

版权

本文详细介绍了BOM中的window对象，包括浏览器缓存和常用方法，以及BOM的相关对象如location、history和navigator。深入讲解了Ajax的核心概念、创建过程、请求参数、状态码和跨域请求。同时讨论了同步和异步的概念及其在JavaScript中的体现，并提到了jQuery和axios等封装了Ajax请求的库。最后布置了基于Ajax的影院列表和登录页面的作业。

摘要由CSDN通过智能技术生成

金山文档】 Bom和Ajax#

https://kdocs.cn/l/cnWuvzdJqqOU

复习: 回调函数

(一) window对象#

JavaScript运行在浏览器, 而window对象是浏览器提供的一个对象, 所以也可以称为宿主对象。window包含Dom和Bom和其它的一些全局对象和方法, EcmaScript则是运行在浏览器上, window为EcmaScript提供了全局作用域.

(1) 浏览器缓存#

问题1: 浏览器本地缓存有哪些

问题2: cookie、sessionStorage、localStorage有什么区别

相同点:

cookie，sessionStorage，localStorage都是存放在客户端(浏览器端)，都是浏览器缓存

不同点:

作用不一样

cookie数据始终在同源的http请求中携带，在浏览器和服务器来回传递，而sessionStorage，localStorage仅在本地(l浏览器)保存
大小限制区别

cookie数据不超过4kb，sessionStorage和localStorage最大为5M, sessionStorage和localStorage是html5新特性
数据有效期不同
- 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>

api总结:

存数据 setItem('名称', 值);
取数据 getItem('名称');
移除数据 removeItem('名称');
全部清除 clear();

注意:

数据存入缓存都变成了字符串
需要存对象的时, 需要先将对象转成json字符串

(2) window的一些方法#

JSON
- JSON数据格式
- JSON.stringfy()
- JSON.parse();
open();
eval(); // 略
parseInt() 和 parseFloat(); // 略
encodeURI() 和 decodeURI();
setTimout() 和clearTimeout();
setInterval() 和 clearInterval();

01 JSON#

1. json数据格式#

json数据是一种轻量级的数据格式, 非常方便在互联网上传输, 它的格式如下:

一般是对象或者数组, 服务器端返回给前端的一般就是这种数据格式
以键值对存储,键名必须是双引号, 值如果是字符串也必须是双引号, 最后一个键值对不能加逗号(普通对象可以加)

[
    {
        "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无法存对象, 能存字符串, 所以我们想存放对象, 可以先将对象转成字符串, 需要使用的时候, 再讲字符串转成对象, 举例: 将张三对象存取

var person = {username:'张三', age:18};
// 1.将对象转成json字符串
var str = JSON.stringfy(person);
// 2.将字符串存入缓存
localStorage.setItem('person',str);

/* 获取数据 */
// 1.将数据取出
var person =localStorage.getItem('person');
// 2.将字符串person转成对象
person = JSON.parse(person);
console.log(person);

02 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对象包含了以下内容:

location：包含当前网页文档的 URL 信息。
history：包含浏览器窗口访问过的 URL 信息。
navigator：包含客户端有关浏览器信息。
screen：包含客户端屏幕的信息。
frames: 返回窗口中所有命名的框架。
XMLHttpRequest: 用来创建a

最低0.47元/天解锁文章

超级小丑_Supclown

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Bom 和 Ajax

金山文档】 Bom和Ajax#https://kdocs.cn/l/cnWuvzdJqqOU复习: 回调函数(一) window对象#JavaScript运行在浏览器, 而window对象是浏览器提供的一个对象, 所以也可以称为宿主对象。window包含Dom和Bom和其它的一些全局对象和方法, EcmaScript则是运行在浏览器上, window为EcmaScript提供了全局作用域.(1) 浏览器缓存#问题1: 浏览器本地缓存有哪些问题2: cookie、sessionSt
复制链接

扫一扫