• 前端学习(二十八)es6&ajax(笔记)


    ES6
        let
        块级作用域
        const
        解构赋值
        字符串拼接
        扩展运算符
        -----------------------------------------------------------
        箭头函数
        function show(a){
            return a;
        }
            ↓
        show=a=>a;

        function show(a,b){
            return a+b;
        }
            ↓
        show=(a,b)=>a+b;


        function show(a,b){
            alert(a+b);
        }
            ↓
        show=(a,b)=>{
            alert(a+b);
        }

        function show(){
            alert(12);
        }
            ↓
        show=()=>{
            alert(12);
        }

        function(){

        }
            ↓
        ()=>{

        }

        function(a,b){

        }
            ↓
        (a,b)=>{

        }
    ------------------------------------------------------------
    Map
        var map = new Map()             对象
        设置
            map.set(key,value);
        获取
            map.get(key);
        删除
            map.delete(key);
        清空
            map.clear()

    循环
        for...of...

        for(let [key,value] of map){

        }
    ----------------------------------------------------
        数组扩展方法
            Array.from();
            把类数组变成真正的数组
            var arr = Array.from(类数组);

            类数组
                长得像数组,一样要用for循环遍历。
                但是不能使用数组的方法

                获取一组元素
                arguments
    ------------------------------------------------------
    交互
        $.ajax({
            url:'',
            data:{
                t:Math.random()
            }
        }).then((res)=>{
            //成功
        },(err)=>{
            //失败
        });
    ----------------------------------------------------
        需要后台给你接口

            get.php?a=xxx&b=xxx
            return     
                    number

            post.php?a=xxx&b=xxx
            return
                    number

        $.ajax({
            url:地址,
            type:类型,
            data:{}
        });
    ========================================================
    ajax原理
        1.创建一个ajax对象
            var oAjax = new XMLHttpRequest();
            不兼容IE6
            var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
            兼容IE6,7,8


            兼容写法
            if(window.XMLHttpRequest){
                var oAjax = new XMLHttpRequest();
            }else{
                var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
            }

        GET

            2.打开连接
                oAjax.open('GET',url?data,true);
                        生活            程序
                同步 同时做多件事情        一次只能做一件事
                异步 一次只能做一件事     同时进行多件事情
            3.发送请求
                oAjax.send();

        POST
            2.打开连接
                oAjax.open('POST',url,true);
            设置请求头部
                oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            3.发送请求
                oAjax.send(data);
        4.接收响应
            oAjax.onreadystatechange = function(){
                //判断ajax状态
                if(oAjax.readyState==4){
                    //判断http状态码
                    if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
                        成功

                        响应结果
                        oAjax.responseText
                    }else{
                        失败
                    }
                }
            }

        ajax状态
        0         准备成功未发送
        1         发送成功
        2        接收原始数据成功
        3         解析原始数据成功
        4         完成

    ajax的核心是什么?
        XMLHttpRequest

  • 相关阅读:
    Vue双向绑定的实现原理系列(一):Object.defineproperty
    TCP协议中的三次握手和四次挥手
    一切事物皆对象_进阶篇
    一切事物皆对象_基础篇
    自成一派的正则表达式
    超好用的模块
    软件目录开发规范
    迭代器与生成器
    不怎么好吃的语法糖
    你可造什么是函数
  • 原文地址:https://www.cnblogs.com/wxiaoyu/p/9579394.html
Copyright © 2020-2023  润新知