Ajax函数封装

最新推荐文章于 2022-06-21 10:07:36 发布

代码在路上

最新推荐文章于 2022-06-21 10:07:36 发布

阅读量72

点赞数

文章标签： javascript node.js 前端

本文链接：https://blog.csdn.net/m0_52250741/article/details/111401426

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script type="text/javascript">
    function ajax(options){
        // 存储的是默认值
    	var defaults={
    		type:'get',
    		url:'',
    		data:{},
    		header:{
    			'Content-Type':'application/x-www-form-urlencoded'
    		},
    		success:function(){},
    		error:function(){}
    	};
    	// 使用options对象中的属性覆盖defaults对象中的属性
    	Object.assign(defaults,options);
        // 创建ajax对象
        var xhr = new XMLHttpRequest();
        // 拼接请求参数的变量
        var params = '';
        // 循环用户传递过来的对象格式参数
        for (var attr in defaults.data) {
            params += attr + '=' + defaults.data[attr] + '&';
        }
        // 将参数最后面的&截取调
        // 将截取的结果重新赋值给params变量
        params = params.substr(0, params.length - 1);
        // 判断请求方式
        if (defaults.type == 'get') {
            defaults.url = defaults.url + '?' + params;
        }
        // 配置ajax对象
        xhr.open(defaults.type, defaults.url);
        // 如果请求方式为post
        if (defaults.type == 'post') {
            // 用户希望的向服务器传递的请求参数的类型
            var contentType = defaults.header['Content-Type'];
            // 设置请求参数格式的类型
            xhr.setRequestHeader('Content-Type', contentType);
            // 判断用户希望的请求参数格式的类型
            // 如果类型为json
            if (contentType == "application/json") {
                // 向服务器端传递json数据格式的参数
                xhr.send(JSON.stringify(defaults.data));
            } else {
                // 向服务器端传递普通类型的请求参数
                xhr.send(params);
            }
        } else {
            // 发送请求
            xhr.send();
        }
        // 监听xhr对象下面的onload事件
        // 当xhr对象接收完响应数据后触发
        xhr.onload = function() {
        	// 获取响应头中的数据
        	var contentType=xhr.getResponseHeader('Content-Type');
        	// 服务器端返回的数据
        	var responseText=xhr.responseText;
        	// 如果响应类型中包含application/json
        	if(contentType.includes('application/json')){
        		// 将json字符串转换为json对象
        		responseText=JSON.parse(responseText)
        	}
        	// 当http状态码等于200的时候
            if (xhr.status == 200) {
            	// 请求成功 调用处理成功情况的函数
                defaults.success(responseText);
            } else {
            	// 请求失败 调用处理失败情况的函数
            	defaults.error(responseText,xhr);
            }
        };
    }
    
    // 调用函数
    ajax({
        // 请求地址
        url: 'http://localhost:3000/responseData',
        success: function(data) {
            console.log('这里是success函数');
            console.log(data);
        },
        error: function(data,xhr) {
        	console.log('这里是error函数');
        	console.log(data);
        	console.log(xhr);
        }
    })
    </script>
</body>
</html>

对应的路由代码

app.get('/responseData', (req, res) => {
    res.send({ "name": "zhangsan" })
})

代码在路上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Ajax函数封装

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <script type="text/javascript"> function ajax(options){ // 存储的是默认值 var defaults={
复制链接

扫一扫