Ajax-POST请求

时间:2024-11-11 12:40:38

上文 Ajax-GET请求 已经对Ajax做了简单的介绍,也分享了Ajax中GET数据请求的底层实现以及jQuery封装后的使用方式。那么本文再来记录一下Ajax中POST数据请求方式的底层实现和jQuery封装后的使用。

Ajax最常用的请求服务器方式有GETPOST两种。

GET 请求服务器方式常用于获取服务器数据,而 POST 请求服务器方式常用于向服务器发送数据,可携带参数量较大。本文主要介绍Ajax中的POST请求服务器的原生底层写法jQuery封装后的用法

使用XMLHttpRequest发起POST请求

使用XMLHttpRequest(简称:xhr)发起POST请求主要分五步:

1.创建XMLHttpRequest对象

2.调用open函数,指定请求方式URL地址

3.设置 Content-Tyep 属性(固定写法);

('Content-Type', 'application/x-www-form-urlencoded');

4.调用send函数,同时将数据以查询字符串的形式提交给服务器,发起Ajax请求

5.监听 onreadystatechange 事件。

<script>
        // 1.创建xhr对象
        var xhr = new XMLHttpRequest();
        // 2.调用open函数,决定请求方式和URL地址
        ('POST', 'http://XXX');
        // 3.设置 Content-Tyep 属性(固定写法)
        ('Content-Type', 'application/x-www-form-urlencoded');
        // 4.调用send,同时将数据以查询字符串的形式提交给服务器
        ('bookname=水浒传&author=施耐庵&publisher=北京图书出版社');
        // 5.监听 onreadystatechange 事件
         = function() {
            if( === 4 &&  === 200) {
                ();
            }
        }
</script>

注意:1.第三步设置 Content-Type 属性是固定写法,几乎不需要改的。而第五步回调函数中的if判断条件也是固定写法,也是不需要修改的;

           2.POST请求方式因为主要是用于向服务器发送、提交数据的,所以必定是会携带参数的,参数是作为send()的形参传递的,而参数的格式是查询字符串格式,所以如果数据是以对象形式存储的,就需要使用到()进行序列化操作将对象转换为JSON字符串格式。

ps:将JSON字符串转换为对象——(jsonStr)-这个把字符串转换为对象的操作也叫反序列化操作

使用jQuery发起POST请求

<script>
    // 入口函数
    $(function () {
            // 直接发起$.post(URL, data, [callback])
            $.post('http://XXX',
                {    // data数据,要参考并符合api格式给定
                    bookname: '朝花夕拾',
                    author: '鲁迅',
                    publisher: '长江文艺出版社'
                },
                function (res) {    // 回调函数
                    (res);
                }
            )
    })
</script>

注意:使用jQuery发起POST请求,直接调用 $.post(URL, data, [callback]) 即可,data数据是以对象形式给定的(因为jQuery底层封装时使用了()将对象转换成了JSON字符串格式),URL和data都是必须项,callback为可选项。