调用请求:
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); } } }
返回值的数据类型不够齐全,如有需要再做修改