ajax封装运用

最新推荐文章于 2024-06-26 09:48:47 发布

weixin_43370067

最新推荐文章于 2024-06-26 09:48:47 发布

阅读量88

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_43370067/article/details/107050796

版权

本文深入探讨了使用AJAX进行异步数据请求的方法，包括GET和POST请求的实现，以及如何通过eval和JSON.parse将响应的字符串转换为JavaScript对象。同时，介绍了JSON数据格式的特点和转换技巧。

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

/*
请求方式：type 非必传，默认get
请求地址：url 必传
是否异步：async 非必传
设置头请求：contentType 非必传
请求数据：data 非必传

*/

ajax({
            'url': 'b.txt',
            'success': function(res){
                console.log(res);
                // 将字符串计算: eval(要转的数据)
                console.log(eval('3+2')); 
                // 在js中{}中的默认就是完整的代码块
                // console.log('(' + eval(res) + ')');
                console.log(JSON.parse(res));//转换为Json类型
                json数据的格式, 键值一一相对的键值对
                        /* 
            json数据的格式: 
                1. [] {}
                2. 所有的属性名和字符全部加上双引号
                3. 多余的符号不要加
                4. 文件名以.json结尾
                5. 转成js数据： JSON.parse(要转换的数据) 
                   转成json数据: JSON.stringify(要转换的数据)
        */
                
                var r = JSON.parse(res);
                console.log(JSON.stringify(r));//转换为字符串
                
            }
        });




  function ajax(json) {
        console.log(json.success);
        json.type = json.type ? json.type : 'get';
        json.async = json.async == false ? false : true;
        json.contentType = json.contentType ? json.contentType : 'application/x-www-form-urlencoded';
        json.data = json.data ? json.data : '';
        var ajax = new XMLHttpRequest();
        // 判断是get还是post请求
        if (json.type.toLowerCase() == 'post') {
            ajax.open('post', json.url, json.async);
            ajax.setRequestHeader('Content-type', json.contentType + ';charset=utf-8');
            ajax.send(json.data);
        } else {
            ajax.open('get', json.url + '?' + json.data, json.async);
            ajax.send();
        }
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                json.success(ajax.response);
            }
        }
    }