es6js学习笔记3

本文详细介绍了Ajax技术,包括其异步传输原理、请求步骤、HTTP请求方式及其实现JSON数据交换。同时,文章还探讨了ES6中的Promise对象,用于解决异步编程的回调地狱问题,阐述了Promise的特性、优缺点及其使用方法,如then、catch、all和race等方法。最后,简单提及了JavaScript的事件循环机制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ajax
    ajax是异步传输技术,是一种创建交互式网页应用开发技术,用来通过前台连接后台代码,
    可以实现网页的异步更新,并且可以局部更新,所以叫作异步刷新,
    局部更新技术,提高浏览器加载速度,节省服务区响应时间
    定义ajax步骤
        1.创建XMLHttpRequest对象
        2.使用open方法链接后台服务器
        3.通过send()发送数据,开始和服务器交互
        4.通过onreadystatechange设置回调函数
        5.执行回调函数读取数据responseText
        readyState判断请求状态
           0请求未初始化 1服务器已连接 2请求已接收 3请求处理中 4请求已完成
        status 返回http状态码
    http的请求方式有哪些
        get 用于从服务器查询信息
        post 用于将数据发送到服务器
        put 用于将数据发送到服务器,上传的资源会替换源目标里的内容
        delete 用来删除指定资源
        head 类似于get,但是没有响应体,只带状态和标题部分
        connect 用来建立URL标识的服务器水滴,通过用于解码的http代理来进行SSL编码
        options 用来描述目标资源的通讯选项,返回服务器支持url的http策略
        trace 用于对目标资源进行消息环回测试,让客户看到服务器进行了哪些进度和增量
    JSON数据格式
        是一种轻量级数据交换格式,大部分前后台语言都支持json格式,不用考虑编程语言
        中的数据格式转化问题,利于前后台传值。存储方式类似于js的对象,用键值对进行定义,
        可以存储任何数据类型
    对象的定义方式
        var obj={name:"lisi",age:23}
    JSON定义方式
        var json={"name":"lisi","age":23}
    属性和方法
        JSON.parse() 转化成json对象
        JSON.stringify() 转化成js字符串
    get和post区别
        1.get传值变量会显示在地址栏里,post会隐藏
        2.查询数据用get,添加或修改用post
        3.get长度有显示,post长度无限的
        4.get请求数据可以收藏书签,post不可以
        5.get请求后,回退或刷新页面无影响,post会把数据重新提交
        6.get历史参数会被保留到浏览器里,post不会保存
        7.get只允许ASCLL编码,post没有编码显示
        8.get的安全性较差,post的安全性较好
    Promise对象
        Promise是异步编程的一种解决方案,传统的解决方法是通过回调函数和事件进行处理,
    Promise类似于一个容器,里面保存着某个为了才会结束的事件,解决ajax的地域回调问题,并且
    支持多个回调函数
    特点:
        1.处理异步函数,解决地域回调,结束异步函数
        2.Promise对象的状态不受外界影响,是一个异步操作,有三种状态:
           进行中(pending),已成功(fulfilled),已失败(rejected)
        3.状态改变只有两种,一种是从进行中到已成功;一种是从进行中到已失败
    缺点:
        1.Promise对象一旦建立,就会立即执行,无法中途取消
        2.如果不设置回调函数,Promise内部抛出错误不会反应到外部
        3.当处于进行中时,无法得知目前进展到哪一个阶段
    例如:
        var p=new Promise(function(reslove,reject){
                        reslove("已成功")  //执行成功的函数
                        reject(new Error("已失败"))  //执行失败的函数
                }).then(function(value){  //成功的回调函数
                        console.log(value)
                }).catch(function(v){  //失败的回调函数
                        console.log(v)
                })
        Promise支持多个then的回调函数
        每个回调函数解决的是一样的Promise对象
           var p=new Promise(function(reslove,reject){
                        reslove(3)
                   })
                   p.then(function(value){
                        console.log(value)  //输出3
                   })
                   p.then(function(value){
                        console.log(value)  //输出3 每次都是重新用P调用的,输出是一个内容
                   })
        每次调用的then拿到的是上次返回的值
           var p=new Promise(function(reslove,reject){
                        reslove(3)
                   }).then(function(value){
                        console.log(value)  //输出3,得到Promise返回的值
                        return value*3
                   }).then(function(value){
                        console.log(value)  //输出9,得到then返回的值
                   })
    属性和方法
        reslove() 执行成功的函数
        reject() 执行失败的函数
        then() 成功的回调函数,异步,可以写多个
        catch() 失败的回调函数
        all()将多个Promise对象包装成一个新的Promise对象(所有都完成)
        race()将多个Promise对象包装成一个新的Promise对象(完成一个即可)
        done()处于回调链的尾端,保证抛出任何可能出现的错误
        finally()无论Promise成功还是失败都执行
    all和race的区别
        var p1=new Promise(function(reslove,reject){
                        console.log("这是p1的输出")
                        reslove("p1已完成")
                })
                var p2=new Promise(function(reslove,reject){
                        console.log("这是p2的输出")
                        reslove("p2已完成")
                })
                var p3=new Promise(function(reslove,reject){
                        console.log("这是p3的输出")
                        reslove("p3已完成")
                })
        Promise.all([p1,p2,p3]).then(function(data){
                        console.log(data)  //[p1,p2,p3]等所有reslove函数执行完在调用
                })
        Promise.race([p1,p2,p3]).then(function(data){
                        console.log(data)  //p1只要有一个执行完毕就行
                })
    事件循环机制(event loop)
       进程:是系统分配的独立资源,是cpu资源分配的基本单位,进程是有一个或多个线程组成
       线程:线程是进程的执行流,是cpu调用和分别的基本单位,多个线程可以共享一个进程资源
       浏览器是多进程的,每一个标签都是独立的进程,但是空白的标签会被合成一个进程
       事件循环机制:js是单线程的,但是会分为同步和异步执行,可以通过异步函数来模拟多进程,
       例如webworker技术
    事件循环机制执行顺序
         首先,事件循环机制会将栈中的所有同步任务执行完毕,栈内被清空后,出现了空闲状态
    才会执行异步队列,在队列里会按顺序执行异步任务,先执行微任务,后执行宏任务,直到所有执行
    完毕,每次栈被清空,就会执行队列,一直这样循环,叫作事件循环机制
         微任务和宏任务
        微任务:then,catch...MutationOserver(nodejs)
        宏任务:script代码,setTimeout,setInterval,ajax
        

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小华仔仔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值