前后端数据交互ajax(Asynchronous Javascript And XML)

前后端数据交互ajax

ajax是异步JavaScript和XML;主要用于前后端数据交互,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

如何创建ajax?

  • 创建ajax对象
    考虑兼容创建ajax对象
    if(window.XMLHttpRequest){
        //ie6+
        var oAjax = new XMLHttpRequest();
    }else{
        //ie6
        var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
    }
  • 打开地址
//GET和POST方法
oAjax.open('GET',URL+'?'+拼接好的数据,true);
oAjax.open('POST',URL,true);
  • 数据的提交方式
    一般采用GET和POST提交数据
    //GET方法提交
    oAjax.send();
    //POST方法提交(需要设置请求头)
    oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    oAjax.send(json2url(json.data));
  • 接收数据
    oAjax.onreadystatechange=function(){
        if(oAjax.readyState==4){
            if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
                //数据
                oAjax.responseText
            }else{
                //获取失败返回http状态码
                oAjax.status
            }
        }
    };

下面进行具体的封装:

//拼接数据的函数,后面加了时间戳用于防止缓存
function json2url(json){
    var oDate=new Date();
    json.t=oDate.getTime();
    var arr=[];
    for(var name in json){
        arr.push(name+'='+json[name]);
    };
    return arr.join('&');
}
//url,data,type,fnSucc,fnFail,loading
function ajax(json){
    json=json || {};
    json.data=json.data || {};
    json.type=json.type || 'get';
    json.time=json.time || 3000;
    if(!json.url){
        return;
    }
    //创建ajax对象 兼容ie6
    if(window.XMLHttpRequest){
        var oAjax=new XMLHttpRequest();
    }else{
        var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
    }
    //判断数据发送方式
    switch(json.type.toLowerCase()){
        case 'get':
        oAjax.open('GET',json.url+'?'+json2url(json.data),true);
            oAjax.send();
        break;
        case 'post':
            oAjax.open('POST',json.url,true);
            //post方法要设置请求头
            oAjax.setRequestHeader('content-type','application/x-www-form-urlencoded');
            oAjax.send(json2url(json.data));
        break;
    }
    //数据加载时可加入loading函数
    json.loading && json.loading();
    //资源加载情况
    oAjax.onreadystatechange=function(){    
        if(oAjax.readyState==4){
            //http状态码
            if((oAjax.status>=200&&oAjax.status<300)||oAjax.status==304){
                json.success&&json.success(oAjax.responseText);
            }else{
                json.fail&&json.fail(oAjax.status);
            }
            json.complete && json.complete();
            clearTimeout(timer);
        }
    };
    var timer=null;
    //一定时间数据取不会来则提示信息
    timer=setTimeout(function(){
        alert('请求超时');
        oAjax.onreadystatechange=null;
    },json.time)
}
//调用
ajax({
    url:URL,
    data:{数据(json格式)},
    type:post/get,
    loading:function(){},
    success:function(){},
    fail:function(){},
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值