系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > 数据库 > Mysql > 详细页面

ajax原生js封装教程

时间:2020-07-19来源:www.pcxitongcheng.com作者:电脑系统城

<script>
function ajax(json) {
        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();
        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);
            }
        }
    }
</script>

带注释的

copy
<script>
// ajax封装 
        /* 
            请求方式: type 非必传,默认get
            请求地址: url 必传
            是否异步: async 非必传
            设置头请求: contentType 非必传
            请求数据: data 非必传
        */
        function ajax(json) {
             // 如果没传类型,则默认get方式
            json.type = json.type ? json.type : 'get'; 
            // 是否异步传送  布尔值
            json.async = json.async == false ? false : true;
            //设置头请求 get非必须  post方式必须设置
            json.contentType = json.contentType ? json.contentType : 'application/x-www-form-urlencoded';
            //传送数据
            json.data = json.data ? json.data : '';
            //创建异步对象
            var ajax = new XMLHttpRequest();
            // 判断是get还是post请求
            //如果是post请求
            if (json.type.toLowerCase() == 'post') {
                //设置请求类型、请求地址、是否异步
                ajax.open('post', json.url, json.async);
                //post请求一定要在send前设置请求头才行,不然会报错 + 编码方式
                ajax.setRequestHeader('Content-type', json.contentType + ';charset=utf-8');
                //发送请求,数据作为参数传入
                ajax.send(json.data);
            } else {//不是post就为get(第一步设置的)
                //设置请求类型、请求地址(可以带参数)、请求数据、是否异步
                ajax.open('get', json.url + '?' + json.data, json.async);
                //发送请求
                ajax.send();
            }
            //注册事件 onreadystatechange状态改变就会调用
            ajax.onreadystatechange = function () {
                //判断服务器是否正确响应
                if (ajax.readyState == 4 && ajax.status == 200) {
                    //用success作为成功后的回调函数
                    json.success(ajax.response);
                }
            }
        }
</script>
分享到:

相关信息

  • MySQL的核心查询语句详解

    一、单表查询 1、排序 2、聚合函数 3、分组 4、limit 二、SQL约束 1、主键约束 2、非空约束 3、唯一约束 4、外键约束 5、默认值 三、多表查询 1、内连接 1)隐式内连接: 2)显式内连接: 2、外连接 1)左外连接 2)右外连接 四...

    2023-10-30

  • Mysql中如何删除表重复数据

    Mysql删除表重复数据 表里存在唯一主键 没有主键时删除重复数据 Mysql删除表中重复数据并保留一条 准备一张表 用的是mysql8 大家自行更改 创建表并添加四条相同的数据...

    2023-10-30

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载