Ajax前端总结

深碍√TFBOYSˉ_ 2023-02-16 12:12 11阅读 0赞

# Ajax #

不会ajax就不是前端  
ajax最重要作用是的是局部刷新页面（我想学之前你应该已经了解过了）

## 前端 ##

$.ajax({ 
    
       type:   //数据的提交方式：get和post
    
       url:    //请求地址
    
       async:   //是否支持异步刷新，默认是true
    
       data:    //需要提交的数据
    
       dataType:   //服务器返回数据的类型，例如xml,String,Json等
    
       success:function(data){ 
    
       }    //请求成功后的回调函数,参数data就是服务器返回的数据
    
       error:function(data){ 
    
       }   //请求失败后的回调函数，根据需要可以不写，一般只写上面的success回调函数
    
    })

### jQuery中的ajax封装案例 ###

//ajax请求后台数据
    var btn =  document.getElementsByTagName("input")[0];
    btn.onclick = function(){ 
    ajax({ //json格式
    	//请求类型
        type:"post",
        //请求接口/地址
        url:"post.php",
        //请求内容
        data:"username=poetries&pwd=123456",
        //是否异步的意思
        asyn:true,
        请求状态，接收并渲染页面
        success:function(data){ 
            document.write(data);
        }
    });
    }
    //封装ajax
    function ajax(aJson){ 
        var ajx = null;
        var type = aJson.type || "get";
        var asyn = aJson.asyn || true;
        var url = aJson.url;        // url 接收 传输位置
        var success = aJson.success;// success 接收 传输完成后的回调函数
        var data = aJson.data || '';// data 接收需要附带传输的数据
        if(window.XMLHttpRequest){ //兼容处理
        ajx = new XMLHttpRequest();//一般浏览器
    }else
    { 
        ajx = new ActiveXObject("Microsoft.XMLHTTP");//IE6+
    }
    if (type == "get" && data)
    { 
        url +="/?"+data+"&"+Math.random();
    }
    
    //初始化ajax请求
    ajx.open( type , url , asyn );
    //规定传输数据的格式
    ajx.setRequestHeader('content-type','application/x-www-form-urlencoded');
    //发送ajax请求（包括post数据的传输）
    type == "get" ?ajx.send():ajx.send(aJson.data);
    
    //处理请求
    ajx.onreadystatechange = function(aJson){ 
    
    if(ajx.readState == 4){ 
    
        if (ajx.status == 200 && ajx.status<300)//200是HTTP 请求成功的状态码
        { 
            //请求成功处理数据
            success && success(ajx.responseText);
        }else{ 
            alert("请求出错"+ajx.status);
    
        }
    }
    
    }

jQuery中的Ajax的一些方法  
jquery对Ajax操作进行了封装，在jquery中的 . a j a x ( ) 方 法 属 于 最 底 层 的 方 法 ， 第 2 层 是 l o a d ( ) 、 .ajax()方法属于最底层的方法，第2层是load()、 .ajax()方法属于最底层的方法，第2层是load()、.get()、 . p o s t ( ) ; 第 3 层 是 .post();第3层是 .post();第3层是.getScript()、$.getJSON()，第2层使用频率很高

最后说一句查文档吧  
内容完了，我是Yama 拜拜~~  
今天事多这个博客没怎么写好，欢迎下方提意见我改进