BOM
浏览器对象模型,浏览器提供js操作浏览器的api 兼容性问题
js是单线程语言
1)超时调用
setTimeout()
参数:第一个参数是一个回调函数,第二个参数是一个时间(单位是毫秒)
返回值:id值
清除超时调用:clearTimeout(id)
2)间歇调用
setInterval()
参数:第一个参数是一个回调函数,第二个参数是一个时间(单位是毫秒)
返回值:id值
取消间歇调用:clearInterval(id)
3)系统对话框
alert() 该方法接受一个字符串并将其显示给用户。该对话框会包含指定的文本和一个"OK"按钮。主要用来显示警告信息
confirm() 确认对话框,显示包含指定的文本和一个"OK"按钮以及"Cancel"按钮。该方法返回布尔值,true表示单击了OK,false表示单击cancel 或者关闭按钮
prompt() 会话框,提示用户输入一些文本。显示包含文本,ok按钮,cancel按钮以及一个文本输入域,以供用户在其中输入内容。传入两个参数, 要显示给用户的文本提示和文本输入域的默认值。
如果用户单击OK按钮,该方法返回输入域的值,如果用户单击了Cancel或者关闭对话框该方法返回null
4)location对象
属性
host 返回服务器名称和端口号
hostname 返回不带端口号的服务器名称
href 返回当前加载页面的完整URL
pathname 返回URL的目录和文件名
port 返回URL中指定的端口号
protocol 返回页面使用的协议
search 返回URL的查询字符串。这个字符串以问号开头
方法
assign() 传递一个url参数,打开新url,并在浏览记录中生成一条记录
replace() 参数为一个url,结果会导致浏览器位置改变,但不会在历史记录中生成新记录
reload() 重新加载当前显示的页面,参数可以为boolean类型,默认为false,表示以最有效方式重新加载,可能从缓存中直接加 载。如果参数为true,强制从服务器中重新加载
5)history对象
length 返回历史列表中的网址数
注意:IE和Opera从0开始,而Firefox、Chrome和Safari从1开始。
back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面
负数表示向上几页跳转,正数表示下几页跳转
Ajax
async javascript and html (异步的javascript和xml)
负责浏览器和服务器交互的工具
传统页面:刷新页面,加载整个页面,效率比较低
Ajax:局部刷新
异步
同步
服务器
http://47.93.206.13:8002/swagger-ui.html
ajax使用
1.实例化对象(XMLHttpRequest)
var xhr = new XMLHttpRequest()
2.连接服务器(设置请求行)
xhr.open('get',url)
3.设置请求头
xhr.setRequestHeader('Content-Type','application/json')
4.发送请求
xhr.send()
注意:get请求的时候,data可以不传
post请求的时候,data必须传
form-data 图片
5.获取数据(监听请求)
xhr.onreadystatechange(function(e){
this.readState
this.status
this.response(字符串)
//反序列化
var res = JSON.parse(this.response) //对象
})
数据格式:纯文本,json,查询字符串
jQuery(第三方库) api
<diav id = 'app'>hello</div>
var app = document.getElementById('app')
$('#app')
1)第三方库,减轻工作量,它是对我们ECMAScript,DOM,BOM的浅封装
2)使用
1.安装
下载源码(效率高)
2.引入
2.看文档使用
3.jQuery函数
既可以使用$,也可以使用jQuery,$ === jQuery
a. $(选择器)
选中符合选择器的Element(元素),然后将这个元素添加到jQUery对象中
b. $(html片段)
$('<div>hello</div>')
将这个片段先转化为Element(元素),然后将这个元素添加到jQUery对象中
c. $(Element元素)
将这个Element元素转化为jQuery对象
d. $(匿名函数)
在文档加载完毕之后执行匿名函数
jQuery(ajax)
原生ajax
1)初始化对象(XMLHttpRequest)
var xhr = new XMLHttpRequest()
2)建立连接(设置请求行)
xhr.open(type,url)
3)设置请求头
xhr.setRequestHeadler(key,val)
4)发送请求
xhr.send(data) //get:data可以不传,post:传
5)监听响应
xhr.onreadystatechange = function (){
this.readyState //状态 2,3,4(响应回来)
this.status //状态:200,304,404,500
if(this.readyState === 4 $$ this.status === 200){
console.log(this.response) //字符串
//反序列化
var res = JSON.parse(this.response) //对象
}
}
var $ = {
get:function(){
//五步操作
}
}
$.get()
功能
参数
api
$.ajax() 请求数据