JavaScript-8.bom和ajax

最新推荐文章于 2024-06-10 21:57:03 发布

牛马小龙

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量532

点赞数

文章标签： javascript ajax 开发语言

本文链接：https://blog.csdn.net/m0_65769258/article/details/122354880

版权

金山文档】 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都是存放在客户端(浏览器端),都是浏览器缓存

不同点:

1.作用不一样

cookie数据始终在同源的http请求中携带,在浏览器和服务器来回传递,而

sessionStorage,localStorage仅在本地(浏览器)保存

2.大小限制

cookie数据不超过4kb,sessionStorage和localStorage最大为5M,sessionStorage和localStorage是html5的新特性

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>

api总结

1.存数据setItem('名称',值)

2.取数据getItem('名称')

3.移除数据removeItem('名称')

4.全部清除 clear()

注意

1.数据存入缓存都变成了字符串

2.需要存对象的时候需要先将对象转成JSON字符串

2.window的一些方法

1.JSON

JSON数据格式
JSON.stringify()
JSON.parse();

1.json数据格式

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

1.一般是对象或者数组,服务器端放回给前端的一般就是这种数据格式

2.以键值对存储,键名必须是双引号,值如果是字符串也必须是双引号,最后一个键值对不能加逗号(普通对象可以加)

[
    {
        "username": "张三",
        "age": 18
    },
    {
        "username": "张三2",
        "age": 18
    },
    {
        "username": "张三3",
        "age": 18
    }
]

2.对象和json字符串互转

<script>
        var obj ={name: '张三',age: 18};
        var sb = JSON.stringify(obj);
        console.log(typeof sb);


        var obj2 ='{"name": "张三","age": 18}';
        var sb = JSON.parse(obj2);
        console.log(typeof sb);

</script>

3.json的应用

localStorage和sessionStorage无法存对象,能存字符串,所以我们想存放对象,可以先将对象转字符串,需要使用的时候,再讲字符串转成对象,举例:将张三对象存取.

<script>
        var person = {username: '张三',age: 18};
        var str = JSON.stringify(person);// 将person对象转换为字符串
        sessionStorage.setItem('person',str); //将字符串存入本地缓存
        var sb = sessionStorage.getItem("person"); //取出本地缓存person
        sb = JSON.parse(sb);  //将数据变为对象
        console.log(sb);
</script>

4.window的其他方法

<script>
        // 打开一个窗口,百度
        window.open('http://www.baidu.com');

        var url = 'http://huruqing.cn:3003?username=张三&age=18';
        //将url编码 encodeURL(url)
        var newUrl = encodeURI(url);
        console.log(newUrl);

        //将已经url编码的newUrl进行解码
        var newUrl = decodeURI(newUrl);
        console.log(newUrl);
</script>

<script>
        //设置了一个延迟器,3s后探出2222
        var timer = setTimeout(function(){
            alert(2222)
        },3000)
        //清除延迟器
        clearTimeout(timer);
</script>

<script>
        //定时器
        var count = 60;
        var timer = setInterval(function() {
            //控制台倒计时
            console.log(--count);
            //当时间为0时,清除倒计时
            if(count === 0){
                clearInterval(timer);
            }
        }, 500);
</script>

二.bom是什么

浏览器对象模型(browser object model) 简称bom,浏览器对象模型(bom)使javascript有能里和浏览器'对话'.

BOM对象包含了一下内容

1.location:包含当前网页文档的URL信息

2.history:包含浏览器窗口反问过的URL信息.

3.navigator:包含客户端有关浏览器信息.

4.screen: 包含客户端屏幕的信息

5.frames:返回窗口中所有命名的框架.

6.XHLHttpRequest: 用来创建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问号后面的字符串(一般称为参数)

<script>
        //跳转到百度页面
        location.href  = 'http://www.baidu.com' ;
       
        
      
</script>
<script>
        //获取当前网站的网址给sb变量,但这是变量使编码的
        var sb = location.href ;
        //将编码进行解码
        sb = decodeURI(sb);
        console.log(sb);
</script>
<script>
        location.href = 'http://127.0.0.1:5500/json%E5%BA%94%E7%94%A8.html?username=zhangsan&age=18';
        var sb = location.search;
</script>

2.history

包含浏览器窗口访问过的URL信息

history.back() //后退
history.forwaid() //前进
history.go() //go(1)前进一个记录,go(-1)后退一个记录

3.navigator

包含客户端有关浏览器信息.主要用到的使navigator.userAgent

// 判断用户使用的设备是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

Ajax知识点#

什么是ajax?
创建一个ajax请求的过程(如何从服务器获取数据)
查看网络请求
get请求和post请求区别
http状态码
跨域请求

1.什么是ajax?

AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML)

AJAX最大的优点是在不重新加载整个页面的情况下,可以和服务器交换数据并更新部分页面内容

解释: 在没有ajax之前, 更新页面需要重新加载整个页面, 填一个表单, 然后提交, 如果失败了, 重新提交需要重新填写整个表单

2.ajax创建过程

概念: 接口和接口地址,接口时服务器给前端提供数据的出口(称为服务器接口),接口地址就是接口所在的位置.

前端可以使用ajax请求接口从而获得服务器提供的数据,以下时请求数据的全过程(步骤)

1.创建异步ajax请求对象

2.设置请求的参数

请求方法get或post
请求参数

3.发送事件

4.注册(绑定)事件

5.获取返回数据

<!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>
    <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);
        if (xhr.readyState === 4 && xhr.status === 200) {
            //readyState为4的时候,代表已经跟服务器连接上了
            //status为200的时候,代表服务器返回了成功的数据
          var result = JSON.parse(xhr.responseText);
          console.log(result);
          var str = '';
          result.forEach(function (item) {
            str += `<li>
          name: ${item.username};     
                    </li>`;
          });
          
        }
        var $ol = document.querySelector('ol');
          $ol.innerHTML = str;
      };
    </script>
  </body>
</html>

封装成一个函数

<!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>
        // 封装成一个函数
        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>
</body> 
</html>

3.查看网络请求

1.认识浏览器控制台

1.元素

2.控制台

3.来源:源代码

4.网络:查看网络请求

5.其它...

2.网络一栏

1.http请求: 一个图片,一个css文件,一个js文件这些都是从服务器端取回来的,都叫一个http请求,XHR请求就是ajax请求了.

2.过滤:搜索某个网络请求

3.双击一个xhr请求,就能查看到请求的详细信息

3.ajax请求详解

1.请求消息

常规消息
请求头
响应头

2.载荷:请求参数

3.预览:服务器返回数据浏览

4.响应:服务器返回的数据

5.其它

4.get请求和post区别

1.用途不一样

get 一般用于获取数据: 数据事先存在服务器,通过get请求获取
post 一般用于发送数据:比如用户注册,用户填好表单后,通过post把数据传给服务器再将数据存入数据库

ps:实际项目中,也并非一定要这么做,具体情况根据公司实际情况处理,后台一般会提供接口文档,指定请求方式

2.传递参数方式不一样

get请求如果需要传递参数,那么会默认将参数拼接到url的后面,然后发送到服务器; get请求传递参数的大小是有限的;是浏览器的地址栏有大小限制
post传递参数,需要把参数放进请求体中,发送给服务器;post请求参数放进了请求体中, 对大小没有限制

3.安全性问题

get安全性相对性较低
post安全性相对性较高

ps: 安全性是相对而言的, 网页的安全性其实不管用那种方式, 安全性都很难很高, 因为别人甚至可以绕过浏览器去请求数据, 所以在实际项目中, 一般前端要校验数据, 后端也要校验数据.

4.浏览器缓存

get 一般会走缓存，为了防止走缓存，给url后面每次拼的参数不同；放在?后面，一般用个时间戳
post请求不会走缓存；

<!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>
        // 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'); 

        function bb(userId){
          var xhr = new XMLHttpRequest();
          xhr.open('post','http://huruqing.cn:3009/getUserDetail');
          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'); 
    </script>

5.http状态码

上面代码中xhr.readyState === 4 && xhr.status含义

xhr.readyState(了解)

当发送一个请求后，客户端需要确定这个请求什么时候完成，因此，XMLHttpRequest对象提供了onreadystatechange事件机制来捕获请求的状态，继而实现响应。

xhr.readyState 请求就绪状态（0,1,2,3,4），而且状态也是不可逆的：

0：请求未初始化，还没有调用open()。

1：请求已经建立，但是还没有发送，还没有调用send()。

2：请求已发送，正在处理中(常规现在可以在响应中获取内容头)。

3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。

4：响应已完成；您可以获取并使用服务器的响应了。

xhr.status 就是http状态码了

当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含 HTTP 状态码的信息头（server header）用以响应浏览器的请求。

HTTP 状态码的英文为 HTTP Status Code。。

下面是常见的 HTTP 状态码：

200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误

六.跨域请求

1.跨域请求相关知识

什么叫跨域？浏览器有同源策略，只有当‘协议’，‘域名’，‘端口号’都相同时，才能称之为同源，其中有一个不同，就是跨域。

同源策略的作用是什么？同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

那么我们为什么要跨域呢？一是前端和服务器分开部署，接口请求需要跨域，二是我们可能会加载其他网站的页面作为iframe内嵌。

跨域的方法有哪些？

1.jsonp跨域

2.cors跨域

jsonp只能支持get请求，cors跨域支持多种请求。cors是在服务器端设置，cors并不需要前端做什么工作。

3.proxy（代理）跨域

nginx反向代理（运营或后台）
webpack设置proxy跨域（前端）

4.websocket跨域

5.postMessage

6.其他方式跨域

2.jsonp跨域

问题1：为什么说jsonp不算真正的跨域请求？

1.ajax的核心是通过xmlhttprequerst获取非本页内容jsonp的核心是动态添加script标签调用服务器提供的js脚本。

2.jsonp只支持get请求，ajax支持get和post请求

问题2：jsonp跨域原理是什么？

尽管浏览器有同源策略，但<script>标签的scr属性不会被同源策略所约束，可以获取任意服务器上的脚本并执行。jsonp通过插入script标签的方式来实现跨域，参数只能通过url传入，仅能支持get请求

json跨域步骤：

方式一：

1.创建用户接收数据的方法，比如getData

2.添加script标签，src地址指向了jsonp接口地址，带上参数callback = getData

<!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>
    function getData(data) {
      console.log(data);
    }
  </script>
  <script src="http://huruqing.cn:3009/getData?callback=getData"></script>
</body> 
</html>

方式二：

使用动态创建script的方式

1.创建用户接收数据的方法，比如：getData

2.动态插入script标签

<script>
    var script = document.createElement('script');
    script.src = 'http://huruqing.cn:3009/getData?callback=getData';
    document.body.appendChild(script);
    function getData(data){
        console.log(data);
    }
</script>

注意事项: jsonp接口跟普通接口不太一样, 需要服务器端做特殊处理

七.同步和异步

1. 同步和异步是什么

同步: 同一时间只做一件事, 做完一件事之后才开始做下一件事

异步: 同一时间做多件事

拿做一顿饭举例:

方案1(同步):

第一步: 先做饭, 然后坐等饭煮熟
第二步: 开始洗菜, 洗锅, 然后开始炒菜
第三步: 饭菜上桌开始吃饭

方案2(异步):

第一步: 做饭, 做饭的同时开始洗菜, 洗锅, 炒菜
第二步: 饭熟, 菜也熟了, 上桌吃饭

方案1就是同步

缺点: 速度慢, 优点: 调理清晰

方案2就是异步

缺点: 同时做多件事, 容易乱, 比如一个大厨同时炒几个菜, 经验不足容易手忙脚乱

优点: 效率高

2.js中的同步和异步

在js中是先执行同步操作再执行异步操作

ajax默认是异步请求，所以程序并不会等待ajax请求完成才继续往下执行，而是一边请求一边往下执行
ajax也可设置为同步请求 open的第三个参数设置为false，那样ajax的请求为同步，true为异步。

八.封装ajax请求的库

1.jQuery.js封装有请求ajax的方法

<script>
         $.ajax({
             type: 'get',
             url:'http://huruqing.cn:3009/getUserDetail',
             data: {
                 //请求参数
                 userId: '92be12aba9b01f'
             },
             dataType: 'json', //返回的数据
             success: function(res){
                 //成功回调函数
                 console.log(res);
                 alert('成功获取数据')
             },
             error: function(){
                 alert('请求失败了')
             }
         })
</script>

2.axios一个只封装了ajax请求的库，目前最流行

<!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 src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
  <script>
    var url = 'http://huruqing.cn:3009/getUserDetail';
    axios.get(url, { params: { userId: '92be12aba9b01f' } }).then(function (res) {
      console.log(res);
    }).catch(function () {
      alert('请求失败了');
    })

    axios.post(url, {userId: '92be12aba9b01f'}).then(function (res) {
      console.log(res);
    }).catch(function () {
      alert('请求失败了');
    })
  </script>
</body> 
</html>

牛马小龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-8.bom和ajax

金山文档】 Bom和Ajaxhttps://kdocs.cn/l/cnWuvzdJqqOU一.window对象javascript运行在浏览器,而window对象是浏览器提供的一个对象,所以也可以称为宿主对象.window包含dom和bom和其它的一些全局对象和方法,EcmaScript则运行在浏览器上.window为EcmaScript提供了全局作用域.1.浏览器缓存问题1:浏览器本地缓存有哪些?问题2:cookie,sessionStorage,localStorag
复制链接

扫一扫