//V5.0
//防止被用户修改, 将它变成局部,放在一个函数 中
/*
函数立即执行 函数自执行
(function (params) {
})()
暴露接口给用户使用
*/
(function () {
function ajax(options) {
//ajax请求4步骤:
//-----------------------<<创建xhr对象>>-----------------
//解构options
let { method, url, async, success, params } = options;
// 设置默认值
method = method ?? "get";
async = async ?? true;
success = success ?? function () {};
params = params ?? "";
if ((url = "")) {
//throw作用为抛出异常
throw "url不能为空";
return;
}
var xhr;
//调用创建xhr对象函数createXhr
var xhr = createXhr();
// 对参数进行判断 ,如果是对象调用函数ObjectTOString将它传成字符串
params = ObjectTOString(params);
//------------------------<<打开连接>>---------------------
//toLowerCase()作用是把发来的全部转换为小写
if (params && method.toLowerCase() == "get") {
url = url + "?" + params;
}
xhr.open(method, url, async);
//-------------------------<<设置事件>>-----------------
//用readystatechange
xhr.onreadystatechange = function () {
//如果readyState==4并且Status状态==200的时候进行success回调函数处理
if (xhr.readyState == 4 && xhr.Status == 200) {
success(xhr.responseText);
}
};
//-------------------------<<发起请求>>-----------------
//post请求 请求头不一样
if (method.toLowerCase() == "post") {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
} else {
xhr.send();
}
}
function get(options) {
options.method = "get";
ajax(options);
}
function post(options) {
options.method = "post";
ajax(options);
}
function getJson(options) {
options.method = "get";
//对回调函数进行处理
options.success=function(text){
//回调函数得到的是Json形式
options.success(Json.parse(text))
}
ajax(options);
}
function postJson(options) {
options.method = "post";
//对回调函数进行处理
options.success=function(text){
//回调函数得到的是Json形式
options.success(Json.parse(text))
}
ajax(options);
}
// 创建xhr对象
function createXhr() {
var xmlHttp;
//有没有请求 有就进来new一个 进行兼容性的判断
if (Window.XmlHttpRequest) {
xmlHttp = new XmlHttpRequest();
} else {
//没有就进"microsoft.XMLHTTP"
xmlHttp = new ActiveXObject("microsoft.XMLHTTP");
}
return xmlHttp;
}
// 将object 参数转成字符串
function ObjectTOString(obj) {
//判断传过来的obj是不是对象
if (typeof obj === "object") {
var arr = [];
for (var key in obj) {
arr.push(`${key}=${obj[key]}`);
}
return arr.join("&");
}
return obj;
}
//暴露接口给用户使用
window.jQuery = window.$ = {
ajax,get,post,getJOSN,postJSON
}
})()
//调用ajax函数
jQuery.ajax({
method:"",
url:"",
params:"",
success:()=>{
}
})
封装ajax请求
最新推荐文章于 2024-05-24 13:39:19 发布