XDomainRequest Transport

XDomainRequest, with jQuery transport.

by HYEONGJINKIM

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.2/jquery.xdomainrequest.min.js"></script>
<ul>
    <li><a class="cors" href="http://moonscript.jsapp.us/" data-type="xml" data-method="GET">GET XML</a> from http://moonscript.jsapp.us/ (returns static XML)</li>
    <li><a class="cors" href="http://moonscript.jsapp.us/" data-type="xml" data-method="POST">POST text/plain</a> to http://moonscript.jsapp.us/ (returns static XML)</li>
    <li><a class="cors" href="http://jsonmoon.jsapp.us/" data-type="json" data-method="GET">GET JSON</a> from http://jsonmoon.jsapp.us/ (returns JSON, including query string data)</li>
    <li><a class="cors" href="http://frozen-woodland-5503.herokuapp.com/cors.json" data-type="json" data-method="POST">POST text/plain</a> to http://frozen-woodland-5503.herokuapp.com/cors.json (returns JSON, including request body data)</li>
</ul>
<div id="output"></div>

JavaScript

var $output = $('#output');

$(document).delegate('a.cors', 'click', function(e) {
    e.preventDefault();
    var $link = $(this);
    var requestMethod = $link.data('method');
    var responseType = $link.data('type');
    $output.text('Loading...');
    $.ajax({
        url: $link.attr('href'),
        data: 'data sent to the server on ' + (new Date()).toString(),
        contentType: 'text/plain',
        type: requestMethod,
        dataType: responseType,
        success: function(data) {
            var unorderedList;
            if (responseType === 'xml') {
                var FN = $('name > first', data).text();
                var LN = $('name > last', data).text();
                unorderedList = '<ul><li>&lt;first&gt; ' + FN + '</li><li>&lt;last&gt; ' + LN + '</li></ul>';
            } else {
                unorderedList = '<ul><li>echo: ' + data.echo + '</li><li>name:<ul><li>first: ' + data.name.first + '</li><li>last: ' + data.name.last + '</li></ul></li></ul>';
            }
            $output.html(responseType.toUpperCase() + ' received via ' + requestMethod + ':<br/>' + unorderedList);
        },
        error: function(jqXHR, textStatus) {
            alert(textStatus);
        }
    });
});