ajax

ajax简单理解：

数据交互，实现异步请求（界面无刷新技术）
同步：一次一个，前一个没完后一个不能开始
异步：一次一堆，前一个没完后一个也能开。

Ajax的原理：

简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。其中的核心就是是JavaScript对象XmlHttpRequest。

ajax封装：
ajax函数ajax({url:'',data:{},type:'',timeout:*,success:fn,error:fn);

ajax({
url:'post.php',
data:{
    a:12,
    b:3
},
type:'post',
timeout:5000,
success:function(res){
    alert(res);
},
error:function(){
    alert('失败了');
}
 })

ajax技术实现
1.创建ajax对象

try{
var oAjax=new XMLHttpRequest();
}catch(e){  
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}

2. 使用ajax对象

五步走:
1、 创建ajax对象
2、 初始化设置 请求方式get/post 请求地址url
ajax.open(请求方式,请求地址);
3、 发起请求
ajax.send(请求数据);
4、 接收响应
ajax.readyState ajax通信状态码 5种状态码 对应 5步走
0:创建了ajax对象,但还未初始化(实例化对象,还未调用open方法)
1:已经初始化,但还未发送请求(调用open方法,还未调用send方法)
2:已经发送请求,但还未收到响应(调用send方法)
3:已经收到部分响应,数据还未齐备
4:已经接收所有响应数据
ajax.status HTTP响应状态码
200 : 成功
304 : 引用缓存
404 : 页面未找到(请求地址有问题)
500 : 服务器内部错误
ajax.onreadystatechange 事件属性 ajax状态码改变事件
ajax状态码共有5种,请问该事件触发几次,4次。
如果要获取响应内容,要符合两个条件:
ajax状态码为4时 获取响应内容
http状态码为200时 获取响应内容
条件表达式: ajax.readyState==4 && ajax.status==200
5、 使用响应数据
ajax.responseText 这个属性保存了响应的文本内容

用ajax技术获取时间功能案例

封装post get请求的ajax函数：

  function  getAjax(request,DataType,url,reqData,func){
    //封装post get请求的ajax函数
    //request   请求类型 post?get
    //DataType  数据类型?text/json/xml
    //url   地址
    //reqDate   请求带回后台的数据
    //func      执行函数   在该函数里面做逻辑判断
       var xhr;
       //ajax兼容IE和w3c浏览器,并创建xhr对象
       if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
       }else if(window.ActiveXObject){
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
       }
       //给事件改变绑定一个监听事件//并且将传进来的函数调用起来  func()
    xhr.onreadystatechange=function (){
           if(xhr.readyState==4&&xhr.status==200){
                  if(DataType=='json'){
                      func(JSON.parse(xhr.responseText));
                  }else if(DataType=='xml'){
                     func(xhr.responseXML);
                  }else{
                     func(xhr.responseText);
                  }
           }
    }
    if(request=='get'){ //判断是否为get提交?  以确实reqData值的位置
        var urlP=url+'?'+reqData;
        //建立一个get请求的http
        xhr.open(request,urlP,true);
        //发送http请求
        xhr.send(null);
    }else if(request=='post'){ //判断是否为post提交
        //建立一个post请求的http
        xhr.open(request,url,true);
        //post请求头
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        //发送http请求
        xhr.send(reqData);
    }
}