Day7_JS基础(4)

最新推荐文章于 2024-10-07 09:24:46 发布

冬冬侠

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量240

点赞数 1

文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/qq_57689862/article/details/125897346

版权

前几天看了js的其他一些基础内容，今天就记录一下这几天学的一些零零散散的知识，为js的学习收个尾巴，后续开始框架的学习，当然js还有一些没看，比如es6、7、8、9、10、11的新特性。

之前看了DOM和BOM的内容，我只想说内容太多太细了，我就举一个定时触发事件来总结一下这两部分的内容。

定时事件

首先想一下什么是定时事件，就和我们的手机闹钟一样会在规定的时间里，触发闹铃，在JavaScript中同样可以设置时间的间隔去执行代码，这也叫定时事件。

JavaScript中与两个关键的方法，他们都属于window对象方法。

setTimeout(function, milliseconds)

在等待指定的毫秒数后执行函数。
setInterval(function, milliseconds)

等同于 setTimeout()，但持续重复执行该函数。

接下来就举个例子设计个程序，点击按钮，等待3秒控制台输出"hello world"，并且每相隔一秒控制台+1。

见代码：

var time = 1;
//延时事件
var btn = document.getElementById("btn");
btn.onclick = function(){
    var timer = setTimeout(
        function(){
            alert("hello")
        },3000
    );
    var timer = setInterval(
        function(){
        console.log(time);
        time = time+1;
    },1000);
}

上面代码，定义一个time计数器，通过dom获取id为btn的按钮，对它进行单击事件触发事件，主要还是setTimeout和setInterval两个方法的使用，实现效果就是等待3秒回弹出一个对话框内容是hello，点击确定后控制台每隔一秒回一直累加1，当然如果想要暂停的话，可以设置当累加达到设定的值后，使用clearInterval方法去清除定时器。

DOM可以操作html中的任何元素或者样式，可以对其进行修改、插入等修改。这里就不写案例了，内容特别特别多，具体到后面写项目时看一下就知道怎么用了。

AJAX

AJAX 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

AJAX 的核心是 XMLHttpRequest 对象 很多浏览器都支持XMLHttpRequest 对象需要注意的是，安全原因，现代浏览器不允许跨域访问，这意味着尝试加载的网页和 XML 文件都必须位于相同服务器上。

XMLHttpRequest 常用方法：

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象
open(method, url, async, user, psw)	规定请求method：请求类型 GET 或 POST url：文件位置 async：true（异步）或 false（同步） user：可选的用户名称 psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对

var Ajax = {
    get: function (url, fn) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
                fn.call(this, xhr.responseText);
            }
        };
        xhr.send();
    }
};

// 演示GET请求
Ajax.get("car.json", function (response) {
      console.log(response);
});

上面是模拟的一段GET请求，创建ajax对象，创建get函数，调用car.json数据，最后在控制台打印。