JavaScript技术总结-promise和AJAX

动态加载JavaScript脚本

JasonP跨域的实现

// Promise IE不兼容，需要找shim一下
function loadScript() {
 let _loadScript = function (url, callBack) {
     let promise = new Promise(function (resolve) {

         let script = document.createElement('script')
         script.type = 'text/javascript'
         if (script.readyState) {
             // 兼容IE的script加载事件
             script.onreadystatechange = function () {
                 // loaded ： 下载完毕 complete： 数据准备完毕。这两个状态ie可能同时出现或者只出现一个
                 if (script.readyState === 'loaded' || script.readyState === 'complete') {
                     // 防止加载两次
                     script.onreadystatechange = null
                     callBack()
                     // 把函数传递下去，保证能顺序加载js
                     resolve(_loadScript)
                 }
             }
         } else {
             script.onload = function () {
                 callBack()
                 resolve(_loadScript)
             }
         }
         script.src = url
         document.head.appendChild(script)

     })
     return promise;
 }
 return _loadScript;
}
loadScript('./p1.js', () => { console.log('p1-loading') })
 .then(res => { return res('./p2.js', () => { console.log('p2-loading') }) })
 .then(res => { res('./p3.js', () => { console.log('p3-loading') }) })

实现ajax请求

function getJason(url) {
    const promise = new Promise(
        (resolve, rejects) => {
            const clien = new XMLHttpRequest();
            clien.onreadystatechange = () => {
                if (this.readyState == 4 && this.status == 200) {
                    resolve(this.responseText);
                } else {
                    rejects(new error(this.status));
                }
            }
            clien.open("GET",url);
            clien.setRequestHeader("Accept", "application/json");
            clien.send(null);
        }
    )
    return promise;
}
getJason('/api/p1.jason')
.then((jason)=>{console.log(jason)},(error)=>{console.error(error);
})

function success(text){
    console.log(text)

}
function faildstatus(status){
    console.log(status)
}
var request = new XMLHttpRequest();
// var request = new ActiveXObject('Microsoft.XMLHTTP');
request.onreadystatechange = function(){
    if(request.readyState==4){
        if(request.status==200){
            success(request.responseText)
        }else{
            fail(request.status)
        }
    }else{
        ...
    }
}
request.open("GET",'/api/asa');
request.send();