JS（BOM）

目录

间歇调用和超时调用

1、setTimeout(要执行的函数，毫秒数)：超时调用

2、clearTimeout(ID)：取消超时调用

3、setInterval(要执行的函数，毫秒数)：间歇调用

4、clearInterval(ID)：取消间歇调用

系统对话框

1、alert()：警告框

2、confirm()：确认框

3、prompt()：用户提示框

location对象

1、属性

2、方法

页面跳转location.assign('url')

页面替换 replace('url')

页面刷新reload(布尔值)

history对象

1、属性

2、方法

AJAX

1、get请求无参数

2、get请求有参数

3、post请求有参数

---

间歇调用和超时调用

javascript是单线程语言，但是可以通过超时调用和间歇时间来调度代码在特定时刻执行

1、setTimeout(要执行的函数，毫秒数)：超时调用

超过多长时间执行一次，该方法返回一个数值ID，为了方便取消超时调用

2、clearTimeout(ID)：取消超时调用

3、setInterval(要执行的函数，毫秒数)：间歇调用

每隔多长时间调用一次，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID，该ID可以用户在将来某个时刻取消间歇调用。

4、clearInterval(ID)：取消间歇调用

系统对话框

显示这些对话框的时候代码会停止执行，关掉这些对话框后代码又会恢复执行。

1、alert()：警告框

        该方法接受一个字符串并将其显示给用户。该对话框会包含指定的文本和一个"OK"按钮

2、confirm()：确认框

        显示包含指定的文本和一个"确定"按钮以及"取消"按钮。该方法返回布尔值，true表示单击了OK，false表示单击了cancel或者X按钮  

if((confirm('确认删除?'))){

        alert('确认')

}else{

        alert('取消')

};

3、prompt()：用户提示框

        显示包含文本，ok按钮,cancel按钮以及一个文本输入域，以供用户在其中输入内容。传入两个参数，要显示给用户的文本提示和文本输入域的默认值。如果用户单击OK按钮，该方法返回输入域的值，如果用户单击了Cancel或者关闭对话框该方法返回null

location对象

是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。location是个神奇的对象，既是window的对象也是document的对象。

console.log(window.location == document.location); //true

1、属性

host	返回服务器名称和端口号
hostname	返回不带端口号的服务器名称
href	返回当前加载页面的完整URL
pathname	返回URL的目录和文件名
port	返回URL中指定的端口号
protocol	返回页面使用的协议
search	返回URL的查询字符串。这个字符串以问号开头

2、方法

页面跳转location.assign('url')

location.assign('url');	有历史记录产生
location.href='url';	有历史记录产生
window.open('url')	不产生历史记录

页面替换 replace('url')

        结果会导致浏览器位置改变，但不会在历史记录中生成新记录

页面刷新reload(布尔值)

        参数默认为false,表示以最有效方式重新加载，可能从缓存中直接加载。

        如果参数为true,强制从服务器中重新加载。

location.reload(false);	小刷 --向浏览器缓存中请求数据
location.reload(true);	大刷 --向服务器请求数据

history对象

        该对象保存着用户上网的历史记录。出于安全方面的考虑，开发人员无法得知用户浏览过的URL，不过借由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退前进,注意： 没有应用于History对象的公开标准，不过所有浏览器都支持该对象。

1、属性

length

返回历史列表中的网址数

2、方法

history.back()	加载 history 列表中的前一个 URL
history.forward()	加载 history 列表中的下一个 URL
history.go()	加载 history 列表中的某个具体页面

AJAX

AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。

1、get请求无参数

<script>

        // 创建一个XMLHttpRequest实例对象

        var xhr=new XMLHttpRequest();

        // 打开一个连接 参数:请求方式，请求路径(阿里云服务器)

        xhr.open('get','http://121.199.0.35:8888/index/carousel/findAll');

        // 发送请求

        xhr.send();

        // 接受响应

        xhr.onreadystatechange=function(){

                if(xhr.readyState===4&xhr.status===200){

                        console.log(xhr.response);

                }

        }

</script>

2、get请求有参数

<!-- 引入第三方库Qs -->

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.3/qs.js"></script>

<script>

        // 创建一个XMLHttpRequest实例对象

        var xhr=new XMLHttpRequest();

        // 参数放到对象中

        let obj={

                page:1,

                pageSize:10

        };

        // 打开一个连接，且要将obj转换为查询字符串 ?page=1&pageSize=10

        xhr.open('get','http://121.199.0.35:8888/index/article/pageQuery'+'?'+Qs.stringify(obj));

        // 发送请求

        xhr.send();

        // 接收响应

        xhr.onreadystatechange=function(){

                if(xhr.readyState===4&xhr.status===200){

                        // response就是一个响应

                        console.log(xhr.response);

                }

        }

</script>

3、post请求有参数

<script>

        // 创建一个XMLHttpRequest实例对象

        var xhr=new XMLHttpRequest();

        // 打开一个连接

        xhr.open('post','http://121.199.0.35:8888/user/login');

        let obj={

                username:'admin1',

                password:123321

        }

        // 设置请求头

        xhr.setRequestHeader('Content-Type','application/json');

        // 发送请求，且要将对象转换成JSON字符串

        xhr.send(JSON.stringify(obj));

        // 接收响应

        xhr.onreadystatechange=function(){

                if(xhr.readyState===4&xhr.status===200){

                        console.log(xhr.response);

                }

        }

    </script>