Vanilla JavaScript Ajax Kullanımı

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script type="text/javascript">

// jQuery Ajax GET Request

$.ajax({
    type: 'GET',
    url: 'https://jsonplaceholder.typicode.com/todos/1',
    contentType: 'application/json',
    success: function(responseData){ console.log('İstek gönderildi. Gelen yanıt: ', responseData); },
    error: function(errorMessage){ console.log('Hata oluştu: ', errorMessage); } // An error occurred during the request.
});

</script>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script type="text/javascript">

// jQuery Ajax POST Request

$.ajax({
    type: 'POST',
    url: 'https://jsonplaceholder.typicode.com/todos',
    data: JSON.stringify({ id: 1, userId: 1, title: 'lorem ipsum dolor sit amet', completed: true }),
    contentType: 'application/json',
    dataType: 'json',
    success: function(responseData){ console.log('İstek gönderildi. Gelen yanıt: ', responseData); },
    error: function(errorMessage){ console.log('Hata oluştu: ', errorMessage); } // An error occurred during the request.
});

</script>

<script type="text/javascript">

    // GET Request

    var xhttpRequest = new XMLHttpRequest();
    
    xhttpRequest.onreadystatechange = function () {

        var DONE = 4; // readyState 4 means the request is done.
        var OK = 200; // status 200 is a successful return.

        if (this.readyState === DONE) {
            if (this.status === OK) {

                console.log(this.responseText); // 'This is the output.'
                console.log('İstek gönderildi. Gelen yanıt: ', this.response);
                
            } else {
                console.log('Hata oluştu: ', this.status); // An error occurred during the request.
            }
        }
    };

    var requestType = 'GET';
    var url = 'https://jsonplaceholder.typicode.com/todos/1';
    var isAsync = true;
    
    xhttpRequest.open(requestType, url, isAsync);
    // xhttpRequest.open('GET', 'user.php?name=melih&surname=safran', true);
    
    xhttpRequest.send();

</script>

<script type="text/javascript">

    // POST Request

    var xhttpRequest = new XMLHttpRequest();

    xhttpRequest.onreadystatechange = function (){
        if (this.readyState == 4) {
            if(this.status == 201) {
                console.log('İstek gönderildi. Gelen yanıt: ', this.response);
            }
            else {
                console.log('Hata oluştu: ', this.status); // An error occurred during the request.
                console.log(this.response)
            }
        }
    };

    xhttpRequest.open('POST', 'https://jsonplaceholder.typicode.com/todos', true);
    xhttpRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

    xhttpRequest.send('userId=1&id=1&title=lorem+ipsum+dolor+sit+amet&completed=true');

</script>

<script type="text/javascript">

// GET Request Function
function getAjax(url, success, error) {
    var xHttpRequest = new XMLHttpRequest();
    xHttpRequest.open('GET', url);
    xHttpRequest.onreadystatechange = function()
    {
        if (this.readyState == 4) {
            if (this.status >= 200 && this.status < 400) {
                success(this.responseText);
            }
            else {
                error(this.status);
            }    
        }
    };
    xHttpRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xHttpRequest.send();
    return xHttpRequest;
}

// Ajax GET Function Call
getAjax('https://jsonplaceholder.typicode.com/todos',
    function(responseData){
        var json = JSON.parse(responseData);
        console.log(json);
    },
    function(errorStatus){
        console.log('Hata oluştu: ', errorStatus);
    }
);

</script>

<script type="text/javascript">

// POST Request Function    
function postAjax(url, data, success, error) {
    var params = typeof data == 'string' ? data : Object.keys(data).map(
            function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }
        ).join('&');

    var xHttpRequest = new XMLHttpRequest();
    xHttpRequest.open('POST', url);
    xHttpRequest.onreadystatechange = function() {
        if (this.readyState == 4) {
            if (this.status >= 200 && this.status < 400) {
                success(this.responseText);
            }
            else {
                error(this.status);
            }
        }
    };
    xHttpRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xHttpRequest.send(params);
    return xHttpRequest;
}

// Ajax POST Function Call
postAjax('https://jsonplaceholder.typicode.com/todos', 'id=1&userId=1&title=lorem+ipsum+dolor+sit+amet&completed=true',
    function(responseData){
        var json = JSON.parse(responseData);
        console.log(json);
        },
    function(errorStatus){
        console.log('Hata oluştu: ', errorStatus);
    }
);

// Ajax POST Function Call with JSON data
postAjax('https://jsonplaceholder.typicode.com/todos', { id: 2, userId: 2, title: 'lorem ipsum dolor sit amet', completed: false },
    function(responseData){
        var json = JSON.parse(responseData);
        console.log(json);
    },
    function(errorStatus){
        console.log('Hata oluştu: ', errorStatus);
    }
);

</script>

<script type="text/javascript">

    // fetch Function GET Request
    fetch('https://jsonplaceholder.typicode.com/todos')
        .then(response => response.json())
        .then(json => console.log(json))
        .catch(error => {
            // handle the error
            console.log('Hata oluştu: ', error);
        });
    
</script>

<script type="text/javascript">

    // fetch Function POST Request
    fetch('https://jsonplaceholder.typicode.com/todos', {
        method: 'POST',
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ id: 2, userId: 2, title: 'lorem ipsum dolor sit amet', completed: false })
        }
    )
    .then(response => response.json())
    .then(json => console.log(json));
    
</script>