Javascript AJAX-запрос без рамки

Question

Кто-нибудь знает, как сделать функцию запроса ajax, которая работает в кросс-браузерном режиме БЕЗ использования JavaScript-фреймворка, такого как jQuery и т. Д.?

Answer 1

Объект XMLHttpRequest на самом деле не так уж и сложен в использовании.Чтобы обеспечить широкую совместимость, вам нужно немного поиграть в создание объекта, но после этого это довольно просто для простых операций.

У Microsoft есть примеры на странице MSDN для XMLHttpRequest, включая функцию создания объекта кросс-браузерным способом, поддерживающую ранние версии IE.Вот их пример:

function getXMLHttpRequest() 
{
    if (window.XMLHttpRequest) {
        return new window.XMLHttpRequest;
    }
    else {
        try {
            return new ActiveXObject("MSXML2.XMLHTTP.3.0");
        }
        catch(ex) {
            return null;
        }
    }
}

function handler()
{
    if (oReq.readyState == 4 /* complete */) {
        if (oReq.status == 200) {
            alert(oReq.responseText);
        }
    }
}

var oReq = getXMLHttpRequest();

if (oReq != null) {
    oReq.open("GET", "http://localhost/test.xml", true);
    oReq.onreadystatechange = handler;
    oReq.send();
}
else {
    window.alert("AJAX (XMLHTTP) not supported.");
}

Я не говорю, что вышеприведенные примеры иллюстрируют лучшие практики (у Microsoft, похоже, их примеры MSDN в основном написаны очень, очень неопытными инженерами), но это дает вам отправную точку.Например, вышеприведенное требует, чтобы статус ответа был 200 для успеха, где, конечно, спецификация HTTP ясна, что любой диапазон 200 <= n <= 299 является «успехом». </p>

Answer 2

Я часто использую этот метод для отправки и получения только json в современных браузерах (без старых),

function aj(method, url, data, cb){

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = readystatechange;
    xhr.open(method, url);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(data && JSON.stringify(data));

    function readystatechange(){
        if(this.readyState === this.DONE) {

            switch(this.status){
                case 200:
                if(this.getResponseHeader('Content-Type').split(';')[0] !== 'application/json'){
                    return cb("unexpected Content-Type: '" + this.getResponseHeader('Content-Type') + "'", null);
                }
                return cb(null, JSON.parse(this.response));

                case 401:
                location.href = '/authentication/login';
                return;

                default:
                return cb("unexpected status: " + this.status + "", null);
            }
        }
    }//readystatechange
}