Jquery ajax post eksempel på dataparametre. Indstilling af anmodnings-URL

jQuery.ajax() - laver en anmodning til serveren uden at genindlæse siden. Dette er en metode på lavt niveau, der har et stort antal indstillinger. Det ligger til grund for driften af alle ajax, som ofte er nemmere at forstå og bruge, men stadig giver begrænset funktionalitet i forhold til denne metode.

$.ajax() returnerer et XMLHttpRequest-objekt. I de fleste tilfælde behøver du ikke at arbejde med dette objekt direkte, men det er stadig tilgængeligt, hvis du skal afbryde anmodningen manuelt.

$.ajax()-funktionen sendes til et objekt bestående af nøgle/værdi-par, der bruges til at initialisere og administrere anmodningen.

En Ajax-anmodning har to anvendelser:

jQuery.ajax(url [, indstillinger ])

Den eneste forskel fra den tidligere version af metoden er, at url-egenskaben her er en del af indstillingerne, og ikke en separat parameter.

Liste over indstillinger

accepterer (standard: afhænger af DataType)
Type: objekt.
Når der foretages en anmodning, angiver overskrifterne de tilladte indholdstyper, der forventes fra serveren. Værdierne af disse typer vil blive taget fra accepter parameteren. For eksempel angiver følgende eksempel gyldige brugerdefinerede typer:

$.ajax(( accepterer: ( mycustomtype: "application/x-some-custom-type" ), konvertere: ( "text mycustomtype": function(result) ( return newresult; ) ), dataType: "mycustomtype" ));

$. ajax ((

accepterer: (

mycustomtype : "applikation/x-some-custom-type"

konvertere: (

"tekst mycustomtype" : funktion (resultat) (

returnere nyt resultat;

dataType: "mycustomtype"

} ) ;

asynkron (standard: sand)
Type: boolesk.
Som standard sendes alle anmodninger asynkront (det vil sige, efter at have sendt en anmodning til serveren, holder siden ikke op med at fungere, mens den venter på et svar). Hvis du har brug for at sende anmodninger synkront, skal du indstille denne indstilling til falsk. Forespørgsler på tværs af domæner og "jsonp" kan ikke udføres i synkron tilstand. Bemærk venligst, at synkrone anmodninger kan blokere browseren, mens anmodningen kører.

førSend(jqXHR, indstillinger)
Type: funktion.
Indeholder en funktion, der vil blive kaldt umiddelbart før afsendelse af en ajax-anmodning til serveren. Denne funktion kan være nyttig til at ændre jqXHR-objektet (i tidligere versioner af biblioteket (op til 1.5) bruges XMLHttpRequest i stedet for jqXHR). Du kan fx ændre/specificere de nødvendige overskrifter mv. jqXHR-objektet vil blive sendt til funktionen som det første argument. Det andet argument er anmodningsindstillingerne.
beforeSend henviser til ajax-begivenheder. Derfor, hvis funktionen angivet i den returnerer falsk, vil ajax-anmodningen blive annulleret. Startende med jQuery-1.5, før Send kaldes uanset anmodningstypen.

cache (standard: sand, falsk for dataType "script" og "jsonp")
Type: boolesk.
hvis du ønsker, at browseren ikke skal cache den anmodning, der foretages, skal du indstille denne parameter til false. Bemærk venligst, at hvis parameteren er indstillet til falsk, vil strengen "_=" blive tilføjet til URL'en.

komplet(jqXHR, tekstStatus)
Type: funktion.
En funktion, der udføres hver gang en AJAX-anmodning fuldføres (efter succes og fejl er fuldført). To parametre overføres til funktionen: jqXHR (i tidligere versioner af biblioteket (op til 1.5), bruges XMLHttpRequest i stedet for jqXHR) og anmodningsudførelsesstatus (strengværdi: "success", "notmodified", "error", "timeout", "abort" eller "parsererror").
Fra og med jQuery-1.5 kan du videregive en række funktioner til den komplette parameter i stedet for kun én funktion. Alle funktioner vil blive kaldt i den rækkefølge, som de er angivet i dette array.

indhold
Type: objekt.
Parameteren dukkede op i jQuery-1.5. Den er angivet af et objekt i formatet (streng:regulært udtryk) og bestemmer, hvordan jQuery vil analysere svaret fra serveren, afhængigt af dets type.

contentType
Type: boolesk eller streng.
Når du sender en anmodning til serveren, overføres data i det format, der er angivet i contentType. Standarden er 'application/x-www-form-urlencoded; charset=UTF-8', hvilket er velegnet i de fleste tilfælde. Hvis du udtrykkeligt angiver denne parameter, vil den blive sendt til serveren (selvom der ikke blev sendt data dertil).
Med jQuery-1.6 kan du sende falsk for ikke at angive titlen.

sammenhæng
Type: objekt.
Objektet, der bliver konteksten, efter at anmodningen er fuldført (værdien, der overføres til denne variabel). For eksempel, hvis du angiver et DOM-element som en kontekst, vil alle ajax-anmodningshandlere også blive udført i konteksten af dette DOM-element. I i dette eksempel søgeord dette vil indeholde document.body:

$.ajax(( url: "test.html", kontekst: document.body )).done(function() ( $(this).addClass("done"); ));

$. ajax ((

url: "test.html" ,

kontekst: dokument. legeme

) ). udført(funktion()(

$(dette). addClass("færdig");

} ) ;

konvertere (standard: ("*text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML))
Type: objekt.
Parameteren dukkede op i jQuery-1.5 Bestemmer, hvilke funktioner der skal bruges til at konvertere værdier fra en type til en anden.

crossDomain (standard: falsk for samme domæne, sand for anmodninger på tværs af domæner)
Type: boolesk.
Denne mulighed blev introduceret i jQuery-1.5 Hvis du vil udføre en anmodning på tværs af domæner (for eksempel JSONP) på det samme domæne, skal du indstille crossDomain-indstillingen til sand. Dette tillader for eksempel serveromdirigering til et andet domæne.

data
Type: objekt, streng eller array.
Data, der vil blive overført til serveren. Hvis dataene ikke er en streng, konverteres de til en forespørgselsstreng. Til forespørgsler som FÅ data er vedhæftet URL'en. Et objekt skal bestå af nøgle/værdi-par. Hvis værdien er et array, bestiller jQuery værdierne afhængigt af den traditionelle indstilling. Som standard bliver f.eks. (foo:["bar1", "bar2") til &foo=bar1&foo=bar2 .

dataFilter(data, type)
Type: funktion.
En funktion, der vil forbehandle data sendt af serveren, dvs. det skal fungere som et filter og returnere den rensede streng. To parametre overføres til denne funktion: de nævnte data og parameterværdien datatype. Funktionen angivet i dataFilter skal returnere behandlede data.

dataType (standard: opdaget automatisk (xml, json, script eller html))
Type: streng.
Den datatype, hvor svaret forventes fra serveren. Hvis det ikke er indstillet, vil jQuery forsøge at bestemme det automatisk ved hjælp af den MIME, der er modtaget fra serveren.

fejl
Type: funktion
En funktion, der vil blive kaldt, hvis en anmodning til serveren mislykkes. Den er forsynet med tre parametre: jqXHR (indtil 1.5 XMLHttpRequest bruges), en streng, der beskriver fejlen, der opstod, samt et undtagelsesobjekt, hvis dette skete. Mulige værdier for det andet argument er "timeout", "error", "notmodified" og "parsererror" (i uventede tilfælde kan null returneres). Fra og med jQuery-1.5 kan denne parameter acceptere enten en enkelt funktion eller en række funktioner.
Fejlhændelsen opstår ikke, når dataType er lig med script eller JSONP.

global (standard: sand)
Type: boolesk.
Ansvarlig for driften af globale ajax request events (for eksempel ajaxStart eller ajaxStop). Hvis du indstiller denne parameter til false , vil globale hændelser for denne anmodning ikke blive rejst.

overskrifter
Type: objekt.
Parameteren dukkede op i jQuery-1.5. Her kan du angive yderligere anmodningsoverskrifter. Værdierne for denne indstilling vil blive indtastet før funktionen beforeSend kaldes, hvor der kan foretages endelige ændringer af overskrifterne.

ifModified
Type: boolesk.
Når denne indstilling er sat til sand , vil anmodningen kun blive udført med status "successful", hvis svaret fra serveren afviger fra det tidligere svar. jQuery tjekker denne kendsgerning ved at se på Last-Modified headeren. Startende med jQuery-1.4, udover Last-Modified, er 'etag' også kontrolleret (begge leveres af serveren og er nødvendige for at underrette browseren om, at de anmodede data fra serveren ikke er blevet ændret fra den tidligere anmodning ).

er Lokal
Type: boolesk.
Denne mulighed blev introduceret i jQuery-1.5.1. Giver dig mulighed for at indstille sidekildestatus til lokal (som om den var tændt fil protokol), selvom jQuery genkendte det anderledes. Biblioteket beslutter, at siden kører lokalt i tilfælde af følgende protokoller: fil, *-udvidelse og widget Det anbefales at indstille værdien af parameteren isLocal globalt - ved hjælp af $.ajaxSetup()-funktionen, og ikke. i indstillingerne for individuelle ajax-anmodninger.

jsonp
Type: streng eller boolesk.
Definerer navnet på den parameter, der tilføjes til JSONP-anmodnings-url'en (som standard bruges "callback"). For eksempel konverteres indstillingen (jsonp:"onJSONPLoad") til url-delen af strengen "onJSONPLoad=?" . Siden version 1.5 forhindrer angivelse af false i denne parameter tilføjelse til url'en ekstra parameter. I dette tilfælde skal du indstille indstillingsværdien for jsonpCallback. For eksempel: (jsonp:false, jsonpCallback:"callbackName") .

jsonpCallback
Type: streng eller funktion.
Definerer navnet på den funktion, der vil blive kaldt, når serveren svarer på en Jsonp-anmodning. Som standard genererer jQuery et brugerdefineret navn til denne funktion, hvilket er at foretrække og forenkler bibliotekets arbejde. En af grundene til, at det er værd at angive egen funktion behandling af en jsonp-anmodning er at forbedre caching af GET-anmodninger.
Fra og med jQuery-1.5 kan du angive en funktion i denne parameter for selv at håndtere serversvaret. I dette tilfælde skal den angivne funktion returnere data modtaget fra serveren (i specificeret funktion de vil være tilgængelige i den første parameter).

metode (standard: "GET")
Type: streng.
Parameteren dukkede op i jQuery-1.9.0 Giver dig mulighed for at angive typen af anmodning til serveren ("POST", "GET", "PUT")

mimeType
Type: streng.
Parameteren dukkede op i jQuery-1.5.1 I dette felt kan du angive den datatype, hvor svaret fra serveren forventes i stedet for XHR

adgangskode
Type: streng.
Adgangskode til godkendelse på serveren, hvis det kræves.

processData (standard sand)
Type: boolesk.
Som standard konverteres de data, der overføres til serveren, fra et objekt til en forespørgselsstreng (url-format: fName1=value1&fName2=value2&...) og sendes som "application/x-www-form-urlencoded" . Hvis du skal sende et DOM-dokument eller andre data, der ikke kan konverteres, skal du indstille procesData-indstillingen til falsk .

scriptCharset
Type: streng.
Gælder kun for Ajax GET-anmodninger, kan dataType enten være "jsonp" eller "script". Hvis en server på et tredjepartsdomæne bruger en kodning, der er forskellig fra din, skal du angive kodningen af tredjepartsserveren.

statuskode
Type: objekt.
Parameteren dukkede op i jQuery-1.5.0 Et sæt par, hvor anmodningsudførelseskoder er forbundet med funktioner, der vil blive kaldt. For eksempel, for kode 404 (sider findes ikke), kan du vise en meddelelse på skærmen:

$.ajax(( statusKode: ( 404: function() ( alert("side ikke fundet"); ) ) ));

$. ajax ((

statuskode: (

404: funktion () (

advarsel ("side ikke fundet" );

} ) ;

Hvis anmodningen var vellykket, vil den anonyme funktion som parameter tage de samme parametre som behandlerfunktionerne for vellykket udførelse af anmodningen (specificeret i succesparameteren), og i tilfælde af en fejl, de samme parametre som fejlen funktioner.

succes(data, tekstStatus, jqXHR)
Type: funktion, array.
En funktion, der vil blive kaldt, hvis anmodningen til serveren fuldføres. Tager 3 argumenter:

data sendt af serveren og forbehandlet;
streng med udførelsesstatus (textStatus);
jqXHR-objekt (i versioner før 1.5 bruges XMLHttpRequest i stedet for jqXHR). Fra og med jQuery 1.5, i stedet for en enkelt funktion, kan denne parameter acceptere en række funktioner.

timeout
Type: nummer.
Ventetid på svar fra serveren i millisekunder. Omskriver globale omgivelser den samme parameter i $.ajaxSetup(). Hvis denne tid overskrides, vil anmodningen blive afsluttet med en fejl, og der opstår en fejlhændelse, som får status "timeout".
Tiden tælles fra det øjeblik $.ajax-funktionen kaldes. Det kan ske, at flere andre anmodninger kører i øjeblikket, og browseren vil forsinke eksekveringen af den aktuelle anmodning. I dette tilfælde kan timeoutet fuldføres, selvom anmodningen faktisk ikke er startet endnu.
I jQuery-1.4 og tidligere, når XMLHttpRequest-objektet timeout, vil det gå ind i en fejltilstand, og adgang til dets felter kan give en undtagelse. I Firefox 3.0+ vil script- og JSONP-anmodninger ikke blive afbrudt, hvis de time-out. De vil blive gennemført, selv efter denne tid er udløbet.

traditionel
Type: boolesk.
Indstil denne parameter til sand for at bruge traditionelle konverteringsmuligheder (serialisering).

type (standard: "GET")
Type: streng.
Svarende til metodeparameteren. Parameteren bruges i jQuery tidligere end 1.9.0

url (standard: nuværende sideadresse)
Type: streng.
Definerer den adresse, som anmodningen sendes til.

brugernavn
Type: streng.
Brugernavn til at godkende til serveren, hvis det kræves.

xhr (standard: ActiveXObject i IE, XMLHttpRequest i andre browsere)
Type: funktion.
En funktion, der giver et XMLHttpRequest-objekt. Som standard er dette objekt for IE-browsere ActiveXObject, og i andre tilfælde er det XMLHttpRequest. Med denne mulighed kan du implementere din egen version af dette objekt.

xhrFields
Type: objekt.
Parameteren dukkede op i jQuery-1.5.1 Et sæt par (navn: værdi) til at ændre/tilføje værdierne af de tilsvarende felter i XMLHttpRequest-objektet. For eksempel kan du indstille dens withCredentials-egenskab til sand, når du udfører en anmodning på tværs af domæner:

$.ajax(( url: a_cross_domain_url, xhrFields: (withCredentials: true) ));

$. ajax ((

url: a_cross_domain_url,

xhrFields:(

med legitimationsoplysninger: sandt

} ) ;

Som nævnt ovenfor er $.ajax() den mest basale metode, og alle efterfølgende metoder er kun indpakninger. Meget ofte er der ingen grund til at kalde denne funktion, fordi der er flere alternativer højt niveau, såsom , og . De er nemmere at forstå og bruge, selvom $.ajax() er en mere fleksibel løsning.

Det enkleste brug ville være at kalde $.ajax() uden at angive parametre:

$. ajax();

Event Håndtere

Indstillingerne beforeSend, error, dataFilter, succes og komplet giver dig mulighed for at indstille hændelseshandlere, der forekommer i visse øjeblikke eksekvering af hver ajax-anmodning.

beforeSend sker umiddelbart før anmodningen sendes til serveren;
fejl opstår, hvis anmodningen mislykkes;
dataFilter opstår, når data ankommer fra serveren. Giver dig mulighed for at behandle "rå" data sendt af serveren;
succes opstår, hvis anmodningen fuldføres med succes;
komplet opstår, når anmodningen fuldføres.

advarsel ("Data sendt med succes." );

} ) ;

Opmærksomhed! Indstillingerne for .success(), .error() og .complete() beskrevet ovenfor blev tilføjet til jQuery-1.5 ud over standardmetoderne .done(), .fail() og .then() for det udskudte objekt, som kan bruges til at indstille handlere, men fra og med jQuery-1.8 vil disse tre metoder blive forældet.

$.ajax()-funktionen lærer om typen af data, der sendes af serveren fra serveren selv (via MIME). Derudover er der mulighed for personligt at angive (afklare), hvordan disse data skal fortolkes. Dette gøres ved hjælp af parameteren dataType. Mulige værdier for denne parameter:

"xml" - det resulterende xml-dokument vil være tilgængeligt i tekstform. Du kan arbejde med det ved hjælp af standard jQuery-værktøjer (såvel som med et html-dokument).
"html" - den resulterende html vil være tilgængelig i tekstform. Hvis den indeholder scripts i tags, vil de kun automatisk blive udført, når html-teksten er placeret i DOM.
"script" - de modtagne data vil blive udført som javascript. Variabler, der typisk indeholder svaret fra serveren, vil indeholde et jqXHR-objekt.
"json", "jsonp" - de modtagne data vil blive forudkonverteret til et javascript-objekt. Hvis parsing mislykkes (hvilket kan ske, hvis json'en indeholder fejl), vil en undtagelse for filparsefejl blive kastet. Hvis den server, du tilgår, er på et andet domæne, skal jsonp bruges i stedet for json.
"tekst" - de modtagne data vil være tilgængelige i almindelig tekst uden foreløbig behandling.

Som standard foretages en anmodning til serveren ved hjælp af HTTP GET-metoden. Lav en anmodning om nødvendigt POST metode, skal du angive den passende værdi i typeindstillingen. Data sendt ved hjælp af POST-metoden vil blive konverteret til UTF-8, hvis det er i en anden kodning, som krævet af W3C XMLHTTPRequest-standarden.

Dataparameteren kan angives enten som en streng i formatet nøgle1=værdi1&nøgle2=værdi2 (dataoverførselsformat i url), eller som et objekt med et sæt (navn:værdi) par - (nøgle1: "værdi1", nøgle2: "værdi2"). I sidstnævnte tilfælde konverterer jQuery før dataene sendes givet objekt til en streng ved hjælp af $.param(). Denne konvertering kan dog vendes ved at indstille procesData-indstillingen til falsk. Konvertering til en streng er uønsket, for eksempel i tilfælde af at sende et xml-objekt til serveren. I dette tilfælde er det tilrådeligt at ændre contentType-indstillingen

url: "test.php" ,

succes: funktion (data) (

advarsel ("Data modtaget: " + data );

} ) ;

Fremsætter en anmodning til serveren uden at genindlæse siden. Dette er en metode på lavt niveau med mange indstillinger. Det ligger til grund for driften af alle andre ajax-metoder. Har to brugsmuligheder:

url — anmod om adresse.
indstillinger - i denne parameter kan du angive indstillinger for denne anmodning. Angivet ved hjælp af et objekt i formatet (navn:værdi, navn:værdi...) . Ingen af indstillingerne er påkrævet. Du kan indstille standardindstillinger ved hjælp af $.ajaxSetup() metoden.

Liste over indstillinger

↓ navn :type (standardværdi)

Når der foretages en anmodning, angiver overskrifterne de tilladte indholdstyper, der forventes fra serveren. Værdierne af disse typer vil blive taget fra accepter parameteren.

Som standard sker alle anmodninger uden en genindlæsning af siden asynkront (det vil sige, efter at have sendt en anmodning til serveren, holder siden ikke op med at fungere, mens den venter på et svar). Hvis du har brug for at udføre anmodningen synkront, skal du indstille parameteren til false . Forespørgsler på tværs af domæner og "jsonp" kan ikke udføres synkront.

Vær opmærksom på, at eksekvering af anmodninger i synkron tilstand kan resultere i, at siden blokeres, indtil anmodningen er fuldført.

Dette felt indeholder en funktion, der vil blive kaldt umiddelbart før afsendelse af en ajax-anmodning til serveren. Denne funktion kan være nyttig til at ændre jqXHR-objektet (i tidligere versioner af biblioteket (op til 1.5) bruges XMLHttpRequest i stedet for jqXHR). Du kan fx ændre/specificere de nødvendige overskrifter mv. jqXHR-objektet vil blive sendt til funktionen som det første argument. Det andet argument er anmodningsindstillingerne.

I dette felt kan du angive yderligere anmodningsoverskrifter. Disse ændringer vil blive indtastet før før Send kaldes, hvor sidste header-redigering kan foretages.

Når denne indstilling er sat til sand , vil anmodningen kun blive udført med status "successful", hvis svaret fra serveren afviger fra det tidligere svar. jQuery tjekker denne kendsgerning ved at se på Last-Modified headeren. Da jQuery-1.4, udover Last-Modified, er "etag" også kontrolleret (begge leveres af serveren og er nødvendige for at underrette browseren om, at de anmodede data fra serveren ikke er blevet ændret fra den tidligere anmodning) .

Giver dig mulighed for at indstille kildestatus for en side til lokal (som om den var over filprotokollen), selvom jQuery genkendte det ellers. Biblioteket beslutter, at siden kører lokalt i tilfælde af følgende protokoller: fil, *-udvidelse og widget.

Det anbefales at indstille parameterværdien er Lokal globalt - ved at bruge $.ajaxSetup()-funktionen og ikke i indstillingerne for individuelle ajax-anmodninger.

Definerer navnet på parameteren, der tilføjes til url'en under en jsonp-anmodning (som standard bruges "callback" - "http://siteName.ru?callback=...").

Fra og med jQuery-1.5 vil indstilling af denne parameter til false forhindre en yderligere parameter i at blive tilføjet til url'en. I dette tilfælde skal du udtrykkeligt indstille værdien af jsonpCallback-egenskaben. For eksempel: (jsonp:false, jsonpCallback:"callbackName") .

Definerer navnet på den funktion, der vil blive kaldt, når serveren svarer på en jsonp-anmodning. Som standard genererer jQuery et brugerdefineret navn til denne funktion, hvilket er at foretrække og forenkler bibliotekets arbejde. En af grundene til at specificere din egen jsonp-anmodningsbehandlingsfunktion er at forbedre caching af GET-anmodninger.

Fra og med jQuery-1.5 kan du angive en funktion i denne parameter for selv at håndtere serversvaret. I dette tilfælde skal den angivne funktion returnere data modtaget fra serveren (i den angivne funktion vil den være tilgængelig i den første parameter).

Som standard er alle data, der sendes til serveren, på forhånd konverteret til en streng (url-format: fName1=value1&fName2=value2&...) svarende til "application/x-www-form-urlencoded". Hvis du har brug for at sende data, der ikke kan udsættes for en sådan behandling (f.eks. et DOM-dokument), skal du deaktivere procesData-indstillingen.

Denne parameter bruges til ajax-anmodninger på tværs af domæner af GET-typen, datatypen kan enten være "jsonp" eller "script". Definerer den kodning, som anmodningen på tværs af domæner udføres i. Dette er nødvendigt, hvis en server på et udenlandsk domæne bruger en kodning, der er forskellig fra kodningen på serveren på dets oprindelige domæne.

(Denne indstilling blev introduceret i jQuery-1.5) et sæt par, hvor anmodningsudførelseskoder er knyttet til funktioner, der vil blive kaldt. For eksempel, for kode 404 (sider findes ikke), kan du vise en meddelelse på skærmen:

$.ajax (( statusKode: ( 404 : funktion () ( advarsel ( "Siden blev ikke fundet") ; ) ) ) );

Funktioner, der reagerer på anmodningssucceskoder, vil modtage de samme argumenter som de vellykkede anmodningshåndteringsfunktioner (angivet i succesparameteren), og funktioner, der reagerer på fejlkoder, vil være de samme som for fejlfunktioner.

En funktion, der vil blive kaldt, hvis anmodningen til serveren fuldføres. Det vil blive videregivet tre parametre: data sendt af serveren og allerede forbehandlet (hvilket er forskelligt for forskellige datatyper). Den anden parameter er en streng med udførelsesstatus. Den tredje parameter indeholder jqXHR-objektet (i tidligere versioner af biblioteket (før 1.5) bruges XMLHttpRequest i stedet for jqXHR). Fra og med jQuery-1.5, i stedet for en enkelt funktion, kan denne parameter acceptere en række funktioner.

Ventetid på svar fra serveren. Indstillet i millisekunder. Hvis denne tid overskrides, vil anmodningen blive afsluttet med en fejl, og der vil opstå en fejlhændelse (se beskrivelse ovenfor), som får status "timeout".

Tiden tælles fra det øjeblik $.ajax-funktionen kaldes. Det kan ske, at flere andre anmodninger kører i øjeblikket, og browseren vil forsinke eksekveringen af den aktuelle anmodning. I dette tilfælde timeout kan fuldføre, selvom anmodningen faktisk ikke engang er startet endnu.

I jQuery-1.4 og tidligere, når XMLHttpRequest-objektet timeout, vil det gå ind i en fejltilstand, og adgang til dets felter kan give en undtagelse. I Firefox 3.0+ vil script- og JSONP-anmodninger ikke blive afbrudt, hvis de time-out. De vil blive gennemført, selv efter denne tid er udløbet.

En funktion, der giver et XMLHttpRequest-objekt. Som standard er dette objekt for IE-browsere ActiveXObject, og i andre tilfælde er det XMLHttpRequest. Med denne mulighed kan du implementere din egen version af dette objekt.

(Denne indstilling blev introduceret i jQuery-1.5.1) Et sæt (navn:værdi) par til at ændre/tilføje værdierne af de tilsvarende felter i XMLHttpRequest-objektet. For eksempel kan du indstille dens withCredentials-egenskab til sand, når du udfører en anmodning på tværs af domæner:

$.ajax (( url: a_cross_domain_url, xhrFields: ( withCredentials: true ) ) );

I jQuery-1.5 er egenskaben withCredentials ikke understøttet af native XMLHttpRequest og vil blive ignoreret i en anmodning på tværs af domæner. Dette er rettet i alle efterfølgende versioner af biblioteket.

Event Håndtere

Indstillingerne beforeSend, error, dataFilter, succes og komplet (deres beskrivelse er i forrige afsnit) giver dig mulighed for at indstille hændelseshandlere, der forekommer på bestemte punkter i udførelsen af hver ajax-anmodning.

førSend sker umiddelbart før anmodningen sendes til serveren. fejl opstår, når anmodningen mislykkes. datafilter opstår, når data ankommer fra serveren. Giver dig mulighed for at behandle "rå" data sendt af serveren. succes opstår, når anmodningen er fuldført. komplet opstår, hver gang en anmodning fuldføres.

Eksempel på simpelt brug. Vi viser en meddelelse, når anmodningen er gennemført:

$.ajax (( url: "ajax/test.html" , succes: function () ( advarsel ("Indlæsning blev udført." ) ; ) ) );

Startende med jQuery-1.5 returnerer $.ajax()-metoden et jqXHR-objekt, der blandt andet implementerer den udskudte grænseflade, som giver dig mulighed for at angive yderligere eksekveringshandlere. Ud over metoderne .done(), .fail() og .then() for det udskudte objekt, som du kan installere handlere med, implementerer jqXHR .success(), .error() og .complete() . Dette gøres for at overholde de sædvanlige navne på metoder, som handlere til at udføre ajax-anmodninger med installeres. Fra og med jQuery-1.8 vil disse tre metoder dog blive forældet.

Nogle anmodningstyper, såsom jsonp eller GET-anmodninger på tværs af domæner, understøtter ikke brugen af XMLHttpRequest-objekter. I dette tilfælde vil XMLHttpRequest og textStatus, der sendes til behandlerne, indeholde værdien undefined .

Inde i handlere vil denne variabel indeholde værdien af parameteren sammenhæng. Hvis det ikke blev indstillet, vil dette indeholde indstillingsobjektet.

dataType parameter

"xml"— det resulterende xml-dokument vil være tilgængeligt i tekstform. Du kan arbejde med det ved hjælp af standard jQuery-værktøjer (såvel som med et html-dokument). "html"— den resulterende html vil være tilgængelig i tekstform. Hvis den indeholder scripts i tags, vil de kun automatisk blive udført, når html-teksten er placeret i DOM. "manuskript"— de modtagne data vil blive udført som javascript. Variabler, der typisk indeholder svaret fra serveren, vil indeholde et jqXHR-objekt. "json", "jsonp"— de modtagne data vil blive forudkonverteret til et javascript-objekt. Hvis parsing mislykkes (hvilket kan ske, hvis json'en indeholder fejl), vil en undtagelse for filparsefejl blive kastet. Hvis den server, du tilgår, er på et andet domæne, skal jsonp bruges i stedet for json. Du kan lære om json og jsonp på Wikipedia. "tekst"— de modtagne data vil være tilgængelige i almindelig tekst uden forudgående behandling.

Note 1: Når en anmodning sendes til et tredjepartsdomæne (hvilket kun er muligt med dataType lig med jsonp eller script), udløses fejlbehandlere og globale hændelser ikke.

Note 2: Datatypen angivet i dataType må ikke være i konflikt med de MIME-oplysninger, der leveres af serveren. For eksempel skal xml-data repræsenteres af serveren som text/xml eller application/xml . Hvis dette mislykkes, vil jquery forsøge at konvertere de modtagne data til den angivne type (mere om dette i afsnittet Konvertere).

Sender data til serveren

Som standard foretages en anmodning til serveren ved hjælp af HTTP GET-metoden. Hvis du skal lave en anmodning ved hjælp af POST-metoden, skal du angive den passende værdi i typeindstillingen. Data sendt ved hjælp af POST-metoden vil blive konverteret til UTF-8, hvis det er i en anden kodning, som krævet af W3C XMLHTTPRequest-standarden.

Dataparameteren kan angives enten som en streng i formatet nøgle1=værdi1&nøgle2=værdi2 (dataoverførselsformat i url), eller som et objekt med et sæt (navn:værdi) par - (nøgle1: "værdi1", nøgle2: "værdi2"). I sidstnævnte tilfælde konverterer jQuery det givne objekt til en streng, før dataene sendes, ved hjælp af $.param() . Denne konvertering kan dog vendes ved at indstille procesData-indstillingen til false . Konvertering til en streng er uønsket, for eksempel i tilfælde af at sende et xml-objekt til serveren. I dette tilfælde er det tilrådeligt at ændre contentType-indstillingen fra application/x-www-form-urlencoded til en mere passende mime-type.

Kommentar: De fleste browsere tillader ikke Ajax-anmodninger om ressourcer med andre domæner, underdomæner og protokoller end den nuværende. Denne begrænsning gælder dog ikke for jsonp- og scriptanmodninger.

Modtagelse af data fra serveren

De data, der modtages fra serveren, kan leveres som en streng eller et objekt, afhængigt af værdien af dataType-parameteren (se dataType ovenfor). Disse data er altid tilgængelige i den første parameter i ajax-anmodningsudførelsesbehandleren:

$.ajax (( url: "some.php" , succes: funktion (data) ( advarsel ( "Profit data: " + data ) ; ) ) );

For tekst- og xml-typer vil de data, der sendes af serveren, også være tilgængelige i jqXHR, nemlig i henholdsvis dens responseText- eller responseXML-felter.

Avancerede indstillinger

Ved at bruge den globale parameter kan du deaktivere udførelsen af hændelseshandlere (.ajaxSend(), .ajaxError() osv.) for individuelle anmodninger. Dette kan for eksempel være nyttigt, hvis indlæsning af animation startes/stoppes i disse handlere. Så hvis nogle anmodninger udføres meget ofte og hurtigt, vil det være nyttigt for dem at deaktivere udførelsen af behandlere. For script- og jsonp-anmodninger på tværs af domæner deaktiveres den globale parameter automatisk.

Hvis der kræves godkendelsesdata (login/adgangskode) for at foretage en anmodning til serveren, kan du angive det i brugernavn- og adgangskodeindstillingerne for ajax-anmodningen.

Det kræver at udføre en anmodning til serveren bestemt tid. Hvis serveren ikke sender et svar i løbet af denne tid, ender anmodningen med en fejl (status "timeout"). Ventetiden på et svar fra serveren kan ændres ved at indstille den ønskede værdi (i millisekunder) i timeout-indstillingen.

Det kan ske, at værtskodningen er forskellig fra kodningen af javascript-filen, der blev anmodet om i ajax-anmodningen. I sådanne tilfælde er det nødvendigt at angive kodningen af sidstnævnte i scriptCharset-indstillingen.

I de fleste tilfælde sker Ajax-anmodningen asynkront, men i nogle tilfælde kan det være nødvendigt at udføre anmodningen sekventielt (når yderligere eksekvering af scriptet er umuligt uden at modtage et svar fra serveren). Du kan gøre anmodningen synkron, hvis du deaktiverer asynkroniseringsindstillingen. Det er dog værd at huske på, at siden i dette tilfælde fryser, mens den venter på et svar fra serveren.

Eksempler på brug

Det enkleste brug ville være at kalde $.ajax() uden at angive parametre:

$.ajax();

// en GET-anmodning vil blive sendt til serveren til url'en på den aktuelle side uden at angive nogen parametre.

Hvis du har brug for at indlæse og udføre en js-fil, kan du gøre det sådan her:

$.ajax (( type: "GET" , url: "test.js" , dataType: "script") );

$.ajax (( type: "POST" , url: "some.php" , data: "name=John&location=Boston", succes: funktion (msg) ( alarm ("Data ankom: " + msg ) ; ) ) ) ;

Lad os opdatere indholdet af den ønskede HTML-side:

$.ajax (( url: "test.html" , cache: falsk , succes: funktion (html) ( $("#results" ) .append (html) ; ) ) );

Lad os gøre det synkron anmodning til serveren. Mens anmodningen udføres, vil siden ikke reagere på brugerhandlinger:

// skriv dataene sendt fra serveren til html-variablen var html = $.ajax (( url: "some.php" , async: false ) .responseText ;

Som parameter sender vi et xml-objekt til serveren. For at overføre det korrekt, skal du annullere den foreløbige konvertering af parametre (processData:false). Vi vil specificere den tilpassede funktion handleResponse som en behandler for vellykket gennemførelse af en anmodning:

var xmlDocument = [opret xml-dokument] ;

$.ajax (( url: "page.php" , processData: falsk , data: xmlDocument, succes: handleResponse ) );

Avanceret tilgang

Startende med jQuery-1.5 er der tre nye retninger, der giver dig mulighed for at bruge $.ajax() endnu dybere. Den første af dem (Prefilters) giver dig mulighed for at udføre yderligere manipulationer umiddelbart før du sender anmodningen. Med den anden tilgang (konverterere), kan du fortælle jQuery, hvordan man konverterer data modtaget fra serveren, hvis det ikke matcher det forventede format. Den tredje tilgang (Transport) er det laveste niveau, den giver dig mulighed for selvstændigt at organisere en anmodning til serveren.

Forfiltre

Denne tilgang består i at opsætte en handler, der kaldes, før hver ajax-anmodning foretages. Denne handler går forud for udførelsen af andre ajax-handlere. Det installeres ved hjælp af $.ajaxPrefilter()-funktionen:

$.ajaxPrefilter (funktion (indstillinger, originalOptions, jqXHR) ( ) );
Hvor muligheder
— indstillinger for den aktuelle anmodning, originalindstillinger
- standardindstillinger, jqXHR

— jqXHR genstand for denne anmodning.

var currentRequests = ( ) ;

$.ajaxPrefilter (funktion (options, originalOptions, jqXHR) ( if (options.abortOnRetry) ( if (currentRequests[ options.url ]) ( currentRequests[ options.url ] .abort () ; ) currentRequests[ options.url ] = jqXHR ; ) ) ; Det er praktisk at behandle og eksisterende indstillinger

. Sådan kan du f.eks. ændre en anmodning på tværs af domæner til en, der er omdirigeret gennem din domæneserver:

$.ajaxPrefilter (funktion (options) ( if (options.crossDomain) ( options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url ); options.crossDomain = false ; ) );

Derudover kan du angive de dataType-værdier, som forfilteret vil fungere på. Så du kan for eksempel angive json- og scripttyper: $.ajaxPrefilter ( "json script" , funktion (optioner, originalOptions, jqXHR) ( // Skift muligheder, tjek grundlæggende indstillinger

(originalOptions) og jqXHR-objekt) );

Endelig kan du ændre dataType-værdien for at returnere den ønskede værdi:

$.ajaxPrefilter (funktion (options) ( // ændre dataTypen til script, hvis url'en opfylder visse betingelser if (isActuallyScript(options.url) ) (retur "script" ; ) );

Denne tilgang garanterer ikke kun, at anmodningen vil ændre sin type til script, men også at andre præfilter-handlere, der angiver denne type i den første parameter, også vil blive udført.

Konvertere

Dette princip består i at installere en handler, der vil fungere, hvis den dataType, der er angivet i indstillingerne, ikke stemmer overens med den datatype, der sendes af serveren.

Converters er en ajax-indstilling, så de kan indstilles globalt:

// på denne måde kan du indstille en handler, der vil fungere, hvis der i stedet for // typen mydatatype, du har angivet i dataType, modtages data af typen tekst $.ajaxSetup (( converters: ( "text mydatatype" : function ( textValue ) ( if (valid( textValue ) ) ( // behandler den transmitterede tekst returner mydatatypeValue; ) else ( // hvis dataene sendt af serveren ikke svarer til det forventede, // kan du kaste en undtagelse. throw exceptionObject; ) ) ) ) ; Konvertere vil hjælpe dig, når du introducerer din egen (brugerdefinerede) datatype. Det er vigtigt at bemærke, at navnet på en sådan dataType kun bør bruges små bogstaver

! En anmodning om datatypen "mydatatype" nævnt ovenfor kunne se sådan ud:

$.ajax (url, (dataType: "mydatatype" ) );

Returnerer: jqXHR

Udfører en asynkron HTTP (Ajax) anmodning 1.5 jQuery.ajax(url [, indstillinger])
url
Type: String
URL, som Ajax-anmodningen vil blive sendt til

indstillinger
Type: Objekt
Et sæt nøgle-/værdiparametre, der konfigurerer en Ajax-anmodning. Alle indstillinger er valgfrie. Som standard tages indstillingerne fra . Nedenfor er fuld liste alle indstillinger.
Udfører en asynkron HTTP (Ajax) anmodning 1.0 jQuery.ajax(indstillinger)
indstillinger
Type: Objekt
Et sæt nøgle-/værdiparametre, der konfigurerer en Ajax-anmodning. Alle indstillinger er valgfrie. Som standard tages indstillingerne fra .

indstillinger:

Indstillinger	Datatype
accepterer Standard: Afhænger af datatype Når du laver en Ajax-anmodning, angiver overskrifterne de tilladte indholdstyper, der forventes fra serveren. Værdierne af disse typer vil blive taget fra accepter parameteren. Hvis du har brug for at ændre det, er det bedre at gøre det ved at bruge $.ajaxSetup() metoden.	objekt
asynkron Standard: sand Som standard sendes alle anmodninger asynkront (værdien af denne parameter er sand). Hvis du har brug for synkrone anmodninger, skal du indstille async-parameteren til falsk. Forespørgsler på tværs af domæner og dataType: "jsonp" udføres ikke synkront. Bemærk venligst, at synkrone anmodninger kan blokere browseren, mens anmodningen udføres.	logisk
førSend(jqXHR jqXHR, indstillingsobjekt) En funktion, der vil blive kaldt umiddelbart før afsendelse af en ajax-anmodning til serveren. Det kan bruges til at ændre et jqXHR-objekt (i tidligere versioner, før jQuery 1.4.x, blev XMLHttpRequest brugt). Kan også bruges til at skifte overskrifter mv. Et objekt af typen jqXHR og et indstillingsobjekt sendes som argumenter. Hvis du returnerer falsk i beforeSend-funktionen, vil ajax-anmodningen blive annulleret. Siden jQuery 1.5, vil beforeSend udløses uanset anmodningstypen.	fungere
cache Standard: sand , falsk for "script" og "jsonp" datatyper Hvis falsk, vil den anmodede side ikke blive cachelagret af browseren.	logisk
komplet(jqXHR jqXHR, strengtekstStatus) En funktion, der vil blive kaldt efter afslutningen af ajax-anmodningen (udløses efter succes- og fejlhåndteringsfunktionerne). Funktionen tager to argumenter: et objekt af typen jqXHR (i tidligere versioner, før jQuery 1.4.x, XMLHttpRequest blev brugt) og en streng, der karakteriserer status for anmodningen ("succes", "ikke ændret", "fejl", "timeout" ", "abort" eller " parsererror"). Fra og med jQuery 1.5 kan complete acceptere en række funktioner.	funktion eller array
indhold Parameteren er angivet i formatet (streng:regulært udtryk) og bestemmer, hvordan jQuery vil parse svaret fra serveren, afhængigt af dets type. (tilføjet i version 1.5)	objekt
contentType Standard: "application/x-www-form-urlencoded; charset=UTF-8" Når du sender en Ajax-anmodning, overføres dataene i den form, der er angivet i denne parameter. Standarden er "application/x-www-form-urlencoded; charset=UTF-8". Hvis du selv indstiller værdien, vil den blive sendt til serveren. Hvis kodningen ikke er angivet, bruges standardkodningen på serveren.	linje
sammenhæng Objektet, der bliver konteksten, efter at anmodningen er fuldført (værdien, der overføres til denne variabel). For eksempel, hvis du angiver et DOM-element som en kontekst, vil alle ajax-anmodningshandlere også blive udført i konteksten af dette DOM-element. I dette eksempel vil dette nøgleord indeholde document.body: $.ajax(( url: "test.html", kontekst: document.body, succes: function())( $(this).addClass("done"); ) ));	objekt
konvertere Standard: ("*text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML) Bestemmer, hvilke funktioner der skal bruges til at konvertere værdier fra en type til en anden. (tilføjet i version 1.5)	objekt
crossDomain Standard: falsk for samme domæne, sandt for forespørgsler på tværs af domæner. Hvis du vil udføre en anmodning på tværs af domæner (for eksempel JSONP) på det samme domæne, skal du indstille crossDomain-indstillingen til sand. Dette tillader for eksempel serveromdirigering til et andet domæne. (tilføjet i version 1.5)	logisk
data Data, der vil blive overført til serveren. Hvis dataene ikke er en streng, konverteres de til en forespørgselsstreng. For GET-anmodninger er data knyttet til URL'en. Et objekt skal bestå af nøgle/værdi-par. Hvis værdien er et array, bestiller jQuery værdierne afhængigt af den traditionelle indstilling. Som standard bliver f.eks. (foo:["bar1", "bar2") til &foo=bar1&foo=bar2 .	objekt eller streng
dataFilter(strengdata, strengtype) En funktion, der vil blive brugt til at behandle rådata af typen XMLHttpRequest modtaget fra serveren. Din funktion skal fungere som et filter og returnere den rensede streng. To parametre sendes til funktionen: de modtagne data og værdien af dataType-parameteren.	fungere
datatype Standard: automatisk detekteret streng (xml, json, script eller html) Den type data, der forventes fra serveren. Hvis indstillingen ikke er angivet, vil jQuery forsøge at bestemme typen baseret på svarets MIME-type.	linje
fejl(jqXHR jqXHR, string textStatus, string errorThrown) En funktion, der udføres, hvis anmodningen mislykkes. Tager 3 argumenter: et jqXHR-objekt (tidligere XMLHttpRequest), en streng, der beskriver fejlen, og en undtagelsesstreng, hvis den blev kastet. Det andet argument kan indeholde følgende værdier: null, "timeout", "error", "abort" og "parsererror". I tilfælde af at det sker HTTP-fejl, så vil dens tekststatus blive skrevet til det tredje argument. For eksempel "Ikke fundet" eller " Intern server Fejl." Fra og med jQuery 1.5, i stedet for en enkelt funktion, kan denne parameter acceptere en række funktioner. Fejlhændelsen opstår ikke, når dataType er lig med script eller JSONP.	funktion eller array
global Standard: sand. Hvorvidt der skal ringes til globale Ajax-hændelseshandlere for denne anmodning (såsom ajaxStart eller ajaxStop).	logisk
overskrifter Standard: () Her kan du angive yderligere anmodningsoverskrifter. Værdierne for denne indstilling vil blive indtastet før funktionen beforeSend kaldes, hvor der kan foretages endelige ændringer af overskrifterne. (tilføjet i version 1.5)	objekt
ifModified Standard: falsk Anmodningen vil kun blive betragtet som vellykket, hvis svardataene er ændret siden sidste anmodning. Kontrollen udføres ved hjælp af Last-Modified header. Som standard, denne mulighed handicappet. I jQuery 1.4 kontrolleres "etag"-værdien også for at spore, om dataene er ændret.	logisk
er Lokal Standard: afhængigt af den aktuelle placering Parameteren bestemmer, om websiden kører lokalt (f.eks. ved hjælp af filen, *-udvidelsen og widget-protokollen) eller ej (f.eks. http protokol). Denne indstilling det er bedre at ændre ved at bruge $.ajaxSetup() metoden. (tilføjet i version 1.5)	logisk
jsonp Definerer navnet på den parameter, der tilføjes til JSONP-anmodnings-url'en (som standard bruges "callback"). For eksempel konverteres indstillingen (jsonp:"onJSONPLoad") til url-delen af strengen "onJSONPLoad=?". Siden version 1.5 forhindrer angivelse af false i denne parameter tilføjelse af en ekstra parameter til url'en. I dette tilfælde skal du indstille indstillingsværdien for jsonpCallback. For eksempel: (jsonp:false, jsonpCallback:"callbackName").	linje
jsonpCallback En funktion, der vil blive kaldt, når serveren svarer på en JSONP-anmodning. Som standard genererer jQuery vilkårlig unikt navn denne funktion, som er at foretrække. Hvis du vil bruge caching af GET-anmodninger, så indtast selv navnet på funktionen. Fra version 1.5 kan du angive en funktion for selv at behandle serversvaret.	streng eller funktion
mimeType Her kan du angive den datatype, hvor svaret forventes fra serveren i stedet for XHR. (tilføjet i version 1.5.1)	linje
adgangskode Adgangskode, der skal bruges som svar på anmodningen om HTTP-adgangsgodkendelse (hvis påkrævet)	linje
brugernavn Brugernavnet, der vil blive brugt som svar på anmodningen om HTTP-adgangsgodkendelse (hvis påkrævet)	linje
procesdata Standard: sand ; Som standard konverteres data, der sendes til serveren, fra et objekt til en forespørgselsstreng og sendes som "application/x-www-form-urlencoded". Hvis du skal sende et DOM-dokument eller andre data, der ikke kan konverteres, skal du indstille procesData-indstillingen til falsk.	logisk
scriptCharset Gælder kun for Ajax GET-anmodninger af typen "JSONP" og "script". Hvis en server på et tredjepartsdomæne bruger en kodning, der er forskellig fra din, skal du angive kodningen af tredjepartsserveren.	linje
statuskode Standard: () Et sæt par, hvor anmodningsudførelseskoder er knyttet til funktioner, der vil blive kaldt. For eksempel, for kode 404 (sider findes ikke), kan du vise en meddelelse på skærmen: $.ajax(( statusCode:( 404:function())( alert("Siden ikke fundet"); ) ) )); Hvis anmodningen lykkedes, vil den anonyme funktion som parameter tage de samme parametre som for succes. Hvis der er en fejl, vil det tage det samme som med fejlbehandlerfunktionen. (tilføjet i version 1.5)	objekt
succes (dataobjekt, tekstStatus-streng, jqXHR-objekt) En funktion, der vil blive kaldt, hvis anmodningen fuldføres. Tager 3 argumenter - data sendt af serveren og forbehandlet; streng med udførelsesstatus (textStatus); jqXHR-objekt (i versioner før 1.5 bruges XMLHttpRequest i stedet for jqXHR). Fra og med jQuery 1.5, i stedet for en enkelt funktion, kan denne parameter acceptere en række funktioner.	funktion eller array
timeout Ventetid på svar fra serveren i millisekunder. Overskriver den globale indstilling af den samme parameter i $.ajaxSetup(). Hvis denne tid overskrides, vil anmodningen mislykkes, og der opstår en fejlhændelse med status "timeout".	antal
traditionel Standard: falsk Indstil denne parameter til sand for at bruge den traditionelle serialiseringsstil.	logisk
type Standard: GET Bestemmer, om anmodningen er GET eller POST. Du kan også bruge andre HTTP-anmodninger (såsom PUT eller DELETE), men vær opmærksom på, at ikke alle browsere understøtter dem.	linje
url Standard: nuværende side. Den side, som anmodningen sendes til.	linje
xhr Som standard ActiveXObject i IE, XMLHttpRequest i andre browsere. Tilbagekaldsfunktion til at oprette et XMLHttpRequest-objekt. Ved at oprette din funktion tager du det fulde ansvar for at skabe objektet.	fungere
xhrFields Et objekt af formen (navn:værdi) til at ændre værdierne af de tilsvarende felter i XMLHttpRequest-objektet. $.ajax(( url: a_cross_domain_url, xhrFields: (withCredentials: true) )); (tilføjet i version 1.5.1)	kort

$.ajax(( type: "POST", url: "some.php", data: ( navn: "John", placering: "Boston" ) )).done(function(msg) ( alert("Data gemt: " + msg); ));

Få det seneste HTML version sider

$.ajax(( url: "test.html", cache: false )).done(function(html) ( $("#results").append(html); ));

Vi giver det videre som XML data dokument. Vi deaktiverer automatisk konvertering af data til en almindelig streng ved at indstille procesData-indstillingen til falsk:

Var xmlDokument = ; var xmlRequest = $.ajax(( url: "page.php", processData: false, data: xmlDocument )); xmlRequest.done(handleResponse);

Var menuId = $("ul.nav").first().attr("id"); var request = $.ajax(( url: "script.php", type: "POST", data: (id: menuId), dataType: "html" )); request.done(function(msg) ( $("#log").html(msg); )); request.fail(function(jqXHR, textStatus) ( alert("Forespørgsel mislykkedes: " + textStatus); ));

Download og kør JavaScript-fil:

$.ajax(( type: "GET", url: "test.js", dataType: "script" ));

Denne artikel beskriver AJAX på funktions- og eksempelniveau. Funktionerne ved asynkron interaktion og eksempler på brug tages i betragtning, men med et minimum af tekniske detaljer.

Jeg håber, det vil være nyttigt for at forstå, hvad AJAX er, og hvad det bruges til.

Hvad er AJAX? Eksempel implementering.

AJAX eller længere, EN synkron J avascript EN nd X ml er en teknologi til at interagere med serveren uden at genindlæse sider.

På grund af dette reduceres responstiden, og webapplikationen minder mere om en desktop med hensyn til interaktivitet.

AJAX-teknologien, som det første bogstav A i navnet indikerer, er asynkron, dvs. browseren, der har sendt en anmodning, kan gøre hvad som helst, for eksempel vise en besked
om at vente på svar, scrolle på siden osv.

Her er knapkoden i eksemplet ovenfor:

Når den klikkes, kalder den stemmefunktionen, som sender en anmodning til serveren, venter på et svar og viser derefter en besked om det i div under knappen:

Serversvaret vil være her

For at udveksle data med serveren bruges et særligt XmlHttpRequest objekt, som kan sende en anmodning og modtage et svar fra serveren. Du kan oprette et sådant objekt på tværs af browser, for eksempel på denne måde:

Funktion getXmlHttp())( var xmlhttp; try ( xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); ) catch (e) ( try ( xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); ) catch (E) ( xmlhttp = false; ) ) if (!xmlhttp && typeof XMLHttpRequest!="undefined") ( xmlhttp = new XMLHttpRequest(); ) returner xmlhttp;

Du kan læse mere om detaljerne omkring implementering af AJAX ved hjælp af XmlHttpRequest og andre transporter i afsnittet om kommunikation med serveren.

Vi vil ikke dvæle ved dette her og gå direkte til afstemningsfunktionen:

// javascript stemmekode fra eksempelfunktionen vote() ( // (1) opret et objekt for en anmodning til serveren var req = getXmlHttp() // (2) // span ved siden af knappen // det vil vise eksekveringsforløbet var statusElem = document.getElementById("vote_status") req.onreadystatechange = function() ( // onreadystatechange aktiveres, når serversvaret modtages if (req.readyState == 4) ( // hvis anmodningen er afsluttet udfører statusElem.innerHTML = req.statusText / / vis status (Ikke fundet, OK..) if(req.status == 200) ( // hvis status er 200 (OK) - giv et svar på brugeradvarslen(" Serversvar: "+req.responseText); ) // her kan du tilføje andet med anmodningsfejlhåndtering ) ) // (3) sæt forbindelsesadressen req.open("GET", "/ajax_intro/vote.php", true); // anmodningsobjektet er forberedt: adressen er angivet og onreadystatechange-funktionen oprettes // for at behandle serversvaret // (4) req.send(null); statusElem.innerHTML = "Venter på serversvar..." )

Eksekveringsstrømmen, der bruges ved afstemning, er ret typisk og ser sådan ud:

Funktionen opretter et XmlHttpRequest-objekt

tildeler serversvarhandleren til onreadystatechange

åbner forbindelse åben

sender en anmodning ved hjælp af send-opkaldet (serversvaret modtages af den asynkront udløste onreadystatechange-funktion)

viser den besøgende en processtatusindikator

Serverhandleren, som AJAX-anmodningen er adresseret til (i eksemplet er dette vote.php) er i det væsentlige ikke forskellig fra almindelig side. AJAX-anmodningen sendt af XmlHttpRequest adskiller sig ikke fra en almindelig anmodning.

Det er bare, at den tekst, som serveren returnerer, ikke vises som HTML, men læses og behandles af onreadystatechange-funktionen.

Betydningen af AJAX er integrationen af teknologier

AJAX-teknologien bruger en kombination af:

(X)HTML, CSS til præsentation og styling af information
DOM-model, hvor operationer udføres af javascript på klientsiden for at give dynamisk visning og interaktion med information
XMLHttpRequest for asynkron kommunikation med en webserver. I nogle AJAX-frameworks og i nogle situationer bruges en IFrame, SCRIPT-tag eller anden lignende transport i stedet for XMLHttpRequest.
JSON bruges ofte til dataudveksling, men ethvert format fungerer, inklusive rig HTML, tekst, XML og endda noget EBML

En typisk AJAX-applikation består af mindst to dele.

Den første kører i browseren og er normalt skrevet i JavaScript, og den anden er på serveren og er skrevet i for eksempel Ruby, Java eller PHP.

Data udveksles mellem disse to dele via XMLHttpRequest (eller anden transport).

Hvad kan jeg gøre med AJAX?

Pointen med AJAX er interaktivitet og hurtig responstid.

Små kontroller

AJAX er primært nyttig til små elementer forbundet med grundlæggende handlinger: læg i kurv, abonner osv.

Dynamisk indlæsning af data fra serveren.

For eksempel et træ, hvis noder indlæses, når de udvides.

På tidspunktet for dets fremkomst var det den eneste åbne postvæsen bruger AJAX til følgende funktioner.

Kontrol af formularindtastningsfejl FØR indsendelse
Brugernavnet sendes til serveren, og resultatet af kontrollen returneres til siden.
"Øjeblikkelig" download
Browseren kontakter kun serveren for data, i stedet for at opdatere hele den besværlige grænseflade
Automatisk "levering" af breve til en åben mappe
Fra tid til anden sendes en anmodning til serveren, og hvis der kommer nye breve, dukker de op i browseren.
Autofuldførelse
Det er nok at indtaste de første bogstaver i modtagerens navn, og resten fuldføres automatisk, som i desktop-applikationer.

Resultat: udbredt popularitet, stor efterspørgsel efter konti siden åbningen.

Synkron model VS Asynkron model

Ved konventionel programmering er alle operationer synkrone, det vil sige, at de udføres efter hinanden.

Relativt set handler vi sådan her:

kaste en fiskestang

venter på at den bider

bit - tænd for spindestangsspændingen

Med den asynkrone tilgang:

vi hænger en speciel biddetektor på fiskestangen, beder den trække i spinnestangen når den bider

kaste en fiskestang

vi laver andre ting

biddetektoren udløses, hvilket udløser tilbagetrækningen af spindestangen

Det vil sige, at i det synkrone tilfælde tiltrækker fiskestangen konstant vores opmærksomhed. At fange fisk er en sekventiel proces.

I den asynkrone version satte vi først programmet for, hvad der skulle gøres ved bid, og sænkede derefter fiskestangen for at fange og gik i gang med andre ting.
For eksempel installerede vi 5 flere sådanne fiskestænger.

Asynkron programmering er sværere end synkron programmering, og i starten er det usædvanligt, fordi det på forhånd hvad der vil virke er givet efter.
Det vil sige, at programmet "hvad skal man gøre, når den bider", skal indstilles, inden biddet opstår, og det er generelt uvist, om der er fisk i reservoiret.

Der er teknikker, der gør asynkron programmering lettere, for eksempel Deferred-objektet (Twisted, Dojo, Mochikit), men dette vil blive diskuteret i en separat artikel.

Synkron og asynkron model i AJAX

Lad os vende tilbage til vores får: browseren, serveren og f.eks. databasen.

I den synkrone model sender browseren en anmodning til serveren og hænger og venter på, at den fuldfører alt. nødvendigt arbejde. Serveren udfører forespørgsler til databasen, indpakker svaret i det krævede format og udsender det. Browser. Efter at have modtaget svaret, kalder den showfunktionen.

Alle processer udføres sekventielt, den ene efter den anden.

Netværksforsinkelser er inkluderet i ventetiden, angivet med gråt i diagrammet.

Brugeren kan ikke gøre andet på samme side, mens der udveksles synkrone data.

I den asynkrone model sendes anmodningen ("lokkemaden er sat"), og du kan gå videre til noget andet. Når forespørgslen er fuldført ("becked") - lanceres den på forhånd
en funktion udarbejdet af programmøren ("træk spindestangen op") til at vise en servermeddelelse.

Her giver serveren straks besked til browseren om, at anmodningen er blevet accepteret til behandling og frigiver den til videre arbejde. Når svaret er klar, videresender serveren det, og den tilsvarende visningsfunktion vil blive kaldt på browseren, men mens dette svar genereres og sendes, er browseren gratis.

Brugeren kan skrive kommentarer, udfylde og indsende en formular osv.: Der kan laves nye asynkrone anmodninger.

Den asynkrone model er kendetegnet ved en næsten øjeblikkelig respons på brugerhandlinger, så applikationen føles bekvem og hurtig.

På grund af denne kløft mellem handlingen og det faktiske resultat, bliver applikationen meget mere modtagelig for fejl.

Især i tilfælde af flere samtidige asynkrone anmodninger, skal du sørge for rækkefølgen af udførelse og respons (race-betingelser) og, i tilfælde af en fejl, efterlade applikationen i en konsistent tilstand.

Funktioner af den asynkrone model

Svært at implementere
- Utilstrækkelige browserfunktioner (javascript)
- Den asynkrone model er sværere at fejlfinde
Race forhold
- Udefineret udførelsessekvens
- Du kan lave mange samtidige opgaver ("fiskestænger"), men den opgave, der startes først, kan ende sidst.
Reaktionen er øjeblikkelig, men det er uvist, hvad resultatet bliver. Fejlhåndtering er mere kompliceret
- Kommunikationsfejl - afbrydelse mv.
- Brugerfejl - for eksempel var der ikke nok privilegier
Integritetskontrol (fejlsikker)
- For eksempel sendte redaktøren asynkron anmodning at fjerne en trægren. Tilføjelse til det skal være deaktiveret, indtil serversvaret ankommer. Hvis der pludselig ikke var nok privilegier, mislykkedes operationen.
Interaktivitet
Hurtig grænseflade

Der er kun to fordele, men hvilke fordele! Spillet er stearinlys værd.

Asynkron drag"n"drop.

Nogle gange for asynkrone operationer det er nødvendigt at lave forskellige "finter med ørerne." For eksempel vil du lave et drag"n"drop i et træ, det vil sige trække artikler fra en sektion til en anden med musen, og så de ændrer deres forælder på serveren i databasen.

Træk "n" drop - dette er "tog museobjektet - sæt det, hvor det skulle være - gjort." Men i den asynkrone model kan alt ikke være "klar" med det samme.
Du skal tjekke privilegierne på serveren, kontrollere om objektet stadig eksisterer, hvis en anden bruger har slettet det.

Vi skal på en eller anden måde vise, at processen er startet, men resultatet bliver "hvad der vil ske...". Hvordan? I den asynkrone model kan musemarkøren ikke bare svæve over et objekt og blive til et ur.

I dette tilfælde bruger de enten synkrone anmodninger til serveren – og så fryser alt virkelig, eller også er den originale løsning at lægge objektet, som om det var blevet overført, og informere med et animeret ikon om, at der venter et svar.
Hvis svaret er negativt, overfører svarbehandleren objektet tilbage.

Forældet kontekst, forældet kontekst

Eksemplet med drag"n"drop berører også problemet med "stale kontekst" - forældet kontekst.

Web er et flerbrugermiljø. Hvis det bruges til navigation,
Lad os sige et træ af artikler, så arbejder mange på det. En af dem kan slette en trægren, som den anden arbejder på: konflikt.

Som regel bruges følgende midler til at overvinde sådanne hændelser:

Redigeringspolitik

Det er, når alle ved, hvem der gør hvad, og på niveauet for magtfordeling og personlig kommunikation aftales sådanne sletninger. Denne mulighed er naturligvis usikker, men fungerer normalt.

Låsning og/eller versionskontrol

Låsning - blokering af redigerede dokumenter.

Versionskontrol - alle nyt dokument bliver en version, så ændringer aldrig går tabt. Versionering medfører konflikter, da Petya begyndte at redigere dokumentet før Vasya, og gemte det senere. Samtidig, i seneste version Vasyas ændringer gik tabt, selvom den næstsidste (Vasyas) version absolut er i systemet.

Du kan læse mere om fx låsning og versionering i dokumentationen til Subversion versionskontrolsystemet.

Automatisk kontekstopdatering

Problemet med forældet indhold kan 99% løses med øjeblikkelig automatisk opdatering.

Browseren opretholder en konstant forbindelse til serveren (eller foretager korrigerende anmodninger fra tid til anden) - og nødvendige ændringer sendes via denne kanal.

For eksempel indlæses nye artikler nogle gange i en åben trægren, og nye breve indlæses nogle gange i en åben mail-grænseflade.

Generelt er problemet med forældet kontekst direkte relateret til problemet med dataintegritet. Under alle omstændigheder er serveren ansvarlig for det endelige integritetstjek, som med formularvalidering.

En lektion, hvori simple eksempler Lad os se på, hvordan man arbejder med AJAX-teknologi, nemlig hvordan man bruger XMLHttpRequest-objektet (forkortet XHR) til at oprette synkrone HTTP-anmodninger til serveren og modtage svar fra den.

Lad os begynde vores introduktion til AJAX-teknologi ved at se på et eksempel (for begyndere), der vil anmode om information fra serveren gennem en synkron anmodning.

En synkron anmodning, i modsætning til en asynkron, fryser websiden, efter den er sendt, og før svaret modtages, dvs. gør det utilgængeligt for brugeren. Synkrone anmodninger bruges ret sjældent på websteder, men det er bedre for begyndere at lære AJAX-teknologi med dem.

Før vi går videre til at skabe et eksempel, lad os se på de vigtigste trin, der er involveret i at udvikle et fragment af en side, der fungerer i overensstemmelse med AJAX-teknologi. I dette tilfælde udføres alle handlinger hovedsageligt i JavaScript-kode efter forekomsten af enhver begivenhed på siden (brugeren klikkede på en knap osv.) og består af følgende trin:

Hentning af nogle oplysninger (data) fra en side eller formular (hvis nødvendigt)

Sender en anmodning til webserveren

Modtagelse af svar fra webserveren

Vis resultater på siden, hvis svaret var vellykket.

Grundlæggende om oprettelse af synkrone AJAX-anmodninger Eksempel 1: Fremstilling af en synkron AJAX-anmodning

Lad os se på et eksempel på at udføre en synkron AJAX-anmodning til serveren ved hjælp af XMLHttpRequest-metoden. I dette eksempel vil vi anmode om dataene i data.txt-filen på serveren og vise dem på siden i span-elementet.

Eksemplet vil bestå af filerne index.html , script.js og data.txt , som for nemheds skyld kan placeres på serveren i samme mappe.

Lad os starte udviklingen ved at oprette en HTML-side, som vi vil forbinde filen script.js til. Denne fil, eller rettere dens indhold, vil gøre alt hovedarbejdet. Men før vi går videre til dens udvikling, lad os oprette div og span-elementer på siden. div-elementet vil fungere som en knap, som, når der klikkes på det, udfører en AJAX-anmodning. Og span-elementet vil fungere som en container, der vil indeholde svaret, der kommer fra serveren.

Derudover vil vi tilføje mere til siden CSS stilarter at pynte den lidt. Som et resultat bør vi have følgende HTML-kode:

JavaScript AJAX#myDiv (højde: 30px; bredde: 100px; baggrundsfarve: lysegrøn;)

Svar (AJAX):

Åbn derefter data.txt-filen og indtast teksten "Hej, verden!" Lad os gemme og lukke filen.

Lad os endelig gå videre til at oprette filen script.js. Indholdet af denne fil vil udføre alle de grundlæggende handlinger, dvs. send en ajax-anmodning til serveren, modtag et svar fra serveren og opdater sideindholdet (placer svaret i span-elementet).

Overvej at skabe denne fil trin for trin:

JavaScript AJAX

Klik på den lysegrønne blok og modtag et svar fra serveren "Eksempel, verden!"

Svar (AJAX):

// få det element, der har id="myDiv" var myDiv = document.getElementById("myDiv"); // abonner på klikhændelsen for dette element myDiv.addEventListener("klik", funktion() ( // opret et XMLHttpRequest-objekt var request = new XMLHttpRequest(); // konfigurer anmodningen: GET - metode, data.txt - URL som anmodningen sendes til, false - synkron anmodning request.open("GET","data.txt",false // send data til serveren ved at bruge send-metoden request.send(); hvis svarstatus er 200 (OK ), så if (request.status==200) ( // vis serversvaret i elementet, der har id="answer" document.getElementById("answer").innerHTML = request. .responseText; ) ))

Hej verden!

Eksempel 2: Behandling af en synkron AJAX-anmodning på serveren ved hjælp af PHP

Et eksempel der vil AJAX teknologier sende en anmodning indeholdende en parameter til serveren og vise svaret på siden.

I dette eksempel vil siden bestå af 3 knapper. Den første knap vil have tekst 1, den anden knap tekst 2 og den tredje knap tekst 3. Ved at klikke på en af knapperne sendes en synkron anmodning til serveren. Vi vil bruge GET som anmodningstransmissionsmetode. Og den adresse, som vi sender anmodningen og ajax.php-parametre til. Vi vil modtage data sendt af klienten på serveren ved hjælp af HTTP GET-variablen ($_GET). Herefter vil vi behandle de modtagne data på serveren og returnere et svar (streng) til klienten.

JavaScript AJAX span ( skrifttype-vægt: fed; farve: rød;)

Klik på en af knapperne og modtag et svar fra serveren ved hjælp af AJAX-teknologi.

1 2 3

Svar (AJAX):

// få alle knapelementer på siden var buttons = document.getElementsByTagName("button"); // abonner på klikhændelsen for alle elementer-knappen for (var i=0; i