Performing AJAX requests on "jsfiddle.net"

In this snippet, we'll look at how we can place AJAX Requests on http://jsfiddle.net/ using jQuery.

Go to http://jsfiddle.net/ and select "jQuery 1.xx.x" in the Frameworks & Extensions section. To enable jQuery in your fiddle.

Create a jQuery Ready function so that our AJAX request is placed after the page is loaded.

$(document).ready(function() {

});

Create the actual request that will be placed. A done method is defined that will alert the response that the AJAX request has recieved.
The url for the AJAX request is one of:

• /echo/html/ to get a HTML response.
• /echo/json/ to get a JSON response.
• /echo/xml/ to get a XML response.

var ajaxObj = $.ajax({
    url: '/echo/html/',
    type: 'POST'
});

ajaxObj.done(function(data) {
    alert(data);
});

Now, according to the url that you have selected, you will have to pass data in your AJAX request. The data should be the response that you are expecting your AJAX request to provide.
If it is HTML it should be

data: {
    html: 'Yay!! Ajax request is working fine.'
}

If it is JSON it should be

data: {
    json: '{"response":"Yay!! Ajax request is working fine."}'
}

Similarly for XML

data: {
    xml: 'Yay!! Ajax request is working fine.'
}

The response should be handled accordingly for different types of requests.

The entire code should be as shown below.

$(document).ready(function() {
    
    var ajaxObj = $.ajax({
        url: '/echo/html/',
        type: 'POST',
        data: {
            html: 'Yay!! Ajax request is working fine.'
        }
    });
    
    ajaxObj.done(function(data) {
        alert(data);
    });
});

Find a working Example in the below link:
Link to Complete Example

Feel free to post doubts, comments or suggestions.