Ajax封装

最新推荐文章于 2023-09-20 10:27:08 发布

0 error（s）0 warning（s）

最新推荐文章于 2023-09-20 10:27:08 发布

阅读量421

点赞数

CC 4.0 BY-SA版权

文章标签： ajax封装

本文链接：https://blog.youkuaiyun.com/weixin_44845533/article/details/99097864

本文介绍了一个简单的AJAX封装函数，用于GET和POST请求。该函数通过XMLHttpRequest实现，能够处理数据转换并提供成功和错误回调。代码示例展示了如何使用此封装函数进行网络请求。

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

附上完整代码

function ajax(json){
    var xhr = new XMLHttpRequest();
    var method = json.method;
    var url = json.url;
    var success = json.success;
    var error = json.error;
    var data = json.data||{}; 
    switch(method){ 
        case 'get':
            xhr.open(method,url+'?'+fn(data),true);
            xhr.send(null);
            break;
        case 'post':
            xhr.open(method,url,true);
            xhr.setRequestHeader('content-type','application/x-www-urlencoded');
            xhr.send(fn(data));
            break;
    }

    xhr.onreadystatechange = function(){
        if(xhr.readyState===4){
            if(xhr.status>=200&&xhr.status<300||xhr.status===304){
                success(JSON.parse(xhr.responseText))
            }else{
                error(xhr.status)
            }
        }
    }

    function fn(obj){
        var arr = [];
        for(var key in obj){
            arr.push(key+'='+obj[key])
        }
        return arr.join('&')
    }
}

使用：

ajax(
		{   
			method:'',  
			url:'',
			data:‘’，
			success:function (res) {  
				 console.log(res);		
			},
			error:function (status) {   
				 console.log(status);		
			}
		}
		);

对封装函数的个人理解以及其中代码解释：
https://blog.youkuaiyun.com/weixin_44845533/article/details/99098298