前端【AJAX】

同步：上一个任务结束下一个再开始

           比如alert弹窗，登录注册流程

异步：按顺序开始不一定按顺序结束

           比如图片加载，上传下载等任务

1.原生AJAX

创建ajax  4步

1.1 新建

var xhr  =  new  XMLHttpRequest();

 1.2 配置

xhr.open(请求方式，请求地址，是否异步)

1.3 响应

1.4 发送

xhr.send();

 

obj中：

type:请求方式

url:请求地址  协议+域名/IP：port+路由

data:参数信息

isAsync:是否异步

success:成功回调函数

error:失败回调

js代码

function AJAX(obj){
      var info=Util.data2Search(obj.data);
      var url=obj.url;
      if(obj.type.toLowerCase()==='get'){
           url=url+'?'+info;
           info='';
      }else if(obj.type.toLowerCase()==='post'){        
      }else{
        obj.error({
            msg:"type参数错误"
        })
        return;
      }
    var xhr=new XMLHttpRequest();
    xhr.open(obj.type,url,obj.isAsync);
    xhr.onreadystatechange=function(){
        if(xhr.readyState===4){
            obj.success(
                obj.success(JSON.parse(xhr.responseText))
            )
        }else{
            obj.error(JSON.parse(xhr.responseText))
        }
    }
    xhr.send(info);
}
// function data2Search(data){}
//工具箱
var Util={
    data2Search:function(data){
        var str="";
        var arr=[];
        if(data){
            for(var x in data){
               arr.push(x+'='+data[x]);
            }
        }
        str=arr.join("&");
        return str;
    },
    data2Data:function(search){},
    rand:function(min,max){},
    randColor:function(){}
}