原生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分析代码部分.
