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-后台异常