首页 > 代码库 > JS 实现AJAX封装(只限于异步)

JS 实现AJAX封装(只限于异步)

1.AJAX 分为异步 和 同步 请求

      比如你去买一个食品,但是商店暂时没有这个食品

        异步:等到商品有了再来买,这个期间我可以去做别的事;

        同步:一直在这里等,什么时候商品来了,买到手了,再去做别的事;

 

    下面我写了一个封装的函数,作为了解,使用的话建议使用JQ的AJAX

 

    

    function Ajaxget(option,fnSucc,fnFaild){
        /*url   请求路径
          getOrPost  get还是post请求
          str        post发送的字符串
         fnSucc      成功函数
         fnFaild     失败函数
        */
        var arument = {
            getUrl : option.url,
            getOrPost : option.getOrPost,
            postSendStr : option.str
        }
        if(window.XMLHttpRequest){
            var xhr = new XMLHttpRequest();
        }else{
            var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if(arument.getOrPost === ‘get‘){
            xhr.open("GET",arument.getUrl,true);
            xhr.send();
        }else if(arument.getOrPost === ‘post‘){
            xhr.open("POST",arument.getUrl,true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(arument.postSendStr)
        }
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                fnSucc(xhr.responseText)
                // document.write(xhr.responseText);
            }else{
                if(fnFaild){
                     fnFaild();
                }
            }
        }
    }

调用请求部分

    Ajaxget({
         url:‘http://sjz.bokanedu.com/tgr/api/index.aspx?day=4-5&type=bkws‘,
         getOrPost:‘get‘,
         str:‘‘
    },function(e){
         document.write(e);
    },function(){
        console.log(‘失败‘)
    })

请求数据如下:

技术分享

 

JS 实现AJAX封装(只限于异步)