原生js创建get/post请求以及封装方式、axios的基本使用

原生js创建get请求

    
    
    
    


    
    
        //创建ajax引擎对象
        let xhr = new XMLHttpRequest();

        //配置请求方式和请求地址
        xhr.open("get","http://ajax.h5.itsource.cn:5000/api/testGet?name=张三");

        // 监听响应码和状态码
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                // 处理数据
                let res = JSON.parse(xhr.responseText);
                console.log(res);

                //判定再渲染
                if(res.code == 200){
                    box.innerHTML = res.data; 
                }
            }
        }
        // 发送请求
        xhr.send();
    

原生js创建post请求

    
    
    
    


    
    
        //创建ajax引擎对象
        let xhr = new XMLHttpRequest();

        //配置请求方式和请求地址
        xhr.open("post","http://ajax.h5.itsource.cn:5000/api/testPost");

        // 监听状态变化和接收数据
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                // 处理数据
                let res = JSON.parse(xhr.responseText);
                console.log(res);

                //判定再渲染
                if(res.code == 200){
                    box.innerHTML = res.data; 
                }
            }
        }

        //请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        // 发送请求
        xhr.send("name=李四");
    

原生get和post封装方式1

    
    
    
    



    
        function ajax(type, url, parmas, callback) {

            //创建ajax引擎对象
            let xhr = new XMLHttpRequest();
            //处理参数,定义一个空数组
            let arr = [];
            //遍历对象，拼接到数组中
            for (const key in parmas) {
                if (Object.hasOwnProperty.call(parmas, key)) {
                    arr.push(key + "=" + parmas[key]);                   
                }
            }
            parmas = arr.join("&");

            if (type == "get") {
                //配置请求方式和请求地址
                xhr.open(type, url + "?"+ parmas);
                // 发送请求
                xhr.send();
            } else {
                //配置请求方式和请求地址
                xhr.open(type, url);
                //请求头
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                // 发送请求
                xhr.send(parmas);
            }

            // 监听状态变化和接收数据
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 处理数据
                    callback(JSON.parse(xhr.responseText));
                }
            }

        }

        ajax("get","http://ajax.h5.itsource.cn:5000/api/testGet",{
            name:"张三"
        },function(res){
            console.log(res);
        })

        ajax("post","http://ajax.h5.itsource.cn:5000/api/testPost",{
            name:"李四"
        },function(res){
            console.log(res);
        })
    

原生get和post封装方式2

    
    
    
    



    

        // //方式二:
        function ajax(obj) {
            //处理参数
            let type = obj.type;
            let url  = obj.url;
            let parmas = obj.params;
            let callback = obj.callback;

            //创建ajax引擎对象
            let xhr = new XMLHttpRequest();
            //处理参数,定义一个空数组
            let arr = [];
            //遍历对象，拼接到数组中
            for (const key in parmas) {
                if (Object.hasOwnProperty.call(parmas, key)) {
                    arr.push(key + "=" + parmas[key]);
                }
            }
            parmas = arr.join("&");

            // 判定
            if (type == "get") {
                //配置请求方式和请求地址
                xhr.open(type, url + "?" + parmas);
                // 发送请求
                xhr.send();
            } else {
                //配置请求方式和请求地址
                xhr.open(type, url);
                //请求头
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                // 发送请求
                xhr.send(parmas);
            }

            // 监听状态变化和接收数据
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 处理数据
                    callback(JSON.parse(xhr.responseText));

                }
            }

        }

        // 调用
        ajax({
            type: "get",
            url: 'http://ajax.h5.itsource.cn:5000/api/testGet',
            params: {
                name: '张三'
            },
            callback: function (res) {
                console.log(res)
            }
        })

        ajax({
            type: "post",
            url: 'http://ajax.h5.itsource.cn:5000/api/testPost',
            params: {
                name: '李四'
            },
            callback: function (res) {
                console.log(res)
            }
        })


    

axios的基本使用

    
    
    
    
    



    
        // 为给定 ID 的 user 创建请求
        axios.get('http://ajax.h5.itsource.cn:5000/api/testGet?name=张三')
            .then(function (response) {
                console.log(response.data);
            })
            .catch(function (error) {
                console.log(error);
            });

        // 上面的请求也可以这样做
        axios.get('http://ajax.h5.itsource.cn:5000/api/testGet', {
            params: {
                ID: 12345
            } 
        })
            .then(function (response) {
                console.log(response.data);
            })
            .catch(function (error) {
                console.log(error);
            });