原生XHR对象使用

用聚合的身份证查询api做个小栗子
https://www.juhe.cn/docs/api/id/38

需求描述:

一个输入框,一个提交按钮.
输入框可以输入身份证号, 提交按钮提交后在界面显示身份信息.

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AjaxTest</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 area = parseData.result.area;
            let sex = parseData.result.sex;
            let birthday = parseData.result.birthday;
            let result = '您的出生地为:' + area + '  您的性别为:' + sex + '  您的生日为:' + birthday;
            return result;
        };
>
        function handleSubmit(){
            let myCard = document.getElementById('myInput').value;
            let myURL = 'http://apis.juhe.cn/idcard/index?key=' + myKey + '&cardno=' + myCard;
            var myXHR = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject();
>
            myXHR.onreadystatechange = function() {
                if (myXHR.readyState === 4) {
                    if (myXHR.status === 200) {
                        let myValue = formatInfo(myXHR.responseText);
                        renderHTML(myValue);}
                    else {renderHTML('请求失败,请重试');}
                }
                else { renderHTML('Loading...') ;}
            };
>
            myXHR.open('GET',myURL);
            myXHR.send();
        };
    </script>
</body>
</html>

说明

其实如果输入错的格式,API那边也会返回200,但是JSON体内带返回码.
上面的代码只是一个默认的格式,回调都可以自己乱写,如果API内带返回码还需要根据返回码做不同操作.实际上更简单了.

思考部分

可以看到上述代码中,handleSubmit部分其实复用度需求是很高的,但是不方便将回调函数和复用部分分离开, 就是说耦合性太强了.
实际上handleSubmit句柄处理的主要部分主要是HTTP部分.如果这部分能单独抽离出来.
ES6支持的promise的API对这部分实现的更好. 之后继续对promise分析代码部分.