jquery AJAX

by vijayram_a

HTML

<div id="json"></div>
<button id="json-load">Load JSON</button>
<div id="xml">
    <p>User ID: <span id="userid"></span>

    </p>
    <p>Session ID: <span id="sessionid"></span>

    </p>
</div>
<button id="xml-load">Load XML</button>
<div id="html"></div>
<button id="html-load">Load HTML</button>
<div id="jsonp">
    <div class="clear" id="user-login">
        <div id="user-avatar"><a href="" target="_parent"><img alt="" class="avatar" src=""/></a>

        </div>
        <div id="user-overview">
             <h1><a href="" target="_parent" title=""></a></h1>

        </div>
    </div>
    <div id="user-content">
        <div id="octocat">
            <div id="user-info">
                <p class="languages"></p>
                <ul class="clear" id="list-user-info">
                    <li>
                        <p><strong class="repos"></strong><span> repos</span>

                        </p>
                        <p><strong class="forks"></strong><span> forks</span>

                        </p>
                    </li>
                    <li class="last">
                        <p><strong class="followers"></strong><span> followers</span>

                        </p>
                        <p><strong class="watchers"></strong><span> watchers</span>

                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<button id="jsonp-load">Load JSONP</button>
<div id="form">
    <form>
        <input name="first" placeholder="First Name"/>
        <input name="last" placeholder="Last Name"/>
    </form>
</div>
<button id="form-serialize">Form serialize</button>
<button id="form-serialize-array">Form serializeArray</button>

CSS

#html, #json, #jsonp, #xml, #form {
    border: 1px dashed #ccc;
    margin: 10px 0;
}
#html img {
    width: 50px;
}
#user-login {
    background-color: #fff;
    padding: 4px 7px 2px 7px;
}
#user-avatar {
    float: left;
}
#user-avatar .avatar {
    border: 1px solid #ddd;
    padding: 1px;
    width: 24px;
}
#user-overview {
    margin-left: 36px;
}
#user-overview h1 a {
    font-size: 13px;
    text-decoration: none;
}
#user-overview h1 a:hover {
    text-decoration: underline;
}
#user-overview p {
    color: #666;
    font: italic normal 10px arial, sans-serif;
}
#user-overview p a {
    color: #333;
    text-decoration: none;
}
#user-content {
    background: #fafafa;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#fafafa', endColorstr='#efefef');
    background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#efefef));
    background: -moz-linear-gradient(top, #fafafa, #efefef);
    border-top: 1px solid #eee;
}
#octocat {
    background: url(data:image/png;
    base64,...

JavaScript

$(function () {

    var i = 0;
    var fib = (function () {
        var cache = [0, 1];
        return function (n) {
            if (cache[n] === undefined) {
                cache[n] = fib(n - 1) + fib(n - 2);
            }
            return cache[n];
        };
    })();

    $('#json-load').click(function () {

        $.ajax({
            url: '/echo/json/',
            dataType: 'json',
            type: 'POST',
            data: {
                json: JSON.stringify({
                    n: fib(++i)
                })
            }
        }).done(function (data) {

            $('#json').append(' ' + data.n);

        });

    });

    $('#xml-load').click(function () {

        $.ajax({
            url: '/echo/xml/',
            dataType: 'xml',
            type: 'POST',
            data: {
                xml: '<S:Envelope xmlns:S="http://schemas.xmlsoap.org/soap/envelope/">' +
                    '   <S:Body>' +
                    '      <ns2:loginResponse xmlns:ns2="http://webservice...">' +
                    '         <return>' +
                    '            <sessionid>40e5bcfc</sessionid>' +
                    '            <userid>0bc01f9a</userid>' +
                    '            <versioning>' +
                    '               <modulrev>1a</modulrev>' +
                    '            </versioning>' +
                    '         </return>' +
                    '      </ns2:loginResponse>' +
                    '   </S:Body>' +
                    '</S:Envelope>'
            }
        }).done(function (xml) {

            var $return = $(xml).find("return");

            $('#userid').text($return.find("sessionid").text());
            $('#sessionid').text($return.find("userid").text());

        });

    });

    $('#html-load').click(function () {

        $.ajax({
            url: '/echo/html/',
            dataType: 'html',
            type: 'POST',
            data: {
                html: '<img...