ajax Handledning
Komma igång med ajax

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


Anmärkningar

AJAX (en synkron J avascript en nd X ML) kan du begära externa data utan att blockera exekveringen av koden. I många fall implementeras detta genom att begära delar av en sida eller information från en server (via XMLhttpRequests) och sedan bearbeta och visa den med javascript.

Den icke-blockerande karaktären av AJAX är det som gör det till ett så utbrett mjukvarumönster. Eftersom javascript blockeras i webbläsaren skulle ett synkront externt samtal göra webbläsaren svarsfri under samtalets längd tills den antingen returnerade data eller avbrutits. I själva verket gör din applikation helt beroende av extern arkitektur och hur bra den kommer att fungera.

AJAX-samtal abstraheras vanligtvis för att ge ytterligare funktionalitet eller läsbarhet, men implementeringarna är (vanligtvis) byggda på XMLHttpRequest- specifikationen .

Installation eller installation

Vad är AJAX?

AJAX står för asynkron JavaScript och XML. Sammanfattningsvis är det användningen av XMLHttpRequest-objektet för att kommunicera med skriptsidor på serversidan. Det kan skicka och ta emot information i olika format, inklusive JSON, XML, HTML och till och med textfiler. -Mozilla Developer Network 2016

Det enklaste sättet att implementera AJAX, särskilt om du planerar att kommunicera med servrar är att använda jQuery.

Vad är jQuery?

jQuery är ett snabbt, litet och funktionsrikt JavaScript-bibliotek. Det gör saker som HTML-dokumentversion och -manipulation, händelsehantering, animering och Ajax mycket enklare med ett lättanvänt API som fungerar över en mängd webbläsare. -jquery.com

För dig som inte har använt mycket jQuery, tänk på det som funktioner som vi kan använda för att göra våra liv enklare. Detta är perfekt för användning med AJAX eftersom det minskar mängden kod vi måste skriva för att åstadkomma samma sak!

Lägg till jQuery till din webbplats

Om du behöver använda Ajax måste du lägga till jQuery till ditt projekt. http://jquery.com/download/ I den här länken kan du se många sätt att lägga till jquery. Du kan använda nedladdad version av jQuery eller använda ett CDN. http://jquery.com/download/#jquery-39-s-cdn-provided-by-maxcdn . Men det finns viss säkerhetsrisk om du använder CDN. Becauese projektet uppmanar att använda jquery, så en hackare kan manipulera samtalet. Så bättre om du kunde använda den nedladdade versionen. Låter oss se hur man lägger till jquery till html-projektet. Det är lätt. Det första exemplet är att använda nedladdad källa. Använd den här länken för att ladda ner http://jquery.com/download/#jquery . Om du bara vill använda jquery föreslår jag att du laddar ner Ladda ner den komprimerade, produktion jQuery 3.1.1 När du laddar ner den lägger du till jquery-version.min.js till lämplig plats (som javascript-mappen för ditt projekt) Lägg bara till taggen med src = jquery / plats som nedan. 

<head>

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

</head>

Låter oss se hur man använder ett CDN. Den här länken http://jquery.com/download/#using-jquery-with-a-cdn kan du se olika CDN (Content Delivery Network). 

<head>

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

</head>

Som du kan se måste du bara lägga till de taggar som CDN-leverantören tillhandahåller till. Lägg nu till några skript på html-sidan för att kontrollera att det fungerar. 

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

Om du ser att jQuery fungerar varning betyder det att du har lagt till det korrekt.

Enkelt jQuery-exempel för kommunikation med server

Hämtad från jQuery.ajax API: s webbplats: 

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

Detta bitkod på grund av jQuery är lätt att läsa och förstå vad som händer.

  • $.ajax - den här biten kallar jQuerys ajax funktionalitet.

  • method: "POST" - den här raden förklarar här att vi kommer att använda en POST-metod för att kommunicera med servern. Läs mer om typer av förfrågningar!

  • url - den här variabeln anger var begäran ska skickas till. Du skickar en förfrågan till någonstans. Det är tanken.

  • data - ganska rakt fram. Det här är de data du skickar med din begäran.

  • success - den här funktionen du skriver för att bestämma vad du ska göra med de data du får tillbaka msg ! som exemplet antyder, är det för närvarande bara att skapa en varning med msg som kommer tillbaka.

  • error - den här funktionen här skriver du för att visa felmeddelanden, eller för att tillhandahålla åtgärder som fungerar när ajax begäran gick igenom fel.

  • ett alternativ till. .done är 

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

Sync - Async ajax begär

Asynkron ajax-samtal

Med den här typen av ajax-samtal väntar inte koden på att samtalet ska slutföras. 

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

Synkrona ajaxsamtal

Med den här typen av ajax-samtal väntar kod för att samtalet ska slutföras. 

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

Enkel Ajax-begäran skickas med XMLHttpRequest-objektet

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() skapar ett nytt XMLHttpRequest- objekt - det är vad vi skickar vår begäran med

Den onreadystatechange biten berättar för vår förfrågan att ringa getData() varje gång statusen ändras

.open() skapar vår begäran - detta tar en förfrågningsmetod (' GET ', ' POST ', etc.), en url på sidan du frågar, och valfritt, om begäran ska vara asynkrynaktig eller inte

.send() skickar vår begäran - detta accepterar valfritt data att skicka till servern som .send(data)

slutligen, getData() är den funktion som vi har sagt bör kallas varje gång statusen för vår begäran ändras . Om ReadyState är lika med DONE så varnar det responseText som bara är data som tas emot från servern.

Mer info kan hittas i installationshandboken på MDN.

Använda ajax i vanilj-javascript med en enkel återuppringning

Här är vår funktion att skapa ett enkelt ajax-samtal skrivet i vaniljavascript (inte 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('');
}

och det kan användas som: 

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

Om du vill använda Ecmascript 6 (även känd som es2015) kan du använda hämtningsmetoden , vilket ger ett löfte: 

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

För ytterligare läsning om es2015 Löften följ länken bälgen: Löften

Utföra ett asynkront AJAX-samtal med hjälp av TypeScript

Lägga till en produkt i en kundvagn

Följande exempel visar hur man lägger till en produkt (eller någonting) till en databastabell asynkront med AJAX och 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;
}

För att göra detta exempel komplett, uppdatera din server-sidkod för att faktiskt infoga dessa data i databasen. Koden ovan antar att du använder C # och har en Cart.cshtml fil. cshtml emellertid helt enkelt ut cshtml med php och skriv din egen server-logik med det språk du väljer.



Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow