ajax Zelfstudie
Aan de slag met Ajax

ASP.NET asp.net-mvc C# Language HTML JavaScript jQuery MySQL Node.js PHP Ruby on Rails
Zoeken…


Opmerkingen

AJAX (een synchrone J avascript e n X ML) laat een externe gegevens opvragen zonder blokkering het uitvoeren van code. In veel gevallen wordt dit geïmplementeerd bij het opvragen van delen van een pagina of informatie van een server (via XMLhttpRequests) en deze vervolgens verwerken en weergeven met behulp van javascript.

Het niet-blokkerende karakter van AJAX maakt het zo'n wijdverspreid softwarepatroon. Aangezien JavaScript in de browser wordt geblokkeerd, zou een synchrone externe oproep ervoor zorgen dat de browser niet reageert gedurende de duur van de oproep totdat deze gegevens retourneert of een time-out heeft. In feite maakt u uw applicatie volledig afhankelijk van externe architectuur en hoe goed deze zal presteren.

AJAX-aanroepen worden meestal geabstraheerd om extra functionaliteit of leesbaarheid te bieden, maar implementaties zijn (meestal) gebaseerd op de XMLHttpRequest- specificatie .

Installatie of instellingen

Wat is AJAX?

AJAX staat voor Asynchronous JavaScript en XML. Kortom, het is het gebruik van het object XMLHttpRequest om te communiceren met server-side scripts. Het kan informatie verzenden en ontvangen in verschillende indelingen, waaronder JSON, XML, HTML en zelfs tekstbestanden. -Mozilla Developer Network 2016

De eenvoudigste manier om AJAX te implementeren, vooral als u van plan bent om met servers te communiceren, is door jQuery te gebruiken.

Wat is jQuery?

jQuery is een snelle, kleine en veelzijdige JavaScript-bibliotheek. Het maakt dingen als HTML-documentdoorvoer en -manipulatie, gebeurtenisafhandeling, animatie en Ajax veel eenvoudiger met een eenvoudig te gebruiken API die in meerdere browsers werkt. -jquery.com

Voor degenen die niet veel jQuery hebben gebruikt, zie het als functies die we kunnen gebruiken om ons leven gemakkelijker te maken. Dit is perfect voor gebruik met AJAX omdat het de hoeveelheid code vermindert die we moeten schrijven om hetzelfde te bereiken!

Hoe jQuery aan uw website toe te voegen

Als u Ajax moet gebruiken, moet u jQuery aan uw project toevoegen. http://jquery.com/download/ In deze link ziet u vele manieren om jquery toe te voegen. U kunt de gedownloade versie van jQuery gebruiken of u kunt een CDN gebruiken. http://jquery.com/download/#jquery-39-s-cdn-provided-by-maxcdn . Maar er is een beveiligingsrisico als u CDN gebruikt. Omdat het project callde om jquery te gebruiken, zodat een hacker het gesprek kon manipuleren. Dus beter als je de gedownloade versie zou kunnen gebruiken. Laten we eens kijken hoe jquery toe te voegen aan html-project. Het is makkelijk. Het eerste voorbeeld is om de gedownloade bron te gebruiken. Gebruik deze link om http://jquery.com/download/#jquery te downloaden. Als je alleen jquery wilt gebruiken, raad ik je aan om de gecomprimeerde, productie jQuery 3.1.1 te downloaden. Voeg jquery-version.min.js toe aan de juiste plaats (zoals de javascript-map van je project). met src = jquery / locatie zoals hieronder. 

<head>

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

</head>

Laten we eens kijken hoe een CDN te gebruiken. Via deze link http://jquery.com/download/#using-jquery-with-a-cdn ziet u verschillende CDN (Content Delivery Network). 

<head>

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

</head>

Zoals u kunt zien, hoeft u alleen maar de tags toe te voegen die de CDN-provider levert aan de. Voeg nu enkele scripts toe aan de html-pagina om te controleren of deze werkt. 

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

Als u ziet dat jQuery werkt , betekent dit dat u het correct hebt toegevoegd.

Eenvoudig jQuery-voorbeeld om te communiceren met de server

Genomen van jQuery.ajax API -website: 

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

Dit stuk code, dankzij jQuery, is gemakkelijk te lezen en te begrijpen wat er aan de hand is.

  • $.ajax - dit bit roept de ajax functionaliteit van jQuery op.

  • method: "POST" - deze regel hier verklaart dat we een POST-methode gaan gebruiken om met de server te communiceren. Lees meer over soorten verzoeken!

  • url - deze variabele geeft aan waar het verzoek naartoe wordt VERZONDEN . U stuurt ergens een verzoek NAAR . Dat is het idee.

  • data - vrij eenvoudig. Dit zijn de gegevens die u met uw verzoek verzendt.

  • success - deze functie hier schrijf je om te beslissen wat te doen met de gegevens die je terug krijgt msg ! zoals het voorbeeld suggereert, wordt er momenteel alleen een melding gemaakt met het msg dat wordt geretourneerd.

  • error - deze functie hier schrijf je om foutmeldingen weer te geven of om acties te laten werken wanneer het ajax verzoek fouten doormaakte.

  • een alternatief voor .done is 

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

Synchronisatie - Async Ajax-aanvragen

Asynchrone Ajax-oproep

Met dit type ajax-oproep wacht de code niet totdat de oproep is voltooid. 

$('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;
});

Synchrone Ajax-oproep

Bij dit type Ajax-oproep wacht de code totdat het gesprek is voltooid. 

$('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;
});

Eenvoudig Ajax-verzoek verzonden met het object 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() maakt een nieuw object XMLHttpRequest - dit is wat we ons verzoek zullen sturen met

Het onreadystatechange bit vertelt ons verzoek om getData() elke keer aan te roepen als de status verandert

.open() creëert ons verzoek - dit duurt een verzoek methode ( 'GET', 'POST', enz.), een URL van de pagina die u opvragen en eventueel, al dan niet het verzoek moet asynchrynous zijn

.send() verzendt ons verzoek - deze accepteert optioneel gegevens voor verzending naar de server zoals .send(data)

ten slotte is getData() de functie waarvan we hebben gezegd dat deze moet worden aangeroepen telkens wanneer de status van ons verzoek verandert . als de readyState gelijk is aan DONE , wordt de responseText gewaarschuwd, dit zijn alleen de gegevens die van de server zijn ontvangen.

Meer informatie is te vinden in de beknopte handleiding op MDN.

Ajax gebruiken in vanille JavaScript met een eenvoudige callback

Hier is onze functie om een eenvoudige ajax-oproep te maken die is geschreven in vanille javascript (niet 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('');
}

en het kan worden gebruikt als: 

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

Als u wilt ECMAScript 6 gebruiken (ook bekend als es2015) kunt u de fetch methode, die een belofte retourneert: 

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

Voor meer informatie over es2015 Beloften volg de link hieronder: Beloften

Een asynchrone AJAX-oproep uitvoeren met TypeScript

Een product toevoegen aan een winkelwagentje

Het volgende voorbeeld laat zien hoe u een product (of iets anders) asynchroon kunt toevoegen aan een databasetabel met behulp van AJAX en 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;
}

Om dit voorbeeld compleet te maken, werkt u uw server-side code bij om deze gegevens daadwerkelijk in de database in te voegen. In de bovenstaande code wordt ervan uitgegaan dat u C # gebruikt en een Cart.cshtml bestand hebt. Vervang cshtml echter eenvoudig door php en schrijf uw eigen logica aan de serverzijde in de taal van uw keuze.



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow