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

版权声明：本文为博主原创文章，转载需注明出处。 https://blog.csdn.net/jay100500/article/details/86586160

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请求更加的灵活，并且功能更多。