前端异步编程全套：xmlhttprequest ＞ ajax ＞ promise ＞ async/await-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端异步编程全套：xmlhttprequest ＞ ajax ＞ promise ＞ async/await。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

异步编程

同步与异步区别
- 同步：按顺序，依次执行，向服务器发送请求-->客户端做其他操作
- 异步：分别执行，向服务器发送请求==>同时执行其他操作

原生xmlhttprequest

四步骤

创建ajax对象
```
var a=new xmlhttprequest();
```
设定数据的传输方式（get、post），打开连接open()
```
ajax对象.open("method"，"url"，"同步false/异步true")
```

获得响应数据

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

发送https请求：ajax.send（）

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

获取xml文件的内容，美观的渲染到页面文章来源地址https://www.toymoban.com/news/detail-429556.html

<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;

到了这里，关于前端异步编程全套：xmlhttprequest ＞ ajax ＞ promise ＞ async/await的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！