前端异步编程全套：xmlhttprequest ＞ ajax ＞ promise ＞ async/await

异步编程

1. 同步与异步区别

   • 同步：按顺序，依次执行，向服务器发送请求-->客户端做其他操作

   • 异步：分别执行，向服务器发送请求==>同时执行其他操作

原生xmlhttprequest

• 四步骤

  1. 创建ajax对象

     var a=new xmlhttprequest();

  2. 设定数据的传输方式（get、post），打开连接open()

     ajax对象.open("method"，"url"，"同步false/异步true")

  3. 获得响应数据

     属性	描述
     onreadystatechange	当readystate改变时就会调用该函数
     responsetext	获得字符串形式的响应数据
     responsexml	获得xml的形式的响应数据
     readystate	0：请求未初始化 1：服务器连接已建立 2：请求处理中 3：请求处理中 4：请求已完成，且响应已就绪
     status	200：ok 404：未找到页面

  4. 发送https请求：ajax.send（）

• 实际操作数据交换格式【不能跨域】：

  • 获取xml文件的内容，美观的渲染到页面

  • <button>获取数据</button>
        <table></table>
        <script>
            document.getElementsByTagName("button")[0].onclick=function(){
                var ajax=new XMLHttpRequest;
                ajax.open("get","work1.xml",true);
                ajax.onreadystatechange=function(){
                    if(ajax.status==200&&ajax.readyState==4){
                        xixi(ajax.responseXML);
                    }
                }
                ajax.send()
            }
            function xixi(obj){
                        var table="<table><tr><th>姓名</th><th>年龄</th><th>地址</th></tr>"
                        var xml=obj.getElementsByTagName("xi");
                        for(i=0;i<xml.length;i++){
                            table+=`<tr><td>${xml[i].getElementsByTagName("name")[0].childNodes[0].nodeValue}</td>
                                    <td>${xml[i].getElementsByTagName("age")[0].childNodes[0].nodeValue}</td>
                                    <td>${xml[i].getElementsByTagName("address")[0].childNodes[0].nodeValue}</td></tr>`
                        }
                        document.getElementsByTagName("table")[0].innerHTML=table;