原生js封装的ajax方法示例
程序员文章站
2022-06-22 14:42:05
本文实例讲述了原生js封装的ajax方法。分享给大家供大家参考,具体如下:
众所周知,框架之间会有冲突,这是源生js就起到作用了,下面介绍一种源生js封装的ajax请求。...
本文实例讲述了原生js封装的ajax方法。分享给大家供大家参考,具体如下:
众所周知,框架之间会有冲突,这是源生js就起到作用了,下面介绍一种源生js封装的ajax请求。
function ajax(options) { options = options || {}; options.type = (options.type || "get").touppercase(); options.datatype = options.datatype || "json"; var params = formatparams(options.data); //创建xhr对象 - 非ie6 if (window.xmlhttprequest) { var xhr = new xmlhttprequest(); } else { //ie6及其以下版本浏览器 var xhr = new activexobject('microsoft.xmlhttp'); } //get post 两种请求方式 if (options.type == "get") { xhr.open("get", options.url + "?" + params, true); xhr.send(null); } else if (options.type == "post") { xhr.open("post", options.url, true); //设置表单提交时的内容类型 xhr.setrequestheader("content-type", "application/x-www-form-urlencoded"); xhr.send(params); } //接收 xhr.onreadystatechange = function () { if (xhr.readystate == 4) { var status = xhr.status; if (status >= 200 && status < 300) { options.success && options.success(xhr.responsetext); } else { options.fail && options.fail(status); } } } } //格式化参数 function formatparams(data) { var arr = []; for (var name in data) { arr.push(encodeuricomponent(name) + "=" + encodeuricomponent(data[name])); } arr.push(("v=" + math.random()).replace(".","")); return arr.join("&"); }
调用方法
ajax({ url: "data.json", type: "get", data: {}, datatype: "json", success: function (response) { // 此处放成功后执行的代码 // 解析返回的字符串 转为json对象 var usingdata = eval("("+response+")").data; } fail: function (status) { // 此处放失败后执行的代码 } });
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript中ajax操作技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇: 原生js实现form表单序列化的方法
下一篇: 679. 24 点游戏