封装ajax请求

中文名称定义为异步的JavaScript和XML。 由多种技术集合而成,使用Ajax技术不必刷新整个页面,只需对页面的局部进行更新,可以节省网络带宽,提高页面的加载速度,从而缩短用户等待时间,改善用户体验。

以下是封装ajax方法

ar ajax=function(option){
    var type = option.type||"get"; //请求的方式
    var url= option.url|| location.pathname; //请求的页面,如果没有就请求当前的页面
    var async= option.async||true; //是否为异步,默认异步
    var data= option.data || {}; //请求的参数,默认一个对象
    var param ="";  //参数的拼接
    for(var item in data){
       param+= item+"="+data[item]+"&";
    }
    param=param || param.slice(0,-1);//除去最后一个&符号
    var xhr =window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    if(type=="post"){
       xhr.open(type,url,anync);  //设置请求
       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") //设置请求头,只有post的情况才需要post
       xhr.send(param); //post情况需要传入参数
    }else{
       xhr.open(type,url+"?"+param,async); //如果是get的话需要在url上面传参数,并且要主要加问号
       xhr.send(null); //如果是get的话只需要传一个null就可以
    }
    xhr.onreadystatechange=function(){ //注册事件
        if(xhr.readyState===4){ //readyState为4的时候就是已接收,并且已经结束接收
           if(xhr.status===200){ //http属性,200状态时,为正常
              var result=""; //返回的内容
              var contentType=xhr.getResponseHeader("Content-Type"); //得到返回的请求头
              if(contentType.indexOf("xml")>-1){ //判断返回的是不是xml格式
                  result=xhr.responseXML;
              }else if(contentType.indexOf("json")>=1){//判断是不是json格式
                  result=JSON.parse(xhr.responseText);//转换为json格式
              }else{
                  result=xhr.responseText;
              }
              option.success && option.success(result); //执行回调
           }else{
              option.error && option.error("请求错误:"+xhr.status); //错误处理
           }
        }
    }

}

  

posted @ 2017-03-01 22:34  尋壹米陽光  阅读(268)  评论(0编辑  收藏  举报