JavaScript没有通讯能力，而浏览器具有通讯能力。
浏览器内建XMLHttpRequest构造函数与服务器取得联系
通过JavaScript操作XMLHttpRequest与服务器取得联系
构造函数XMLHttpRequest有自己的属性方法
浏览器与服务器进行通信，通信协议就为Http协议
XMLHttpRequest属性方法：
1：open（请求方法，URL，是否异步）
2：send（请求体）
3：readyState
Http协议规定了服务器状态码反馈响应：200，304，404....
XMLHttpRequest具有readyState属性来记录响应时处于哪个过程：0，1，2，3，4
0：未调用open（）方法
1：调用open但未调用send（）方法
2：发送请求但未响应
3：收到部分响应
4：响应都接收完成
readyState属性的数字是一直变化的，响应状态码是当次请求响应的数字
readyState属性值的变化会触发readystatechange事件，
则用onreadystatechange来监视readyState属性值的变化，得到响应成功
<body>
<a>点击获取图片</a>
<img>
<script>
const button = document.querySelector('a');
const image = document.querySelector('img');
function ajaxPromise(){
let promise = new Promise( (resolve),(reject) =>{
let xhr = new XMLHttpRequest();
xhr.open('get','wang.gif',true);
xhr.onreadystatechange = () =>{
if( xhr.status===4){
if( xhr.status >= 200 && xhr.status < 300 || xhr.status ===304){
resolve( xhr.responseURL);
}else{
reject( new Error(xhr.statusText));
}
}
};
xhr.send( null );
});
return promise;
}
button.addEventListener('click', ()=>{
ajaxPromise()
.then(responseURL=>{
image.src = responseURL;
})
.catch( statusText =>{
console.log(statusText);
});
});
</script>
</body>先获取a链接和img
判断state状态是否为4同时状态码大于等于200小于300的时候表示成功，状态码等于304的时候表示从浏览器缓存里获取资源也可，在这两种情况下执行resolve并传入图片的URL，反之执行reject
返回promise完成封装
