AJAX(四)

作者: Renderz_干了这碗口嚼酒 | 来源:发表于2017-05-10 17:25 被阅读9次

利用Promise将之前查身份证的小栗子重新修改下.

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AjaxTest2</title>
</head>
<body>
    <input id='myInput' type="text" >
    <button id='myButton' onclick="handleSubmit()">Click To Down Load</button>
    <div id='myDisplay'></div>
>
    <script>
        const myKey = '0a8c23653d43f9a476add0d0ed833472';
>
        function renderHTML(data){
            let myDisplay = document.getElementById('myDisplay');
            myDisplay.innerHTML = data;
        };
>
        function formatInfo(data){
            let parseData = JSON.parse(data); 
            let resultCode = parseData.resultcode;
            let reason = parseData.reason;
            let result = parseData.result;
            if (result){
                let area = parseData.result.area;
                let sex = parseData.result.sex;
                let birthday = parseData.result.birthday;
                var resultText = '您的出生地为:' + area + '  您的性别为:' + sex + '  您的生日为:' + birthday;
            }
            else {var resultText = reason;}
            return resultText;
        };
>
        function handleHttp(url){
            return new Promise(function(resolve,reject){
                var myXHR = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject();
                myXHR.onload = function() {
                    if (myXHR.status == 200){
                        resolve(myXHR.responseText);
                    }
                    else {reject(myXHR.statusText);}
                };
                myXHR.onerror = function() {
                    reject('Network Error...');
                }
>
                myXHR.open('GET',url);
                myXHR.send();
            })
        };
>
        function handleSubmit(){
            let myCard = document.getElementById('myInput').value; 
            let myURL = 'http://apis.juhe.cn/idcard/index?key=' + myKey + '&cardno=' + myCard;
            handleHttp(myURL).then((response)=>{renderHTML(formatInfo(response));}).catch(renderHTML);
        };
    </script>
</body>
</html>

总结

  1. 重构之后,handleSubmit看上去更加整洁逻辑一目了然,当然可以把then部分再写个回调.
  2. handleHttp部分逻辑复用度提升,可以用于各种GET的场合,只要传入url即可. 这边是promise的好处,不用讲异步动作放入主函数内部,而是直接在主函数内部做信号即可. 外部根据信号走回调.

相关文章

  • AJAX的知识梳理

    【目录】 一、用AJAX加载CSS二、用AJAX加载JS三、用AJAX加载HTML四、用AJAX加载XML五、用A...

  • 原生JS写AJAX

    AJAX MDN_AJAX 手写AJAX的主要四个步骤:1.创建XMLHttpReauest2.处理响应(指定响应...

  • AJAX(四)

    利用Promise将之前查身份证的小栗子重新修改下. 代码部分 总结 重构之后,handleSubmit看上去更加...

  • ajax: 封装

    一、封装ajax 二、main.js 引入封装好的 ajax 三、GET请求 引用封装好的 ajax 四、POST...

  • 2020-06-24

    [toc] Ajax Ajax视图的控制权在前端手上,前端入参data,回调后端返回的数据Ajax四个点,请求ur...

  • ajax在什么情况下走success和error

    先简单介绍下ajax: Ajax请求通过XMLHttpRequest对象发送请求,该对象有四个状态(readySt...

  • ajax原理

    一、ajax原理 二、GET 三、POST 四、ajax状态码 五、HTTP状态码 http状态码是3位数

  • ajax

    简单学习的ajax内容 ajax的作用:在不刷新页面的基础上,实现数据局部更新 ajax的四步骤1.创建一个aja...

  • Ajax解密

    ajax(异步的Javascript与XML技术)可以实现局部更新,是异步的; 创建一个Ajax需要四步 上面这个...

  • 2018-07-30

    一 ajax 二 jsonp 三 jquery-jsonp 四 jsonp公开接口

网友评论

      本文标题:AJAX(四)

      本文链接:https://www.haomeiwen.com/subject/lcpgtxtx.html