封装简单的Ajax
程序员文章站
2023-11-14 21:14:52
调用请求: 封装函数: 返回值的数据类型不够齐全,如有需要再做修改 ......
调用请求:
var obj = { url:"", //url地址 例如:test.php method:"", //get或post(大小写不限) 例如:get async:true, //true:异步请求 false:同步请求 默认true data:{ //所需要传输的数据(被注释内容为测试所用) // name:"战斗机", // age:20, // husband:null, // arr:["one","two","three"], // dimensional:{ // bust:100, // waist:60, // hipline:90 // } }, success:function (res) { //传输成功的回调函数 //console.log(res) }, fail:function (res) { //失败的回调函数 } } myajax(obj);
封装函数:
//myajax() function myajax(obj) { // 1.创建http请求 var xmlhttp; if (window.xmlhttprequest) { //兼容ie7+,firefox,chrome, opera, safari xmlhttp = new xmlhttprequest(); }else{ //兼容ie6,ie5 xmlhttp = new activexobject("microsoft.xmlhttp"); } // 1.1声明变量 var fangshi = obj.method.touppercase(); var url = obj.url; var async = true; if(obj.async == false){ async = false; } console.log(async); // 1.2遍历传输内容 var data = ""; //data内容重组 (function props(a){ for(var prop in a){ if (a.hasownproperty(prop)) { // console.log(prop); // console.log(a[prop]); if (a[prop] instanceof object && !(a[prop] instanceof array)) { props(a[prop]); }else{ // 遍历出来后如果不是对象则进行拼接 data += prop + "=" + a[prop] +"&"; } } } //for end return data; }(obj.data)) // 2.发起请求 if (fangshi == "get") { //get请求 xmlhttp.open(fangshi, url + "?" + data, async); xmlhttp.send(); }else if (fangshi == "post") { //post请求 xmlhttp.open(fangshi, url, async); xmlhttp.setrequestheader("content-type","application/x-www-form-urlencoded"); xmlhttp.send(data); }else{ alert("请求方式不在支持范围") } // 3.接受数据 xmlhttp.onreadystatechange = function(){ if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { var resp = json.parse(xmlhttp.responsetext); obj.success(resp); }else{ obj.fail(resp); } } }
返回值的数据类型不够齐全,如有需要再做修改
上一篇: .NET Core和无服务器框架
下一篇: 巧用canvas