精华内容
下载资源
问答
  • 以下是一篇讲原生JS实现加载事件的方法,觉得很好,故此转载。一、JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面; ajax的技术核心是 XMLHttpRequest 对象; ajax 请求过程:创建 XMLHttpRequest 对象、...

    以下是一篇讲原生JS实现加载事件的方法,觉得很好,故此转载。

    一、JS原生Ajax

    • ajax:一种请求数据的方式,不需要刷新整个页面;
    • ajax的技术核心是 XMLHttpRequest 对象;
    • ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据;

    下面简单封装一个函数,之后稍作解释

       ajax({
            url: "./TestXHR.aspx",              //请求地址
            type: "POST",                       //请求方式
            data: { name: "super", age: 20 },        //请求参数
            dataType: "json",
            success: function (response, xml) {
                // 此处放成功后执行的代码
            },
            fail: function (status) {
                // 此处放失败后执行的代码
            }
        });
    
        function ajax(options) {
            options = options || {};
            options.type = (options.type || "GET").toUpperCase();
            options.dataType = options.dataType || "json";
            var params = formatParams(options.data);
    
            //创建 - 非IE6 - 第一步
            if (window.XMLHttpRequest) {
                var xhr = new XMLHttpRequest();
            } else { //IE6及其以下版本浏览器
                var xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
    
            //接收 - 第三步
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    var status = xhr.status;
                    if (status >= 200 && status < 300) {
                        options.success && options.success(xhr.responseText, xhr.responseXML);
                    } else {
                        options.fail && options.fail(status);
                    }
                }
            }
    
            //连接 和 发送 - 第二步
            if (options.type == "GET") {
                xhr.open("GET", options.url + "?" + params, true);
                xhr.send(null);
            } else if (options.type == "POST") {
                xhr.open("POST", options.url, true);
                //设置表单提交时的内容类型
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send(params);
            }
        }
        //格式化参数
        function formatParams(data) {
            var arr = [];
            for (var name in data) {
                arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
            }
            arr.push(("v=" + Math.random()).replace("."));
            return arr.join("&");
        }

    1、创建

    1.1、IE7及其以上版本中支持原生的 XHR 对象,因此可以直接用: var oAjax = new XMLHttpRequest();

    1.2、IE6及其之前的版本中,XHR对象是通过MSXML库中的一个ActiveX对象实现的。有的书中细化了IE中此类对象的三种不同版本,即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和 MSXML2.XMLHttp.6.0;个人感觉太麻烦,可以直接使用下面的语句创建: var oAjax=new ActiveXObject(’Microsoft.XMLHTTP’);

    2、连接和发送

    2.1、open()函数的三个参数:请求方式、请求地址、是否异步请求(同步请求的情况极少,至今还没用到过);

    2.2、GET 请求方式是通过URL参数将数据提交到服务器的,POST则是通过将数据作为 send 的参数提交到服务器;

    2.3、POST 请求中,在发送数据之前,要设置表单提交的内容类型;

    2.4、提交到服务器的参数必须经过 encodeURIComponent() 方法进行编码,实际上在参数列表”key=value”的形式中,key 和 value 都需要进行编码,因为会包含特殊字符。每次请求的时候都会在参数列表中拼入一个 “v=xx” 的字符串,这样是为了拒绝缓存,每次都直接请求到服务器上。

    encodeURI() :用于整个 URI 的编码,不会对本身属于 URI 的特殊字符进行编码,如冒号、正斜杠、问号和井号;其对应的解码函数 decodeURI();
    encodeURIComponent() :用于对 URI 中的某一部分进行编码,会对它发现的任何非标准字符进行编码;其对应的解码函数 decodeURIComponent();
    

    3、接收

    3.1、接收到响应后,响应的数据会自动填充XHR对象,相关属性如下
    responseText:响应返回的主体内容,为字符串类型;
    responseXML:如果响应的内容类型是 “text/xml” 或 “application/xml”,这个属性中将保存着相应的xml 数据,是 XML 对应的 document 类型;
    status:响应的HTTP状态码;
    statusText:HTTP状态的说明;

    3.2、XHR对象的readyState属性表示请求/响应过程的当前活动阶段,这个属性的值如下
    0-未初始化,尚未调用open()方法;
    1-启动,调用了open()方法,未调用send()方法;
    2-发送,已经调用了send()方法,未接收到响应;
    3-接收,已经接收到部分响应数据;
    4-完成,已经接收到全部响应数据;

    只要 readyState 的值变化,就会调用 readystatechange 事件,(其实为了逻辑上通顺,可以把readystatechange放到send之后,因为send时请求服务器,会进行网络通信,需要时间,在send之后指定readystatechange事件处理程序也是可以的,我一般都是这样用,但为了规范和跨浏览器兼容性,还是在open之前进行指定吧)。

    3.3、在readystatechange事件中,先判断响应是否接收完成,然后判断服务器是否成功处理请求,xhr.status 是状态码,状态码以2开头的都是成功,304表示从缓存中获取,上面的代码在每次请求的时候都加入了随机数,所以不会从缓存中取值,故该状态不需判断。

    4、ajax请求是不能跨域的!

    二、JSONP

      JSONP(JSON with Padding) 是一种跨域请求方式。主要原理是利用了script 标签可以跨域请求的特点,由其 src 属性发送请求到服务器,服务器返回 js 代码,网页端接受响应,然后就直接执行了,这和通过 script 标签引用外部文件的原理是一样的。

      JSONP由两部分组成:回调函数和数据,回调函数一般是由网页端控制,作为参数发往服务器端,服务器端把该函数和数据拼成字符串返回。

      比如网页端创建一个 script 标签,并给其 src 赋值为 http://www.superfiresun.com/json/?callback=process, 此时网页端就发起一个请求。服务端将要返回的数据拼好最为函数的参数传入,服务端返回的数据格式类似”process({‘name’:’superfiresun’})”,网页端接收到了响应值,因为请求者是 script,所以相当于直接调用 process 方法,并且传入了一个参数。

      单看响应返回的数据,JSONP 比 ajax 方式就多了一个回调函数。

        function jsonp(options) {
            options = options || {};
            if (!options.url || !options.callback) {
                throw new Error("参数不合法");
            }
    
            //创建 script 标签并加入到页面中
            var callbackName = ('jsonp_' + Math.random()).replace(".", "");
            var oHead = document.getElementsByTagName('head')[0];
            options.data[options.callback] = callbackName;
            var params = formatParams(options.data);
            var oS = document.createElement('script');
            oHead.appendChild(oS);
    
            //创建jsonp回调函数
            window[callbackName] = function (json) {
                oHead.removeChild(oS);
                clearTimeout(oS.timer);
                window[callbackName] = null;
                options.success && options.success(json);
            };
    
            //发送请求
            oS.src = options.url + '?' + params;
    
            //超时处理
            if (options.time) {
                oS.timer = setTimeout(function () {
                    window[callbackName] = null;
                    oHead.removeChild(oS);
                    options.fail && options.fail({ message: "超时" });
                }, time);
            }
        };
    
        //格式化参数
        function formatParams(data) {
            var arr = [];
            for (var name in data) {
                arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[i]));
            }
            return arr.join('&');
        }

    1、因为 script 标签的 src 属性只在第一次设置的时候起作用,导致 script 标签没法重用,所以每次完成操作之后要移除;

    2、JSONP这种请求方式中,参数依旧需要编码;

    3、如果不设置超时,就无法得知此次请求是成功还是失败;

    三、模仿JQuery中的ready()事件

    1、DOMContentLoaded事件,在DOM树加载完成之后立即执行,始终会在load之前执行。
    IE9+、FF、Chrome、Safari3.1+和Opera9+都支持该事件。

    对于不支持该事件的浏览器,可以使用如下代码:
    

    setTimeout(function(){
      // 代码块
    }, 0) ;
    DOMContentLoaded 事件只能通过 DOM2 级方式添加,即采用addEventListener()/attachEvent() 方式添加才能够使用。事件对象不会提供任何额外信息。

    2、readystatechange事件

    IE为DOM文档中的某些部分(区别于 XHR 对象的 readystatechange 事件)提供了该事件,这个事件的目的是提供与文档或元素的加载状态有关的信息,但这个事件的行为有时候也很难预料。支持该事件的对象都有一个readyState属性,注意,不是 event 事件对象。IE、Firefox4+和Opera 支持该事件。

    readyState属性的值如下:
    “uninitialized” - 未初始化:对象存在但尚未初始化;
    “loading” - 正在加载:对象正在加载数据;
    “loaded” - 加载完毕,对象加载数据完毕;
    “interactive” - 交互:可以操作对象了,但还没有完全加载;
    “complete” - 完成:对象已经加载完成;

    2.1、并非所有的对象都会经历readyState的这几个阶段,如果这个阶段不适用某个对象,则该对象完全可能跳过该阶段,并没有规定哪个阶段适用于哪个对象。这意味着 readystatechange 事件经常会少于4次,相对应的 readyState 属性值也不是连续的。

    2.2、对于 document 而言,interactive 和 complete 阶段会在于 DOMContentLoaded 大致相同的时刻触发 readystatechange 事件;

      load 事件和 readystatechange 事件的触发顺序会因页面的外部资源的多少而变化,也就是说,readystatechange 事件并不会一直在 load 事件之前执行。外部资源越多,对 readystatechange 事件就越有利。

      interactive 和 complete 的顺序也是不一致的,谁都有可能先执行,引用的外部资源越多,对交互阶段越有利。所以为了尽可能早的执行代码,两个状态要同时判断。

    3、doScroll
    IE5.5+支持,当页面中有滚动条时,可以用 doScroll(“right”)/doScroll(“down”) 等来移动滚动条,这个方法只有等DOM加载完成以后才能用,所以在IE低版本浏览器中可以通过这个属性判断 DOM 结构是否加载完成。介绍这个属性主要是模仿 jquery 中的解决方案。

    function ready(readyFn) {
            //非IE浏览器
            if (document.addEventListener) {
                document.addEventListener('DOMContentLoaded', function () {
                    readyFn && readyFn();
                }, false);
            } else {
                //方案1和2  哪个快用哪一个
                var bReady = false;
                //方案1
                document.attachEvent('onreadystatechange', function () {
                    if (bReady) {
                        return;
                    }
                    if (document.readyState == 'complete' || document.readyState == "interactive") {
                        bReady = true;
                        readyFn && readyFn();
                    };
                });
    
                //方案2
                //jquery也会担心doScroll会在iframe内失效,此处是判断当前页是否被放在了iframe里
                if (!window.frameElement) {
                    setTimeout(checkDoScroll, 1);
                }
                function checkDoScroll() {
                    try {
                        document.documentElement.doScroll("left");
                        if (bReady) {
                            return;
                        }
                        bReady = true;
                        readyFn && readyFn();
                    }
                    catch (e) {
                        // 不断检查 doScroll 是否可用 - DOM结构是否加载完成
                        setTimeout(checkDoScroll, 1);
                    }
                };
            }
        };

    注:
    setTimeout(checkDoScroll, 1); 目的是让浏览器尽快执行 checkDoScroll 函数,间隔时间设置为 1ms,对当下的浏览器来说是不太可能的。每个浏览器都有自己默认的最小间隔时间,即使时间设置为最小间隔时间,也只是代表隔这些时间过去之后,JavaScript 会把 checkDoScroll 加入到执行队列中,如果此时 JavaScript 进程空闲,则会立即执行该代码。

    原文转载自 前端乱炖(http://www.html-js.com/article/1882)

    展开全文
  • 本文实例讲述了JQuery中DOM加载事件执行原理。分享给大家供大家参考。具体分析如下: JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。当文档或者它的某些元素发生某些变化或操作时,...
  • jquery系列教程4-事件操作全解 jqueryDOM加载事件jquery中的DOM加载事件分为onload事件和ready事件。,具体功能如代码中注释。代码如下://window.onload函数在页面所有内容加载完成后触发,只能执行最后一个window....
       
    

    全栈工程师开发手册 (作者:栾鹏)

    jquery系列教程4-事件操作全解

    jquery中DOM加载事件

    jquery中的DOM加载事件分为onload事件和ready事件。,具体功能如代码中注释。

    代码如下:

    //window.onload函数在页面所有内容加载完成后触发,只能执行最后一个window.onload函数
    $(window).load(function(){         //等价于window.onload = function
        alert("加载完成");
    });
    
    //ready函数在DOM树加载完成后触发,可以同时执行多个ready函数。
    $(document).ready(function(){      //$(document)可以简写成$(),  $(document).ready函数可以简写成$(function(){})
        alert("加载完成");
    });
    
    展开全文
  • <!... < ...> ...给方框绑定事件 ...移除方框点击事件 ...//事件绑定 ...//事件解除 ...//DOM加载完成 window.ready(document, function () { alert( 'dom加载完毕' ); }); script > body > html >
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Examples</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link href="" rel="stylesheet">
    </head>
    
    <body>
        <button type="button" id="addBtn">给方框绑定事件</button>
        <button type="button" id="remBtn">移除方框点击事件</button>
        <br>
        <br>
        <div style="width: 200px; height: 200px; padding: 10px; border: 1px solid #ddd;" id="test">点击绑定\解绑按钮后再点击我,验证结果</div>
        <br>
        <br>
        <br>
        <br>
        <div>111111111111111111111111</div>
        <div>111111111111111111111111</div>
        <div>111111111111111111111111</div>
        <div>111111111111111111111111</div>
        <div>111111111111111111111111</div>
        <div>111111111111111111111111</div>
        <div>111111111111111111111111</div>
        <div>111111111111111111111111</div>
        <div>111111111111111111111111</div>
        <div>111111111111111111111111</div>
        <script>
        (function() {
            var doc = document;
            var modern = doc.addEventListener;
            var pre = modern ? '' : 'on';
    
            //事件绑定
            function on(ele, type, fn) {
                var add = modern ? 'addEventListener' : 'attachEvent';
                ele[add](pre + type, fn);
            }
    
            //事件解除
            function off(ele, type, fn) {
                var rem = modern ? 'removeEventListener' : 'detachEvent';
                ele[rem](pre + type, fn);
            }
    
            //DOM加载
            function ready(ele, fn) {
                var rea = modern ? 'DOMContentLoaded' : 'readystatechange';
                if (rea == 'readystatechange') {
    
                    ele[pre + rea] = function() {
                        if (ele.readyState == 'complete') {
                            fn();
                        }
                    };
                } else {
                    window.on(ele, rea, fn);
                }
            }
    
    
            window.on = on;
            window.off = off;
            window.ready = ready;
        })();
    
        function foo() {
            alert('我绑定点击事件了');
        }
    
        //绑定
        window.on(addBtn, 'click', function() {
            window.on(test, 'click', foo);
        });
    
        //解除
        window.on(remBtn, 'click', function() {
            window.off(test, 'click', foo);
        });
    
        //DOM加载完成
        window.ready(document, function() {
            alert('dom加载完毕');
        });
        </script>
    </body>
    
    </html>
    展开全文
  • document.addEventListener("DOMContentLoaded", function (_event... console.log("初始DOM 加载并解析"); }); window.addEventListener("load", function (_event) { console.log("window 所有资源加载完成");...

     

    document.addEventListener("DOMContentLoaded", function (_event) {
        console.log("初始DOM 加载并解析");
    });
    window.addEventListener("load", function (_event) {
        console.log("window 所有资源加载完成");
    });
    
    document.addEventListener('readystatechange', function (_event) {
        console.log(document.readyState);
        if (document.readyState === "complete") {
            console.log('初始DOM,加载解析完成')
        }
    });
    
    window.addEventListener("beforeunload", function (event) {
        console.log('即将关闭')
        event.returnValue = "\o/";
    });
    window.addEventListener('unload', function (_event) {
        console.log('即将关闭1');
    });

     

    转载于:https://www.cnblogs.com/share123/p/10814772.html

    展开全文
  • 今天小编就为大家分享一篇原生JS实现DOM加载完成马上执行JS代码的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • DOM,众所周知是文档对象模型。这其中文档是什么呢?对象模型是什么?针对的对象是哪些? 其实可以把网页看做是一种文档,而且是有结构的文档。 其次,网页中的各种标记或者叫做标签,可以映射成我们所谓的对象。...
  • $(function(){ //所有代码都是等dom加载完毕才会去执行! });
  • window..onload的是页面加载完成后执行的事件,而且winodw.onload不能多次执行,jquery的$(fn)解决了这个问题,但是不使用jquery的情况下呢?以下是老外写的解决办法 /* * (c)2006 Jesse Skinner/Dean Edwards/...
  • DOM加载完成时运行的代码,可以这样写: jQuery 代码: $(document).ready(function(){ // 在这里写你的代码... });
  • JQuery DOM加载事件执行

    千次阅读 2012-09-10 17:26:49
    JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发...虽然利用传统的JavaScript事件完成这些交互,但jQuery增加并扩展了基本的事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事
  • 像在jquery中会有$(function(){})或者$.ready(function(){})来使代码在DOM加载完成后执行。那么这里面的原理是怎么样的。先看下面代码:ready: function(fn) { var fired = false; function trigger() { if (fired...
  • 今天小编就为大家分享一篇VUE DOM加载后执行自定义事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 什么是MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的MutationEvents功能的替代品,该功能是DOM3 Events规范的...
  • window的onload事件是判断页面是否加载完成,实际上它要等页面中所有的数据元素全部加载完成后才会执行,而在加载...现在,无须等待页面全部加载完,只要其中的DOM加载了,JS就会即时执行! 来源于: DOM 加载事件...
  • ECharts绘制graph流程图创建实例时, ...度娘了下是echarts渲染时dom加载完成,实例没法获取自适应的宽高,结果都是0,用的angularjs,试了下ng-init也没成功。 考虑可以通过ng-style动态设置长宽 <div id
  • 可以看到在DOM1标准内并未添加事件相关的东西。 所以DOM事件级别分别为:DOM0级事件处理,DOM2级事件处理和DOM3级事件处理 先了解一下HTML事件处理程序 某个元素支持的每种事件,都可以使用一个与相应
  • Vue中如果想要在DOM加载之后,获取DOM元素中的值应该怎么做? 需求:在请求后台接口时,返回带有HTML标签的数据content 在前台中通过v-html指令进行绑定 <div v-html="content" id="con"></div> ...
  • window.onload与$(document).ready()比较 ... 需要等到网页中所有内容加载完成后执行(包括图片) 网页中DOM结构绘制完成后执行 编写个数 不能同时编写多个 可以同时编写执行多个 简化写法 无 ...
  • 如何监测DOM对象已加载完成

    千次阅读 2017-07-12 20:34:56
    在第三方插件的使用过程中,我们经常需要DOM在加载完成后执行一些操作,如果插件提供了这样的事件接口,那一切都较为简单,但在大部分的情况下,要么是设计者没有考虑到这样的...// dom加载完成后执行操作 if(dom) {
  • 1、问题:原生javascript、...对页面中的每个模块需要在初始化的时候取得相应的元素,此时遇到的问题就是页面DOM未渲染完成, getElementsByClassName得到的都是空值,由此引出angularJs中如何监控页面加载完成。 ...
  • vueJs实现DOM加载完成之后,调用js

    万次阅读 2017-12-02 08:51:42
    参考 http://blog.csdn.net/u014445339/article/details/54929475  
  • DOM事件机制

    千次阅读 2019-07-28 15:34:56
    本文主要介绍DOM事件级别、DOM事件模型、事件流、事件代理和Event对象常见的应用,希望对你们有些帮助和启发! 本文首发地址为GitHub博客,写文章不易,请多多支持与关注! 一、DOM事件级别 DOM级别一共可以分为四个...
  • 用原生JS我们经常使用window.onload事件加载页面。但是window.onload是在页面元素都加载完毕后才执行,如果页面内有大的图片的话,会在页面展现后好久时间后才执行。所以有时我们需要在DOM载入时马上执行一些函数...
  • DOM4:事件

    2020-05-21 14:54:44
    JavaScriptHTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。 对事件做出反应 我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。 如需在用户点击某个元素时执行代码,...
  • dom记载完成就自动下拉到底部,只需要使用Vue.nextTick(() => {})函数即可,因为vue是虚拟dom,不会实时更新dom,nectTick()就是注册在下一次更新dom之后的回调。 而再看我的问题,其实之所以出现那样的问题,...
  • DOM0事件: 特点: 所有DOM0事件都有on作为开头 <input onclick="test()"/> 清理DOM0事件时,只需给该事件赋值为 null input.onclick = null 同一个元素的同一种事件只能绑定一个函数,否则后面的...
  • 今天发现在页面利用angular绑定数据渲染是JS执行过快,到时DOM都还没准备好,直接就报错了,后来查了些资料 第一种:我们可以利用ng-init指令来帮助我们实现 // html ()"> $scope.init = function() { // to do...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 189,472
精华内容 75,788
关键字:

dom加载完成事件