上文 Ajax-GET请求 已经对Ajax做了简单的介绍,也分享了Ajax中GET数据请求的底层实现以及jQuery封装后的使用方式。那么本文再来记录一下Ajax中POST数据请求方式的底层实现和jQuery封装后的使用。
Ajax最常用的请求服务器方式有GET和POST两种。
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为可选项。