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

JS 实现AJAX封装（只限于异步）

2024-08-25 09:37:19   238人阅读

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封装（只限于异步）


联系
我们