ES系列 |同步异步 /Ajax

91 阅读2分钟

Offer 驾到,掘友接招!我正在参与2022春招打卡活动,点击查看活动详情

ES系列文章

同步异步

截图20220318210229.png

console.log(1)
setTimeout(() => {
    console.log(2)
}, 0)
console.log(3)
//setTimeout的回调函数放到宏任务队列里,等到执行栈清空以后执行.
  • 同步 在主线程上,排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。
  • 异步 不进入主线程,而进入“任务队列”的任务,只有“任务队列”通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行

Ajax

Ajax是“AsynchronousJavaScriptandXML”的缩写。他是一种创建交互的方式。沟通客户端与服务器,可以在【不必刷新整个浏览器】的情况下,与服务器进行异步通讯的技术

// Ajax的原理
function ajax(url, callback) {
    // 1、创建XMLHttpRequest对象
    var xmlhttp
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
    } else { // 兼容早期浏览器
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 2、发送请求
    xmlhttp.open('GET', url, true)
    xmlhttp.send()
    // 3、服务端响应
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var obj = JSON.parse(xmlhttp.responseText)
            // console.log(obj)
            callback(obj)
        }
    }
}
  • Ajax优点
  1. 最大的一点是页面无刷新,用户的体验非常好。
  2. 使用异步方式与服务器通信,具有更加迅速的响应能力。
  3. 可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,Ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
  • Ajax缺点
  1. Ajax不支持浏览器back按钮。
  2. 安全问题Ajax暴露了与服务器交互的细节。
  3. 对搜索引擎的支持比较弱。
  4. 破坏了程序的异常机制。
  5. 不容易调试。

一个前端小白,若文章有错误内容,欢迎大佬指点讨论!