JS三座大山之异步、ajax1. 什么是同步？什么是异步？ JS是单线程语言，会优先把同步任务执行完再去执行异步任务。

1. 什么是同步？什么是异步？

能直接拿到结果的是同步，不能直接拿到结果的就是异步

JS是单线程语言，会优先把同步任务执行完再去执行异步任务。

举例：

  console.log(1);

    setTimeout(function () {
        console.log(2);
    }, 1000);

    setTimeout(function () {
        console.log(3);
    }, 0);

    console.log(4);
    //依次是1 4 3 2，因为1和4都是同步任务，js碰到异步任务会先挂起，等同步任务执行完再执行异步任务

异步的应用场景有：

定时任务：setTimeout（定时执行）、setInterval（循环执行）
网络请求：ajax请求、动态加载
事件绑定（addEventListener）

2. 什么是回调？

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp提前定义好的一个函数，等着被作为实参传入另一函数，并在该函数内被调用，用以来完成某些任务，一般只要作为参数被调用的函数都称为回调函数。

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp回调分同步回调和异步回调。在同步函数中作为参数被调用就是同步回调，如果传给异步函数，就是异步回调，当异步函数执行完毕时调用fn，就能通过回调拿到了异步处理的结果。

function employee(telNumber){
  console.log(`给${telNumber}致电中。。。`)
}
function employer(telNumber,callback){
  console.log('一会把号码发给你，替我打个电话')
setTimeout(function(){
callback(telNumber)
},2000)
}
employer('12345678',employee)

3. ajax

Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）

我们在访问一个普通的网站时，当浏览器加载完HTML、CSS、JS以后，网站的内容就固定了。如果想让网站内容发生更改，就必须刷新页面才能够看到更新的内容。

可如果用到异步更新，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的加载更多，会自动帮我们加载更多的微博，同时页面并没有刷新。

试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要刷新，体验就太不好了。

web前端里的异步更新，就要用到 Ajax。

使用方法

第一步：获取XMLHttpRequest对象 let request=new XMLHttpRequest() 第二步：设置请求参数 request.open('GET',xxx) 第三步：监听对象的状态

request.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(request.response)
  }
};

第四步：发送请求 request.send()

readyState 状态码

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得。
3	LOADING	下载中； responseText 属性已经包含部分数据。
4	DONE	下载操作已完成。

ajax加载示例：

getJson.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/5.json')
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
            const obj = JSON.parse(request.response)
            console.log(obj)
            myName.textContent = obj.name
        }
    }
    request.send()
}
getXML.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/4.xml')
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
            const dom = request.responseXML
            const text = dom.getElementsByTagName('warning')[0].textContent
            console.log(text.trim())
        }
    }
    request.send()
}
getCSS.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/style.css')
    request.onreadystatechange = () => {

        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
                const style = document.createElement('style')
                style.innerHTML = request.response
                document.head.appendChild(style)
            } else {
                console.log('失败')
            }
        }
    }

    request.send()
}
getJS.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/2.js')
    request.onload = () => {
        const script = document.createElement('script')
        script.innerHTML = request.response
        document.body.appendChild(script)
        console.log(request.response)
    }
    request.onerror = () => {

    }
    request.send()
}
getHTML.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/3.html')
    request.onload = () => {
        const div = request.createElement('div')
        div.innerHTML = request.response
        document.body.appendChild(div)
    }
    request.onerror = () => {

    }
    request.send()

}