Ajax原生GET和POST请求及Jquery Ajax的GET和POST请求

迈不过友情╰ 2022-04-23 00:06 548阅读 0赞

![20190121224107405.png][]

Ajax原生GET请求接口：

/**
     * 原生Ajax GET请求
     */
    function getOrigantAjaxGet() {
        var oAjax = null;
        //这里进行HTTP请求，创建异步对象
        try {
            oAjax = new XMLHttpRequest();
        } catch (e) {
            oAjax = new ActiveXObject("Microsoft.XMLHTTP");
        };
        //设置请求的参数，包括：请求的方法、请求的url，最后一个参数是是否异步请求
        oAjax.open('get', 'http://' + hostName + ':' + port + '/getList', true);
        //发送请求
        oAjax.send();
        oAjax.onreadystatechange = function () {
            //当状态为4的时候，执行以下操作
            if (oAjax.readyState == 4 && oAjax.status == 200) {
                console.log('数据返回成功');
                // 数据是保存在 异步对象的 属性中
                console.log(oAjax.responseText);
                // 修改页面的显示
                document.querySelector('h1').innerHTML = oAjax.responseText;
            };
        };
    }

Ajax原生POST请求：

/**
     * 原生Ajax POST请求
     */
    function getOrigantAjaxPost() {
        var oAjax = null;
        var postData = '{ "name": "value1", "pwd": "value2" }';
        //这里进行HTTP请求
        try {
            oAjax = new XMLHttpRequest();
        } catch (e) {
            oAjax = new ActiveXObject("Microsoft.XMLHTTP");
        };
        //post方式请求，最后一个参数是是否异步请求
        oAjax.open('post', 'http://' + hostName + ':' + port + '/setList', true);
        //post相比get方式提交多了个这个
        oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        //post发送数据和请求
        oAjax.send(postData);
        oAjax.onreadystatechange = function () {
            //当状态为4的时候，执行以下操作
            if (oAjax.readyState == 4 && oAjax.status == 200) {
                console.log('数据返回成功');
                // 数据是保存在 异步对象的 属性中
                console.log(oAjax.responseText);
            };
        };
    }

接下来看Jquery封装的Ajax的GET请求：

/**
     * Jquery Ajax GET请求
     */
    function requestAjaxGet() {
        $.ajax({
            type: "get",
            data: "data",
            url: "/a/b",
            dataType: "text",
            success: function (data, status) {
                $("#text").text("success: " + status);
            },
            error: function (e) {
                $("#text").text("error: " + e);
            }
        });
    }

Jquery封装的Ajax的POST请求：

/**
     * Jquery Ajax POST请求
     */
    function requestAjaxPost() {
        $.ajax({
            data: {
                name: "Donald Duck",
                pwd: "Duckburg2"
            },
            async: true,
            url: 'http://' + hostName + ':' + port + '/entity/req',
            type: "post",
            dataType: 'JSON',
            success: function (data, status) {
                alert("Data: "+data);
                console.log(data);
            },
            error: function (e) {
                alert("Data: error" + JSON.stringify(e));
            }
        });
    }

还有一种写法，这种是Jquery对Ajax请求的高级封装，不过只能做简单的GET和POST请求。

Jquery对Ajax的GET请求的高级封装：

/**
     * Jquery Ajax GET请求2（高级封装）
     */
    function requestAjaxGet2() {
        $.get("/a/b", function (data, status) {
            $("#text").text("\nStatus: " + status);
        });
    }

Jquery对Ajax的POST请求的高级封装：

/**
     * Jquery Ajax POST请求2（高级封装）
     */
    function requestAjaxPost2() {
        $.post('http://' + hostName + ':' + port + '/entity/req',
            {
                name: "Donald Duck",
                pwd: "Duckburg"
            },
            function (data, status) {
                alert("Data: " + data + "\nStatus: " + status);
            });
    }

前两种的Jquery的Ajax请求更加的灵活，并且功能更多。

[20190121224107405.png]: /images/20220325/e61f4c5fd34149bdad5926c39d37aaf9.png