Ajax (programmering) - Ajax (programming)

"AJAX" omdirigerer her. For anden anvendelse, se Ajax (disambiguation) .

Asynkron JavaScript og XML
Første gang dukkede op Marts 1999
Filnavn udvidelser .js
Filformater JavaScript
Påvirket af
JavaScript og XML

Ajax (også AJAX / eɪ dʒ æ k s / ; forkortelse for " Asynchronous JavaScript og XML ") er et sæt af webudvikling teknikker, der bruger forskellige web-teknologier på klientsiden til at skabe asynkrone web-applikationer . Med Ajax kan webapplikationer sende og hente data fra en server asynkront (i baggrunden) uden at forstyrre visningen og adfærden på den eksisterende side. Ved at afkoble dataudvekslingslaget fra præsentationslaget tillader Ajax websider og i forlængelse heraf webapplikationer at ændre indhold dynamisk uden at skulle genindlæse hele siden. I praksis bruger moderne implementeringer normalt JSON i stedet for XML.

Ajax er ikke en teknologi, men snarere et programmeringskoncept. HTML og CSS kan bruges i kombination til at markere og style information. Websiden kan ændres af JavaScript til dynamisk visning - og give brugeren mulighed for at interagere med de nye oplysninger. Det indbyggede XMLHttpRequest- objekt bruges til at eksekvere Ajax på websider, så websteder kan indlæse indhold på skærmen uden at opdatere siden. Ajax er ikke en ny teknologi, og det er heller ikke et nyt sprog. I stedet er det eksisterende teknologier, der bruges på en ny måde.

Historie

I de tidlige-til-midt 1990'erne, de fleste web var steder baseret på komplette HTML-sider. Hver brugerhandling krævede, at en komplet ny side blev indlæst fra serveren. Denne proces var ineffektiv, hvilket afspejles i brugeroplevelsen: alt sideindhold forsvandt, så dukkede den nye side op. Hver gang browseren genindlader en side på grund af en delvis ændring, skulle alt indhold sendes igen, selvom kun nogle af oplysningerne var ændret. Dette lagde ekstra belastning på serveren og gjorde båndbredde til en begrænsende faktor for ydeevnen.

I 1996 blev iframe -taggen introduceret af Internet Explorer ; ligesom objektelementet kan det indlæse eller hente indhold asynkront. I 1998 udviklede Microsoft Outlook Web Access -teamet konceptet bag XMLHttpRequest -scriptobjektet. Det optrådte som XMLHTTP i den anden version af MSXML -biblioteket, som blev leveret med Internet Explorer 5.0 i marts 1999.

Funktionaliteten af ​​Windows XMLHTTP ActiveX -kontrollen i IE 5 blev senere implementeret af Mozilla Firefox , Safari , Opera , Google Chrome og andre browsere som XMLHttpRequest JavaScript -objekt. Microsoft vedtog den native XMLHttpRequest -model fra Internet Explorer 7 . ActiveX -versionen understøttes stadig i Internet Explorer, men ikke i Microsoft Edge . Nytten af ​​disse baggrunds -HTTP -anmodninger og asynkrone webteknologier forblev temmelig uklar, indtil den begyndte at blive vist i store online -applikationer såsom Outlook Web Access (2000) og Oddpost (2002).

Google foretog en bred implementering af standard-kompatible cross-browser Ajax med Gmail (2004) og Google Maps (2005). I oktober 2004 var Kayak.coms offentlige betaversion blandt de første store e-handelsanvendelser af det, deres udviklere på det tidspunkt kaldte "the xml http thing". Dette øgede interessen for Ajax blandt webprogramudviklere.

Udtrykket AJAX blev offentligt brugt den 18. februar 2005 af Jesse James Garrett i en artikel med titlen Ajax: A New Approach to Web Applications , baseret på teknikker brugt på Google -sider.

Den 5. april 2006 udgav World Wide Web Consortium (W3C) det første udkast til specifikation for XMLHttpRequest -objektet i et forsøg på at oprette en officiel webstandard . Det seneste udkast til XMLHttpRequest -objektet blev offentliggjort den 6. oktober 2016, og XMLHttpRequest -specifikationen er nu en levestandard .

Teknologier

Den konventionelle model for en webapplikation kontra en applikation ved hjælp af Ajax

Udtrykket Ajax er kommet til at repræsentere en bred gruppe af webteknologier, der kan bruges til at implementere et webprogram, der kommunikerer med en server i baggrunden, uden at forstyrre sidens aktuelle tilstand. I den artikel, der opfandt udtrykket Ajax, forklarede Jesse James Garrett, at følgende teknologier er inkorporeret:

Siden da har der imidlertid været en række udviklinger inden for de teknologier, der bruges i en Ajax -applikation, og i definitionen af ​​udtrykket Ajax selv. XML er ikke længere påkrævet til dataudveksling, og derfor er XSLT ikke længere påkrævet til manipulation af data. JavaScript Object Notation (JSON) bruges ofte som et alternativt format til dataudveksling, selvom andre formater såsom forformateret HTML eller ren tekst også kan bruges. En række populære JavaScript -biblioteker, herunder JQuery, inkluderer abstraktioner, der hjælper med at udføre Ajax -anmodninger.

Eksempler

JavaScript -eksempel

Et eksempel på en simpel Ajax -anmodning ved hjælp af GET -metoden, skrevet i JavaScript .

get-ajax-data.js: 

// This is the client-side script.

// Initialize the HTTP request.
var xhr = new XMLHttpRequest();
// define the request
xhr.open('GET', 'send-ajax-data.php');

// Track the state changes of the request.
xhr.onreadystatechange = function () {
	var DONE = 4; // readyState 4 means the request is done.
	var OK = 200; // status 200 is a successful return.
	if (xhr.readyState === DONE) {
		if (xhr.status === OK) {
			console.log(xhr.responseText); // 'This is the output.'
		} else {
			console.log('Error: ' + xhr.status); // An error occurred during the request.
		}
	}
};

// Send the request to send-ajax-data.php
xhr.send(null);

send-ajax-data.php: 

<?php
// This is the server-side script.

// Set the content type.
header('Content-Type: text/plain');

// Send the data back.
echo "This is the output.";
?>

Hent eksempel

Hent er en ny native JavaScript API. Ifølge Google Developers Documentation "gør Fetch det lettere at foretage webanmodninger og håndtere svar end med den ældre XMLHttpRequest." 

fetch('send-ajax-data.php')
    .then(data => console.log(data))
    .catch (error => console.log('Error:' + error));

ES7 asynk/afvente eksempel 

async function doAjax() {
    try {
        const res = await fetch('send-ajax-data.php');
        const data = await res.text();
        console.log(data);
    } catch (error) {
        console.log('Error:' + error);
    }
}

doAjax();

Fetch er afhængig af JavaScript -løfter .

De fetchspecifikationer afviger fra Ajaxi følgende væsentlige måder:

  • Løftet, der er returneret fra, fetch() vil ikke afvise HTTP -fejlstatus, selvom svaret er en HTTP 404 eller 500. I stedet, så løser løftet normalt (med svarets okegenskab sat til falsk , så snart serveren svarer med overskrifter) svaret er ikke i intervallet 200–299), og det vil kun blive afvist ved netværksfejl eller hvis noget forhindrede anmodningen i at fuldføre.
  • fetch() sender ikke cookies på tværs af oprindelse, medmindre du angiver initiering af legitimationsoplysningerne . (Siden april 2018. Specifikationen ændrede standardpolitikken for legitimationsoplysninger til same-origin. Firefox ændret siden 61.0b13.)

Se også

Referencer

eksterne links