ajax使用

06 Jul 2013, by

使用ajax与服务器通信的的步骤

原生js的ajax事例

(function () {
    var retrieve = document.getElementById('retrieve'),
        results = document.getElementById('results'),
        toReadyStateDescription = function (state) {
            switch (state) {
            case 0:
                return 'UNSENT';
            case 1:
                return 'OPENED';
            case 2:
                return 'HEADERS_RECEIVED';
            case 3:
                return 'LOADING';
            case 4:
                return 'DONE';
            default:
                return '';
            }
        };
    retrieve.addEventListener('click', function (e) {
        var bustCache = '?' + new Date().getTime(),
            xhr = new XMLHttpRequest();
        xhr.onload = function (e) {
            var xhr = e.target;
            console.log('Inside the onload event');
            if (xhr.responseType === 'json') {
                results.innerHTML = xhr.response.message;
            } else {
                results.innerHTML = JSON.parse(xhr.responseText).message;
            }
        };
        xhr.onreadystatechange = function () {
            console.log('Inside the onreadystatechange event with readyState: ' + toReadyStateDescription(xhr.readyState));
        };
        xhr.open('GET', e.target.dataset.url + bustCache, true);
        xhr.responseType = 'json';
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.setRequestHeader('x-vanillaAjaxWithoutjQuery-version', '1.0');
        xhr.send();
    });
}());