首页
编程随笔
Java笔记
Html/Css/Js
Android
后端笔记
服务器搭建
BUG收集
Java异常
Android异常
在线工具
Json格式化
编码/解码
Epub在线编辑
登录
发布文章
个人文章
退出登录
首页
技术教程
BUG收集
在线工具
资源下载
登录
发布文章
退出登录
搜索
当前位置:
首页
-
博客
- 正文
关闭
使用原生js仿Jquery的ajax请求
更新时间:2021-03-20 17:24:11
阅读数:831
发布者:落幕
```javascript var Ajax = { ajax: function (param) { var url = param['url']; if (isEmpty(url)) { param.error.call(this, "url不能为空"); return false; } var dataType = param["dataType"]; var type = param["type"]; var data = param["data"]; var methodType = "POST"; var requestData = ""; if (data != null && data != undefined) { // 参数转换 var objs = Object.keys(data); for (var i = 0,len = objs.length, key = ""; i < len; i++) { key = objs[i]; if (i >= 1) { requestData += "&"; } requestData += key + "=" + data[key]; } } if (isEmpty(type) || type.toLowerCase() == "get") { methodType = "GET"; if (url.indexOf("?") != -1 && requestData != "") { // 如果url有参数重新拼接 url += "&" + requestData; } else { url += "?"+ requestData; } } this.send(url, methodType, data, dataType, param.success, param.error) }, /** * 发送ajax请求 * * @param url 请求链接 * @param methodType 请求方法 POST、GET * @param data 请求数据 * @param dataType 返回数据类型 * @param success 成功回调 * @param error 失败回调 */ send: function (url, methodType, data, dataType, success, error) { // XMLHttpRequest对象用于在后台与服务器交换数据 var xhr = new XMLHttpRequest(); xhr.open(methodType, url , true); if (methodType == "POST") { // 添加http头,发送信息至服务器时内容编码类型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } //每当readyState改变时就会触发onreadystatechange函数 //0: 请求未初始化 //1: 服务器连接已建立 //2: 请求已接收 //3: 请求处理中 //4: 请求已完成,且响应已就绪 xhr.onreadystatechange = function() { if (xhr.readyState != 4) { return; } if (xhr.status == 200 || xhr.status == 304) { try { if (dataType != null && dataType.toLowerCase() == "json") { success.call(this, JSON.parse(xhr.responseText)); } else { success.call(this, xhr.responseText); } } catch (e) { error.call(this, e); } } else{ error.call(this, xhr); } }; //发送数据 xhr.send(data); }, isEmpty: function(str) { if (str == null || str == undefined || str == "") { return true; } return false; } } ``` 调用示例: ```javascript Ajax.ajax({ type: "GET", url: "/web/login-status", dataType: "JSON", //请求成功 success: function (result) { console.log(result); }, //请求失败,包含具体的错误信息 error: function (e) { console.log(e); } }); ```