ajaxRozpoczęcie pracy z ajax


Uwagi

AJAX (synchroniczny J avascript nd X ML) pozwala zażądać danych zewnętrznych bez blokowania wykonanie kodu. W wielu przypadkach jest to zaimplementowane w żądaniu fragmentów strony lub informacji z serwera (poprzez XMLhttpRequests), a następnie przetwarzaniu i wyświetlaniu za pomocą javascript.

Nieblokujący charakter AJAX sprawia, że jest on tak rozpowszechnionym wzorcem oprogramowania. Ponieważ javascript blokuje się w przeglądarce, synchroniczne wywołanie zewnętrzne spowodowałoby brak reakcji przeglądarki na czas trwania połączenia, dopóki nie zwróci danych lub nie przekroczy limitu czasu. W efekcie twoja aplikacja jest całkowicie zależna od architektury zewnętrznej i jej wydajności.

Wywołania AJAX są zwykle wyodrębniane w celu zapewnienia dodatkowej funkcjonalności lub czytelności, ale implementacje są (zwykle) oparte na specyfikacji XMLHttpRequest .

Instalacja lub konfiguracja

Co to jest AJAX?


AJAX oznacza asynchroniczne JavaScript i XML. Krótko mówiąc, jest to użycie obiektu XMLHttpRequest do komunikacji ze skryptami po stronie serwera. Może wysyłać i odbierać informacje w różnych formatach, w tym JSON, XML, HTML, a nawet pliki tekstowe. -Mozilla Developer Network 2016

Najprostszym sposobem implementacji AJAX, szczególnie jeśli planujesz komunikację z serwerami, jest użycie jQuery.

Co to jest jQuery?


jQuery to szybka, mała i bogata w funkcje biblioteka JavaScript. Ułatwia to przechodzenie i manipulowanie dokumentami HTML, obsługę zdarzeń, animację i Ajax dzięki łatwemu w użyciu interfejsowi API, który działa w wielu przeglądarkach. -jquery.com

Dla tych, którzy nie używali dużo jQuery, pomyśl o tym jako o funkcjach, które możemy wykorzystać, aby ułatwić nam życie. Jest to idealne rozwiązanie do korzystania z AJAX, ponieważ zmniejsza ilość kodu, który musimy napisać, aby osiągnąć to samo!

Jak dodać jQuery do swojej strony internetowej

Jeśli potrzebujesz użyć Ajax, musisz dodać jQuery do swojego projektu. http://jquery.com/download/ W tym łączu można zobaczyć wiele sposobów dodawania jquery. Możesz użyć pobranej wersji jQuery lub CDN. http://jquery.com/download/#jquery-39-s-cdn-provided-by-maxcdn . Ale jeśli używasz CDN, istnieje pewne ryzyko bezpieczeństwa. Został wezwany do wykorzystania jquery, aby haker mógł manipulować wywołaniem. Więc lepiej, jeśli możesz użyć pobranej wersji. Zobaczmy, jak dodać jquery do projektu HTML. To jest łatwe. Pierwszym przykładem jest użycie pobranego źródła. Użyj tego linku, aby http://jquery.com/download/#jquery download. Jeśli chcesz po prostu użyć jquery, proponuję pobrać Pobierz skompresowaną, produkcyjną wersję jQuery 3.1.1 Po pobraniu dodaj plik jquery-version.min.js w odpowiednie miejsce (np. Folder javascript twojego projektu) Następnie dodaj tag z src = jquery / location jak poniżej.

<head>

<script src="path/from/html/page/to/jquery.min.js"></script>

</head>
 

Zobaczmy, jak korzystać z CDN. Ten link http://jquery.com/download/#using-jquery-with-a-cdn można zobaczyć różne CDN (Content Delivery Network).

<head>

<script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>

</head>
 

Jak widać, wystarczy dodać tagi, które dostawca CDN dostarcza do. Teraz dodaj kilka skryptów do strony HTML, aby sprawdzić, czy działa.

<script>
$(document).ready(function(){
    alert("jQuery Works")
});
</script>
 

Jeśli zobaczysz alert jQuery działa , oznacza to, że dodałeś go poprawnie.

Wykonywanie asynchronicznego wywołania AJAX za pomocą TypeScript

Dodawanie produktu do koszyka

Poniższy przykład pokazuje, jak asynchronicznie dodać produkt (lub cokolwiek) do tabeli bazy danych, używając AJAX i TypeScript.

declare var document;
declare var xhr: XMLHttpRequest;

window.onLoad = () =>
{
    Start();
};

function Start()
{
    // Setup XMLHttpRequest (xhr).
    if(XMLHttpRequest)
    {
        xhr = new XMLHttpRequest();
    }
    else
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    AttachEventListener(document.body, "click", HandleCheckBoxStateChange);
}

function AttachEventListener(element: any, e, f)
{
    // W3C Event Model.
    if(element.addEventListener)
    {
        element.addEventListener(e, f, false);
    }
    else if(element.attachEvent)
    {
        element.attachEvent("on" + e, (function(element, f)
        {
            return function()
            {
                f.call(element, window.event);
            };
        })
        (element, f));
    }

    element = null;
}

function HandleCheckBoxStateChange(e)
{
    var element = e.target || e.srcElement;

    if(element && element.type == "checkbox")
    {
        if(element.checked)
        {
            AddProductToCart(element);
        }
        else
        {
            // It is un-checked.
            // Remove item from cart.
        }
    }
    else
    {
        break;
    }
}

AddProductToCart(e)
{
    var element = <HTMLInputElement>document.getElementById(e.id);

    // Add the product to the Cart (Database table)
    xhr.onreadystatechange = function()
    {
        if(xhr.readyState == 4)
        {
            if(xhr.status == 200)
            {
                if(element != null)
                {
                    console.log("200: OK");
                }
                else
                {
                    console.log(":-(");
                }
            }
            else
            {
                // The server responded with a different response code; handle accordingly.
                // Probably not the most informative output.
                console.log(":-(");
            }
        }
    }

    var parameters = "ProductID=" + encodeURIComponent(e.id) + "&" + "Action=Add&Quantity=" + element.value;

    xhr.open("POST", "../Cart.cshtml");
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Content-length", parameters.length.toString());
    xhr.setRequestHeader("Connection", "close");

    xhr.send(parameters);

    return e.id;
}
 

Aby ten przykład był kompletny, zaktualizuj kod po stronie serwera, aby faktycznie wstawić te dane do bazy danych. Powyższy kod zakłada, że używasz C # i masz plik Cart.cshtml . Jednak po prostu zamień cshtml php i napisz własną logikę po stronie serwera, używając wybranego języka.

Proste żądanie Ajax wysłane za pomocą obiektu XMLHttpRequest

var httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = getData;

httpRequest.open('GET', 'https://url/to/some.file', true);
httpRequest.send();

function getData(){
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
        alert(httpRequest.responseText);
    }
}
 

new XMLHttpRequest() tworzy nowy obiekt XMLHttpRequest - właśnie do tego wyślemy nasze zapytanie

Bit onreadystatechange informuje naszą prośbę o wywołanie getData() za każdym razem, gdy zmienia się status

.open() tworzy nasze żądanie - wymaga to metody żądania („ GET ”, „ POST ” itp.), adresu URL strony, której dotyczy zapytanie, i opcjonalnie, czy żądanie powinno być asynchroniczne

.send() wysyła nasze żądanie - opcjonalnie akceptuje dane do wysłania na serwer, takie jak .send(data)

wreszcie getData() to funkcja, o której mówiliśmy, że powinna być wywoływana za każdym razem, gdy zmienia się status naszego żądania. jeśli parametr readyState jest równy GOTOWY, wówczas ostrzega tekst responseText który jest tylko danymi otrzymanymi z serwera.

Więcej informacji można znaleźć w przewodniku wprowadzającym na MDN.

Prosty przykład jQuery do komunikacji z serwerem

Wykonano ze jQuery.ajax internetowej API jQuery.ajax :

$.ajax({
    method: "POST",
    url: "some.php",
    data: {
        name: "John",
        location: "Boston"
    },
    success: function(msg) {
        alert("Data Saved: " + msg);
    },
    error: function(e) {
        alert("Error: " + e);
    }
});
 

Ten fragment kodu, dzięki jQuery, jest łatwy do odczytania i zrozumienia, co się dzieje.

  • $.ajax - ten bit wywołuje funkcjonalność ajax jQuery.

  • method: "POST" - ta linia tutaj deklaruje, że będziemy używać metody POST do komunikacji z serwerem. Przeczytaj o rodzajach wniosków!

  • url - ta zmienna deklaruje, gdzie żądanie ma zostać WYSŁANE . Podczas wysyłania żądania gdzieś. To jest pomysł.

  • data - całkiem prosto. To dane, które wysyłasz wraz z prośbą.

  • success - ta funkcja pisze się tutaj, aby zdecydować, co zrobić z danymi, które otrzymasz. msg ! jako przykład wskazuje, że aktualnie tylko tworzenie alert z msg , która zostanie zwrócony.

  • error - ta funkcja pisze się tutaj, aby wyświetlać komunikaty o błędach lub zapewniać działania, które działają, gdy żądanie ajax przeszło przez błędy.

  • alternatywą dla .done jest

    success: function(result) {
        // do something
    });
     

Synchronizacja - asynchroniczne żądania ajax

Asynchroniczne wywołanie ajax

W przypadku tego typu wywołania ajax kod nie czeka na zakończenie połączenia.

$('form.ajaxSubmit').on('submit',function(){
    // initilization...
    var form   = $(this);
    var formUrl    = form.attr('action');
    var formType   = form.attr('method');
    var formData   = form.serialize();
    
    $.ajax({
        url: formUrl,
        type: formType,
        data: formData,
        async: true,
        success: function(data) {
            // .....
        }
    });
    //// code flows through without waiting for the call to complete
    return false;
});
 

Synchroniczne wywołanie ajax

W przypadku tego typu wywołania ajax kod czeka na zakończenie połączenia.

$('form.ajaxSubmit').on('submit',function(){
    // initilization...
    var form   = $(this);
    var formUrl    = form.attr('action');
    var formType   = form.attr('method');
    var formData   = form.serialize();
    var data = $.ajax({
            url: formUrl,
            type: formType,
            data: formData,
            async: false
        }).responseText;
    //// waits for call to complete
    return false;
});
 

Używanie ajax w javascript waniliowym z prostym wywołaniem zwrotnym

Oto nasza funkcja do utworzenia prostego wywołania ajax napisanego w waniliowym javascript (nie es2015):

function ajax(url, callback) {
    var xhr;
     
    if(typeof XMLHttpRequest !== 'undefined') xhr = new XMLHttpRequest();
    else {
        var versions = ["MSXML2.XmlHttp.5.0", 
                        "MSXML2.XmlHttp.4.0",
                        "MSXML2.XmlHttp.3.0", 
                        "MSXML2.XmlHttp.2.0",
                        "Microsoft.XmlHttp"]

         for(var i = 0, len = versions.length; i < len; i++) {
            try {
                xhr = new ActiveXObject(versions[i]);
                break;
            }
            catch(e){}
         } // end for
    }
     
    xhr.onreadystatechange = ensureReadiness;
     
    function ensureReadiness() {
        if(xhr.readyState < 4) {
            return;
        }
         
        if(xhr.status !== 200) {
            return;
        }

        // all is well  
        if(xhr.readyState === 4) {
            callback(xhr);
        }           
    }
     
    xhr.open('GET', url, true);
    xhr.send('');
}
 

i może być używany jako:

ajax('myFile.html', function(response) {
    document.getElementById('container').innerHTML = response.responseText;
});
 

Jeśli chcesz użyć Ecmascript 6 (znanego również jako es2015), możesz użyć metody pobierania , która zwraca obietnicę:

fetch('myFile.json').then(function(res){
    return res.json();
 });
 

Aby przeczytać o obietnicach es2015, kliknij link poniżej: Obietnice