使用原生JS封装一个ajax

最新推荐文章于 2025-08-12 16:19:53 发布

Mr.Gu

最新推荐文章于 2025-08-12 16:19:53 发布

阅读量99

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：http://www.cnblogs.com/xigua1994/p/5754322.html

本文介绍了一种手动实现Ajax请求的方法。通过JavaScript创建XMLHttpRequest对象，并通过设置请求类型、URL等参数来发起GET或POST请求。同时实现了回调函数处理响应结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function ajax(data){
    //第一步，创建XHR对象
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();//标准的浏览器
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');//万恶的IE浏览器
    }
    //第二步，准备发送前的一些配置文件
    var type = data.type == 'get' ? 'get' : 'post';
    var url = '';
    if(data.url){
        url = data.url;
        if(type == 'get'){
            url += "?" + data.data + "&_t + new Date().getTime();
        }
    }

    var flag = data.asyn == 'true' ? 'true' : 'false';
    xhr.open(type,url,type);
    //第三步，执行发送的动作
    if(type == 'get'){
        xhr.send(null);
    }else{
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(data.data);
    }
    //指定回掉函数
    xhr.onreadystatechange = function(){
        if(this.readyState == 4){
            if(this.status == 200){
                if(typeof data.success == 'function'){
                    var d = data.dataType == 'xml'?xhr.responseXML:xhr.responseText;
                    data.success(d);
                }
            }else{
                if(typeof data.failure == 'function'){
                    data.failure();
                }
            }
        }
    }
}

其中传入的data属性为：

data={
    data:"",
    dataType:"xml/json",
    type:"get/post",
    url:"",
    asyn:"true/false",
    success:function(){},
    failure:function(){}
}

转载于:https://www.cnblogs.com/xigua1994/p/5754322.html