码迷,mamicode.com
首页 > Web开发 > 详细

原生ajax的简单封装(仅提供大概的思路,具体还有参数验证的都没做)

时间:2019-03-22 16:59:09      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:fun   --   思路   data   调用   ready   object   jaxp   win   

window.onload=function(){
    //get请求========================================================================================
    function ajaxGet(url,success,fail){
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("micsoft XMLHttp")
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    success(JSON.parse(xhr.responseText))
                }else{
                    fail(xhr.status)
                }
            }
        }
        xhr.open("get",url,true);
        xhr.send()
    }

    //post请求=======================================================================================
    function ajaxPost(url,data,success,fail){
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("micsoft XMLHttp")
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    success(JSON.parse(xhr.responseText))
                }else{
                    fail(xhr.status)
                }
            }
        }
        xhr.open("post",url,true);
        xhr.send(data)
    }

    //普通调用
    ajaxPost("https://www.apiopen.top/femaleNameApi",{"page":1},function(res){
        console.log(res)
    },function(res){
        console.log(res)
    })

//-------------------------------------------------------------------------分割线-----------------------------------------------------------------------------

    //面向对象post方法及调用方式==================================================================================
    function Post(obj){
        var options = obj
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("micsoft XMLHttp")
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    options.success(JSON.parse(xhr.responseText))
                }else{
                    options.fail(xhr.status)
                }
            }
        }
        xhr.open(options.method,options.url,options.async);
        xhr.send(options.data)
    }
    //调用
    Post({
        method:"post",
        url:"https://www.apiopen.top/femaleNameApi",
        data:{"page":1},
        async:true,
        success:function(res){
            console.log(res)
        },fail:function(res){
            console.log(res)
        }
    })

}

 

原生ajax的简单封装(仅提供大概的思路,具体还有参数验证的都没做)

标签:fun   --   思路   data   调用   ready   object   jaxp   win   

原文地址:https://www.cnblogs.com/helloNico/p/10579022.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!