JS-Web-API(三):Ajax

XMLHttpRequest

GET请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 初始化实例
const xhr = new XMLHttpRequest()
// 第三个参数true则为异步
xhr.open('GET','url', true)
xhr.onreadystatechange = function () {
// 这里函数异步执行
if (xhr.readyState === 4) {
if (xhr.statusCode === 200) {
console.log(xhr.responseText)
} else {
console.log('请求失败')
}
}
}
xhr.send()

JS-Web-API(二):事件

事件绑定

1
2
3
4
const btn = document.getElementById('btn1')
btn.addEventListener('click', event => {
console.log('clicked')
})
1
2
3
4
5
6
7
8
9
10
// 通用的绑定函数
function bindEvent(elem, type, fn) {
elem.addEventListener(type, fn)
}

const a = document.getElementById('link1')
bindEvent(a, 'click', e => {
e.preventDefault() // 阻止默认行为
alert('clicked')
})

JS-Web-API(一):DOM与BOM

DOM

DOM的本质

DOM的本质是从html文件解析出来的树状数据结构

DOM节点操作

获取DOM节点

1
2
3
4
const div1 = document.getElementById('div1') // 获取一个元素
const divList = document.getElementsByTagName('div') // 获取一个元素集合
const containerList = document.getElementsByClassName('.container') // 集合
const pList = document.querySelectorAll('p') // 集合

JS基础知识(四):异步

同步和异步的区别

单线程和异步

  • JS是单线程语言,只能同时做一件事
  • 浏览器和nodejs以支持js启动进程,如Web Worker
  • JS和DOM渲染共用同一个现成,因为JS可修改DOM结构
  • 遇到等待(网络请求,定时任务)不能卡住
  • 所以需要异步
  • 异步基于callback函数形式

JS基础知识(三):作用域与闭包

作用域和自由变量

作用域

  • 全局作用域
  • 函数作用域
  • 块级作用域(ES6新增)

自由变量

  • 一个变量在当前作用域没有定义,但被使用了
  • 向上级作用域,一层一层寻找,直到找到为止
  • 如果到全局作用域都没有找到,则报错xx is not defined
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×