Ajax native and jQuery usage

Native ajax method:

$('#send').click(function(){
    //The 5 stages of the request, corresponding to the value of readyState
        //0: Not initialized, send method not called;
        //1: The request is being sent, the send method has been called;
        //2: The request is sent, and the send method is executed;
        //3: parsing the response content;
        //4: The response content is parsed;

    var data = 'name=yang';
    var xhr = new XMLHttpRequest(); //Create an ajax object
    xhr.onreadystatechange = function(event){ //Monitor the ajax object
        if(xhr.readyState == 4){ //4 means parsing is complete
            if(xhr.status == 200){ //200 is normal return
                console.log(xhr)
            }
        }
    };
    xhr.open('POST','url',true); //Establish a connection, parameter 1: sending method, 2: request address, 3: asynchronous, true is asynchronous
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //Optional
    xhr.send(data); //Send
});

 

jQuery's ajax method:

$.ajax({
    url:'/comm/test1.php',
    type:'POST', //GET
    async:true, //or false, is it asynchronous
    data:{
        name:'yang',age:25
    },
    timeout:5000, //timeout time
    dataType:'json', //returned data format: json/xml/html/script/jsonp/text
    beforeSend:function(xhr){
        console.log(xhr)
        console.log('before sending')
    },
    success:function(data,textStatus,jqXHR){
        console.log(data)
        console.log(textStatus)
        console.log(jqXHR)
    },
    error:function(xhr,textStatus){
        console.log('error')
        console.log(xhr)
        console.log(textStatus)
    },
    complete:function(){
        console.log('end')
    }
})