今天在看某风网老师录制的 Ajax 函数封装的视频,get 和 post 请求都考虑到了,我在这里也做一下笔记。
我把考虑到的都备注上了,以往可以给大家一点参考。代码如下:
JavaScript:
function ajax(method, url, data, callback) { // method:请求方式,url:请求的地址,data:数据,callback:回调
if (method == "post") { //如果是post请求
data = (function (obj) { // 自动执行的匿名函数 (function(){})();
var str = "";
for (item in obj) { //遍历数据
str += item + "=" + obj[item] + "&";
}
return str.substring(0, str.length - 1); // 返回数据
})(data)
} else if (method == "get") { //如果是get请求
data = true;
};
var xhr = null;
// 创建异步请求
if (window.XMLHttpRequest) { //如果是非IE
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE5.5/6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} else { //错误提示
alert("您的浏览器不支持HttpRequest");
}
if (xhr != null) {
xhr.open(method, url, true); //请求方式,请求地址,是否异步:是
xhr.onreadystatechange = function () { // 当 readyState 改变时,会触发 onreadystatechange 事件。
if (xhr.readyState == 4) { // 如果请求完成
if (xhr.status == 200) { // 如果服务器状态正常
callback(xhr.responseText,"success"); //返回数据和状态
} else {
callback("系统错误!","error"); //错误提示
}
}
}
if (method == "post") { // 如果是post请求,需要设置请求头
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
}
xhr.send(data); // 发送数据
}
}
保存为 ajax.js 文件,使用时直接调用即可。
如果需要调用:
<script>
function send() {
var obj = {name: "Marry", age: "26"};
ajax("post", "post.php", obj , function (data, status) {
if (status == "success") {
console.log(data); //返回的数据
} else {
alert("错误的状态!")
}
})
}
</script>
声明:本文由w3h5原创,转载请注明出处:《一个兼容get请求和post请求的Ajax封装函数》 https://cloud.tencent.com/developer/article/1537785