ES5学习——BOM操作

最新推荐文章于 2024-09-03 16:07:32 发布

一顾明月

最新推荐文章于 2024-09-03 16:07:32 发布

阅读量151

点赞数

文章标签： javascript bom

本文链接：https://blog.csdn.net/weixin_48653292/article/details/120458565

版权

BOM 浏览器对象模型

window里一个核心对象，表示浏览器对象的一个实例

js是单线程的语言，但是我们可以通过超时调用或者间歇调用来调度代码

超时调用

setTimeout(function(){},time)
        作用：在指定的毫秒数后执行函数
        参数:要执行的函数（必须有）
             time以毫秒表示的时间（可选，默认为零）
        返回值：是一个数字，代表当前setTimeout的一个ID
clearTimeout()
        作用：取消某个超时调用
        参数：某个setTimeout超时调用的id
例子：
var id= setTimeout(function(){
            alert('时间到了')},2000)
clearTimeout(id);

间歇调用

setInterval(function(){},time)
        作用：每time时间调用一次function
        参数：要执行的函数，间隔时间
        返回值：是一个数字，代表当前setInterval的一个ID
例子：
          var id=  setInterval(function(){
            console.log('时间到'); } ,1000)
        clearInterval(id);

系统对话框

调用系统对话框向用户提示消息，当对话框显示的时候，代码会暂停执行，关掉后，代码继续执行
        alert()警告框，提示框
        会阻塞代码运行
        参数：字符串，显示给用户
        返回值：没有
        confirm()
        确认对话框
        有俩按钮，确认和取消
        返回值：点击确认返回true 点击取消返回false
        prompt() 提示用户输入文本
        var re=prompt('请输入姓名');
        console.log(re+'hello');
        参数 ：可以输入字符串
        返回值： 点击确定 返回用户输入文本，要是没输入，就是空字符串，取消返回null

Location

        BOM对象之一
        提供当前加载到文档的一些信息，还提供了导航功能，即是window的对象又是document的对象
        属性
        host: "127.0.0.1:5500"    服务器名称和端口号
        hostname: "127.0.0.1"     服务器名称
        href: "http://127.0.0.1:5500/ES5/day13/5-Location.html" 当前页面的完整路径
        origin: "http://127.0.0.1:5500"
        pathname: "/ES5/day13/5-Location.html"
        port: "5500"              端口号
        protocol: "http:"         协议

方法：
        assign() 传递一个url参数，打开新url，并在浏览记录中生成一条记录。
        replace() 参数为一个url
            用新的url覆盖当前url 不会生成新的记录不可以回退
        reload() 重新加载当前显示的页面，参数可以为boolean类型，默认为false,表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true,强制从服务器中重新加载

<body>
    <button onclick="link()"> 百度知道</button>
    <script>
        console.log(window.location==document.location);//true
        
        function link(){
            location.assign('http:www.baidu.com');
            // location.replace('http://www.baidu.com');
            // location.reload();

        }
        
    </script>
</body>

history

作用
        保存着用户上网的历史记录，出于安全考虑，我们无法得知用户浏览的url 但是我们可以拿到列表实现前进后退
属性
        length 返回历史列表中的网址数
        注意：firefox chrom safari 都是从1开始，IE和opera从0开始

方法
        back()
        加载 history 列表中的前一个 URL
        forward()
         加载 history 列表中的下一个 URL
        go()
        加载 history 列表中的某个具体页面
        负数表示向后跳转，正数表示向前跳
        参数：数字，可以为负数
            history.go(1); //相当于forward()
            history.go(-1); //相当于back()

Ajax

         Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个用来描述一种使用现有技术集合的‘新’方法.

ajax特点
1.在不影响页面的显示的前提下，可以与后台进行交互
2.交互是隐藏的，用户感知不到，可以在控制台中看到交互
3.可以同一时间多次与后台进行交互，并没有顺序关系
必备技能
1.通过浏览器可以向服务器发送异步请求ajax
2.读懂协议
HTTP协议
    请求报文：
    请求行（请求信息）
    请求头 (客户端发给服务器端的一些元信息)
    请求体
            eg：请求行以什么方式请求
                get /a/b/c?id=1&name=moon HTTP/1.1(版本号可有可无)
                Accept */*
                User-Agent Mozilla/5.0
            eg2：
                post /a/b/c HTTP/1.1
                Accept */*
                User-Agent Mozilla/5.0

                id=1&name=terry
    响应报文：
    响应行
    响应头
    响应体
    eg1：
     HTTP/1.1 200 OK（请求成功）
     Content-Type：text/html
     Content-Length：19201//文件大小
   （返回）
    <!Doctype html><html>...
        eg2：
     HTTP/1.1 200 OK（请求成功）
     Content-Type：application/json
     Content-Length：19201//文件有多大
     （返回）
    '{"name":"moon"}'

双方约定协议
浏览器编写请求报文发送给服务器端，将服务器端返回的响应报文做一个解析

ajax如何使用（属于BOM）
    XMLHttpRequest 构造函数
    1.实例化一个 xhr对象
        var xhr = new XMLHttpRequest()
    2.设置请求行
        xhr.open(method,url);
    3.设置请求头
    xhr.setRequestHeader(key,val)
    4.设置请求体
    xhr.send([data])
        当请求方式为get的时候，  data不需要设置
        当请求方式为post的时候，data需要设置
    5.如何获取请求结果？监听机制
    readystate是就绪状态
    xhr.onreadystatechange = function(){
        //就绪状态为4的时候表示响应成功回来了
        if(this.readyState===4){
            //后台响应状态
         if(this.status === 200){
                //获取响应信息
                this.response

            }
        }
    }
    readyState 取值0-4
    status 取值200-正常 404-找不到资源 403-无权访问 500-后台异常

一顾明月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES5学习——BOM操作

BOM 浏览器对象模型window里一个核心对象，表示浏览器对象的一个实例js是单线程的语言，但是我们可以通过超时调用或者间歇调用来调度代码超时调用setTimeout(function(){},time) 作用：在指定的毫秒数后执行函数参数:要执行的函数（必须有） time以毫秒表示的时间（可选，默认为零）返回值：是一个数字，代表当前setTimeout的一个IDclearTimeout(...
复制链接

扫一扫