每次连接ajax都要重复写很多代码,所以写了一个JS封装函数,如下:
function ajax(obj){ //创建对象 var xhr = new XMLHttpRequest(); //处理URL:拼接随机数,防止浏览器缓存 if(obj.url.indexOf('?')==-1) //代表原url中是不带?号的 { obj.url += '?r=' + Math.random(); } else { obj.url += '&r=' + Math.random(); } //处理参数,如数据'data':{"name":123,'pass':123}; var params = []; for(var i in obj.data) { var key=i; //此时key,i即name var value = obj.data[i]; //i对应的属性值为123 params.push(key + '=' + value); } obj.data = params.join('&'); //建立连接 xhr.open(obj.type,obj.url,obj.async); //监听状态,接收后端返回值 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { obj.callback(JSON.parse(xhr.responseText)); } } //提交方式,get和post的区别 //如果是get请求,就将参数拼接在url后面 if (obj.type == 'get') { obj.url += '&' + obj.data } //如果是post请求,要设置请求头,并且在send方法带上参数 if (obj.type == 'get') { xhr.send(); } else if (obj.type == 'post') { xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send(obj.data); } }
再来解释一下其中obj对象的参数形式:
obj={
'type':提交方式, get/post
'url' : 提交地址, 1.php
'data' : 数据, {"name":123 , "pass":123}
'async': 是否异步, true:异步 false:同步
'callback' : 回调函数 success
}
注意点:
1.数组和字符串中的性质
2.get和post方式的区别