使用纯JavaScript实现Ajax请求
2022年1月18日
实现目标
在不借助任何第三方框架的前提下，使用最原始的JavaScript语法完成Ajax请求，可以实现POST、GET请求，并能发送JSON格式数据到服务端
代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
let Ajax = (function () { function _request(url, params, type, method) { return new Promise(((resolve, reject) => { let httpRequest = new XMLHttpRequest(); httpRequest.open(method, serverUrl+url, true); //如果需要添加header，示例如下 //<meta charset="utf-8">httpRequest.setRequestHeader("Authorization", "Bearer "); if (type === "json") { httpRequest.setRequestHeader("Content-Type", "application/json; charset=UTF-8"); let json = JSON.stringify(params); httpRequest.send(json); console.log("json:", json) } // readyState == 4 为请求完成，status == 200为请求返回的状态 httpRequest.onload = function (e) { if (httpRequest.readyState === 4 && httpRequest.status === 200) { console.info("请求返回值:", httpRequest.responseText); resolve(JSON.parse(httpRequest.responseText)); } else { console.log(httpRequest.responseText); console.log(httpRequest.responseText + ":" + httpRequest.readyState); console.log("httpRequest:", httpRequest); reject(e); } }; httpRequest.onerror = function (e) { console.error("接口异常", e); console.log(e.toString()); reject(e); } })); } return { post: function (url, params) { return _request(url, params, "json", "POST"); }, get: function (url, body) { return _request(url, body, "json", 'GET'); } } })(); |
调用方
|
1 2 3 |
Ajax.post(url,{a:b,c:d}).then((resp)=>{ //获取返回结果 }) |
About The Author
