封装ajax
html代码 :
<button id='get1'>get</button>
<button id='post1'>post</button>
js代码 :
<script>
function $ajax({method="get",url,data,success,error,asnyc=true}){
xhr = null //存放ajax对象用的变量
try{
xhr = new XMLHttpRequest() //IE8
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE8以下
}
//判断需不需要传参
if(data){
//{'name':'张三',age:18} 让用户传这个对象格式的参数
//通过自定义的haha函数,把对象格式转换成"张三"&age=18'这个格式
//'name="张三"&age=18'
data = haha(data)
}
if(method.toLocaleLowerCase() == 'get' && data){
//看你是不是用的get方法,同时传参了
url+= "?"+data // 1.php?name="张三"&age=18
}
//初始化
xhr.open(method,url,asnyc)
//判断你使用get还是post方法
if(method.toLocaleLowerCase() == 'get'){
xhr.send()
}else{
//post传参需要设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//判断你有参数吗
if(data){
xhr.send(data) // xhr.send('name="张三"&age=18')
}else{
xhr.send()
}
}
//状态码开始发生变化了0-4
xhr.onreadystatechange=function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//回调函数,先判断用户传参没,要是没传参数就是不想处理响应数据
if(success){
success(xhr.response)
}
}else{
if(error){
//请求失败,把错误码当做参数给回调函数error装进去
error(xhr.status)
}
}
}
}
//处理参数的函数
function haha(a){
var str = '';
for(bb in a ){
//遍历对象
str += bb +"="+a[bb]+"&"
}
return str.substring(0,str.length-1);
//截取字符串不拿最后一个&
}
}
var get1 = document.getElementById('get1')
var post1 = document.getElementById('post1')
get1.onclick=function(){
$ajax({
data:{'name':'张三','age':18,sex:'男'},
url:'1.php',
method:'get',
success:function(da){
console.log(da)
console.log('哈哈哈就是这么666')
}
})
}
post1.onclick=function(){
$ajax({
data:{'name':'张三','age':18,sex:'男'},
url:'2.php',
method:'post',
success:function(da){
alert(3)
console.log('我是成功后执行的函数')
console.log(da)
console.log('我是成功后执行的函数')
},
error:function(da){
console.log('您当前的错误码是'+da)
}
})
}
</script>