ajax

作者: DragonRat | 来源:发表于2018-05-21 15:23 被阅读0次

    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');
    }
    
    1. 使用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);
        }
    }
    

    相关文章

      网友评论

        本文标题:ajax

        本文链接:https://www.haomeiwen.com/subject/aqwfjftx.html