Jquery ajax post eksempel dataparametere. Angi forespørsels-URL

jQuery.ajax() - gjør en forespørsel til serveren uten å laste inn siden på nytt. Dette er en metode på lavt nivå som har stort beløp innstillinger. Det ligger til grunn for driften av all ajax, som ofte er lettere å forstå og bruke, men likevel gir begrenset funksjonalitet sammenlignet med denne metoden.

$.ajax() returnerer et XMLHttpRequest-objekt. I de fleste tilfeller trenger du ikke å jobbe med dette objektet direkte, men det er fortsatt tilgjengelig i tilfelle du må avbryte forespørselen manuelt.

$.ajax()-funksjonen sendes et objekt som består av nøkkel/verdi-par som brukes til å initialisere og administrere forespørselen.

En Ajax-forespørsel har to bruksområder:

jQuery.ajax(url [, innstillinger ])

Den eneste forskjellen fra forrige versjon av metoden er at url-egenskapen her er en del av innstillingene, og ikke en egen parameter.

Liste over innstillinger

godtar (standard: avhenger av DataType)
Type: objekt.
Når en forespørsel sendes, indikerer overskriftene de tillatte innholdstypene som forventes fra serveren. Verdiene for disse typene vil bli hentet fra aksepterer parameteren. For eksempel spesifiserer følgende eksempel gyldige tilpassede typer:

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

$. ajax ((

godtar: (

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

omformere: (

"tekst mycustomtype" : funksjon (resultat) (

returner nytt resultat ;

dataType: "mycustomtype"

} ) ;

asynkron (standard: sant)
Type: boolsk.
Som standard sendes alle forespørsler asynkront (det vil si etter at en forespørsel er sendt til serveren, slutter ikke siden å fungere mens den venter på svar). Hvis du trenger å sende forespørsler synkront, sett dette alternativet til false. Forespørsler på tvers av domener og "jsonp" kan ikke kjøres i synkron modus. Vær oppmerksom på at synkrone forespørsler kan blokkere nettleseren mens forespørselen kjører.

beforeSend(jqXHR, innstillinger)
Type: funksjon.
Inneholder en funksjon som kalles opp umiddelbart før en ajax-forespørsel sendes til serveren. Denne funksjonen kan være nyttig for å endre jqXHR-objektet (i tidligere versjoner av biblioteket (opptil 1.5) brukes XMLHttpRequest i stedet for jqXHR). Du kan for eksempel endre/spesifisere nødvendige overskrifter osv. JqXHR-objektet vil bli sendt til funksjonen som det første argumentet. Det andre argumentet er forespørselsinnstillingene.
beforeSend refererer til ajax-hendelser. Derfor, hvis funksjonen spesifisert i den returnerer false, vil ajax-forespørselen bli kansellert. Fra og med jQuery-1.5 kalles beforeSend uavhengig av forespørselstypen.

cache (standard: true, false for dataType "script" og "jsonp")
Type: boolsk.
hvis du vil at nettleseren ikke skal bufre forespørselen som gjøres, sett denne parameteren til false. Vær oppmerksom på at hvis parameteren er satt til usann, vil linjen «_=» bli lagt til URL-en.

komplett(jqXHR, tekstStatus)
Type: funksjon.
En funksjon som utføres hver gang en AJAX-forespørsel fullføres (etter suksess og feil er fullført). To parametere sendes til funksjonen: jqXHR (i tidligere versjoner av biblioteket (opptil 1.5), brukes XMLHttpRequest i stedet for jqXHR) og forespørselsutførelsesstatusen (strengverdi: "success", "notmodified", "error", "timeout", "avbryt" eller "parsererror").
Fra og med jQuery-1.5 kan du sende en rekke funksjoner til hele parameteren i stedet for bare én funksjon. Alle funksjoner kalles opp i den rekkefølgen de er spesifisert i denne matrisen.

innhold
Type: objekt.
Parameteren dukket opp i jQuery-1.5. Den er spesifisert av et objekt i formatet (streng:regulært uttrykk) og bestemmer hvordan jQuery vil analysere svaret fra serveren, avhengig av typen.

innholdstype
Type: boolsk eller streng.
Når du sender en forespørsel til serveren, overføres data i formatet spesifisert i contentType. Standard er 'application/x-www-form-urlencoded; charset=UTF-8’, som passer i de fleste tilfeller. Hvis du spesifiserer denne parameteren eksplisitt, vil den bli sendt til serveren (selv om ingen data ble sendt dit).
Med jQuery-1.6 kan du sende false for å ikke angi tittelen.

kontekst
Type: objekt.
Objektet som blir konteksten etter at forespørselen er fullført (verdien som sendes til denne variabelen). For eksempel, hvis du spesifiserer et DOM-element som en kontekst, vil alle ajax-forespørselsbehandlere også bli utført i konteksten til dette DOM-elementet. I i dette eksemplet nøkkelord dette vil inneholde document.body:

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

$. ajax ((

url: "test.html" ,

kontekst: dokument. kropp

) ). ferdig(funksjon()(

$(dette). addClass("ferdig");

} ) ;

omformere (standard: ("*text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML))
Type: objekt.
Parameteren dukket opp i jQuery-1.5 Bestemmer hvilke funksjoner som skal brukes til å konvertere verdier fra en type til en annen.

crossDomain (standard: usann for samme domene, sant for forespørsler på tvers av domene)
Type: boolsk.
Dette alternativet ble introdusert i jQuery-1.5. Hvis du ønsker å utføre en forespørsel på tvers av domener (for eksempel JSONP) på samme domene, setter du crossDomain-innstillingen til sann. Dette tillater for eksempel serveromadressering til et annet domene.

data
Type: objekt, streng eller array.
Data som vil bli overført til serveren. Hvis dataene ikke er en streng, konverteres de til en spørringsstreng. For forespørsler som FÅ data er vedlagt URL-en. Et objekt må bestå av nøkkel/verdi-par. Hvis verdien er en matrise, bestiller jQuery verdiene avhengig av den tradisjonelle innstillingen. Som standard blir for eksempel (foo:["bar1", "bar2"]) &foo=bar1&foo=bar2 .

dataFilter(data, type)
Type: funksjon.
En funksjon som vil forhåndsbehandle data sendt av serveren, dvs. den skal fungere som et filter og returnere den rensede strengen. To parametere sendes til denne funksjonen: de nevnte dataene og parameterverdien data-type. Funksjonen spesifisert i dataFilter må returnere behandlet data.

dataType (standard: oppdaget automatisk (xml, json, script eller html))
Type: streng.
Datatypen der svaret forventes fra serveren. Hvis det ikke er satt, vil jQuery prøve å bestemme det automatisk ved å bruke MIME-en som er mottatt fra serveren.

feil
Type: funksjon
En funksjon som vil bli kalt hvis en forespørsel til serveren mislykkes. Den er utstyrt med tre parametere: jqXHR (til 1.5 XMLHttpRequest brukes), en streng som beskriver feilen som oppstod, samt et unntaksobjekt hvis dette skjedde. Mulige verdier for det andre argumentet er "timeout", "error", "notmodified" og "parsererror" (i uventede tilfeller kan null returneres). Fra og med jQuery-1.5 kan denne parameteren akseptere enten en enkelt funksjon eller en rekke funksjoner.
Feilhendelsen oppstår ikke når dataType er lik script eller JSONP.

global (standard: sant)
Type: boolsk.
Ansvarlig for driften av globale ajax-forespørselshendelser (for eksempel ajaxStart eller ajaxStop). Hvis du setter denne parameteren til false , vil globale hendelser for denne forespørselen ikke bli registrert.

overskrifter
Type: objekt.
Parameteren dukket opp i jQuery-1.5. Her kan du spesifisere ytterligere forespørselshoder. Verdiene for denne innstillingen vil bli lagt inn før før Send-funksjonen kalles opp, hvor endelige endringer i overskriftene kan gjøres.

ifModified
Type: boolsk.
Når denne innstillingen er satt til sann , vil forespørselen bli utført med statusen "vellykket" bare hvis svaret fra serveren er forskjellig fra det forrige svaret. jQuery sjekker dette ved å se på overskriften Last-Modified. Siden jQuery-1.4, i tillegg til Last-Modified, er 'etag' også sjekket (begge leveres av serveren og er nødvendige for å varsle nettleseren om at de forespurte dataene fra serveren ikke er endret fra forrige forespørsel) .

er Lokal
Type: boolsk.
Dette alternativet ble introdusert i jQuery-1.5.1. Lar deg sette sidekildestatusen til lokal (som om den var på filprotokoll), selv om jQuery gjenkjente det annerledes. Biblioteket bestemmer at siden kjører lokalt når det gjelder følgende protokoller: fil, *-utvidelse og widget. Det anbefales å sette verdien til parameteren isLocal globalt - ved å bruke $.ajaxSetup()-funksjonen, og ikke i innstillingene for individuelle ajax-forespørsler.

jsonp
Type: streng eller boolsk.
Definerer navnet på parameteren som legges til JSONP-forespørsels-url (som standard brukes "callback"). For eksempel blir innstillingen (jsonp:"onJSONPLoad") konvertert til url-delen av strengen "onJSONPLoad=?" . Siden versjon 1.5 hindrer spesifisering av false i denne parameteren å legge til url tilleggsparameter. I dette tilfellet må du angi innstillingsverdien for jsonpCallback. For eksempel: (jsonp:false, jsonpCallback:"callbackName") .

jsonpCallback
Type: streng eller funksjon.
Definerer navnet på funksjonen som skal kalles når serveren svarer på en Jsonp-forespørsel. Som standard genererer jQuery et tilpasset navn for denne funksjonen, som er et foretrukket alternativ som forenkler bibliotekets arbeid. En av grunnene til at det er verdt å påpeke egen funksjonå behandle en jsonp-forespørsel er å forbedre bufring av GET-forespørsler.
Fra og med jQuery-1.5 kan du spesifisere en funksjon i denne parameteren for å håndtere serverresponsen selv. I dette tilfellet må den angitte funksjonen returnere data mottatt fra serveren (i spesifisert funksjon de vil være tilgjengelige i den første parameteren).

metode (standard: "GET")
Type: streng.
Parameteren dukket opp i jQuery-1.9.0 Lar deg spesifisere typen forespørsel til serveren ("POST", "GET", "PUT")

mimeType
Type: streng.
Parameteren dukket opp i jQuery-1.5.1 I dette feltet kan du spesifisere datatypen som svaret fra serveren forventes i i stedet for XHR

passord
Type: streng.
Passord for autentisering på serveren, om nødvendig.

processData (standard sant)
Type: boolsk.
Som standard blir dataene som overføres til serveren konvertert fra et objekt til en spørringsstreng (url-format: fName1=value1&fName2=value2&...) og sendt som "application/x-www-form-urlencoded" . Hvis du trenger å sende et DOM-dokument eller andre data som ikke kan konverteres, setter du alternativet processData til false .

scriptCharset
Type: streng.
Gjelder kun for Ajax GET-forespørsler, kan dataType enten være "jsonp" eller "script". Hvis en server på et tredjepartsdomene bruker en koding som er forskjellig fra din, må du spesifisere kodingen til tredjepartsserveren.

statuskode
Type: objekt.
Parameteren dukket opp i jQuery-1.5.0 Et sett med par der forespørselsutførelseskoder er knyttet til funksjoner som vil bli kalt. For eksempel, for kode 404 (sider finnes ikke), kan du vise en melding på skjermen:

$.ajax(( statusCode: ( 404: function() ( alert("side ikke funnet"); ) ) ));

$. ajax ((

statuskode: (

404 : funksjon () (

varsel ("siden ikke funnet");

} ) ;

Hvis forespørselen var vellykket, vil den anonyme funksjonen som parameter ta de samme parameterne som behandlerfunksjonene for vellykket forespørselsutførelse (spesifisert i suksessparameteren), og i tilfelle feil, de samme parameterne som feilen funksjoner.

suksess(data, tekstStatus, jqXHR)
Type: funksjon, array.
En funksjon som vil bli kalt hvis forespørselen til serveren fullføres. Tar 3 argumenter:

data sendt av serveren og forhåndsbehandlet;
streng med utførelsesstatus (textStatus);
jqXHR-objekt (i versjoner før 1.5 brukes XMLHttpRequest i stedet for jqXHR). Fra og med jQuery 1.5, i stedet for en enkelt funksjon, kan denne parameteren godta en rekke funksjoner.

pause
Type: nummer.
Ventetid på svar fra serveren i millisekunder. Omskriver globale omgivelser samme parameter i $.ajaxSetup(). Hvis denne tiden overskrides, vil forespørselen bli fullført med en feil og det vil oppstå en feilhendelse som vil ha statusen "timeout".
Tiden telles fra øyeblikket $.ajax-funksjonen kalles. Det kan skje at flere andre forespørsler kjører for øyeblikket, og nettleseren vil forsinke utføringen av den gjeldende forespørselen. I dette tilfellet kan tidsavbruddet fullføres, selv om forespørselen faktisk ikke engang er startet ennå.
I jQuery-1.4 og tidligere, når XMLHttpRequest-objektet blir tidsavbrutt, vil det gå inn i en feiltilstand og tilgang til feltene kan gi et unntak. I Firefox 3.0+ vil skript- og JSONP-forespørsler ikke bli avbrutt hvis de får timeout. De vil bli fullført selv etter at denne tiden er utløpt.

tradisjonell
Type: boolsk.
Sett denne parameteren til sann for å bruke tradisjonelle konverteringsalternativer (serialisering).

type (standard: "GET")
Type: streng.
Ligner på metodeparameteren. Parameteren brukes i jQuery tidligere enn 1.9.0

url (standard: gjeldende sideadresse)
Type: streng.
Definerer adressen som forespørselen skal sendes til.

brukernavn
Type: streng.
Brukernavn for å autentisere til serveren, om nødvendig.

xhr (standard: ActiveXObject i IE, XMLHttpRequest i andre nettlesere)
Type: funksjon.
En funksjon som vil gi et XMLHttpRequest-objekt. Som standard er dette objektet ActiveXObject for IE-nettlesere, og i andre tilfeller er det XMLHttpRequest. Med dette alternativet kan du implementere din egen versjon av dette objektet.

xhrFields
Type: objekt.
Parameteren dukket opp i jQuery-1.5.1 Et sett med par (navn: verdi) for å endre/legge til verdiene til de tilsvarende feltene til XMLHttpRequest-objektet. Du kan for eksempel sette egenskapen withCredentials til true når du utfører en forespørsel på tvers av domener:

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

$. ajax ((

url: a_cross_domain_url,

xhrFields:(

withCredentials: sant

} ) ;

Som nevnt ovenfor er $.ajax() den mest grunnleggende metoden, og alle påfølgende metoder er bare innpakninger. Svært ofte er det ikke nødvendig å ringe denne funksjonen, fordi det finnes flere alternativer høy level, slik som , og . De er lettere å forstå og bruke, selv om $.ajax() er en mer fleksibel løsning.

Den enkleste brukssaken ville være å kalle $.ajax() uten å spesifisere parametere:

$. ajax();

Eventbehandlere

Innstillingene beforeSend, error, dataFilter, suksess og komplette lar deg angi hendelsesbehandlere som oppstår i visse øyeblikk utførelse av hver ajax-forespørsel.

beforeSend skjer umiddelbart før forespørselen sendes til serveren;
feil oppstår hvis forespørselen mislykkes;
dataFilter oppstår når data kommer fra serveren. Lar deg behandle "rå" data sendt av serveren;
suksess oppstår hvis forespørselen fullføres;
fullført skjer når forespørselen fullføres.

varsel ("Data sendt vellykket." );

} ) ;

Merk følgende! Innstillingene .success(), .error() og .complete() diskutert ovenfor ble lagt til jQuery-1.5 i tillegg til standardmetodene .done(), .fail() og .then() for det utsatte objektet, som kan brukes til å sette behandlere , men fra og med jQuery-1.8 vil disse tre metodene bli avviklet.

$.ajax()-funksjonen lærer om typen data som sendes av serveren fra selve serveren (via MIME). I tillegg er det mulighet for personlig å angi (avklare) hvordan disse dataene skal tolkes. Dette gjøres ved å bruke dataType-parameteren. Mulige verdier for denne parameteren:

"xml" - det resulterende xml-dokumentet vil være tilgjengelig i tekstform. Du kan jobbe med det ved å bruke standard jQuery-verktøy (så vel som med et html-dokument).
"html" - den resulterende html vil være tilgjengelig i tekstform. Hvis den inneholder skript i tagger, vil de automatisk kjøres bare når html-teksten er plassert i DOM.
"script" - de mottatte dataene vil bli utført som javascript. Variabler som vanligvis inneholder svaret fra serveren vil inneholde et jqXHR-objekt.
"json", "jsonp" - de mottatte dataene vil bli forhåndskonvertert til et javascript-objekt. Hvis parsing mislykkes (noe som kan skje hvis json inneholder feil), vil et unntak for filparsefeil bli kastet. Hvis serveren du får tilgang til er på et annet domene, bør jsonp brukes i stedet for json.
"tekst" - de mottatte dataene vil være tilgjengelige i ren tekst, uten foreløpig behandling.

Som standard gjøres en forespørsel til serveren ved å bruke HTTP GET-metoden. Lag en forespørsel om nødvendig POST metode, må du spesifisere riktig verdi i typeinnstillingen. Data sendt ved hjelp av POST-metoden vil bli konvertert til UTF-8 hvis det er i en annen koding, som kreves av W3C XMLHTTPRequest-standarden.

Dataparameteren kan spesifiseres enten som en streng i formatet nøkkel1=verdi1&nøkkel2=verdi2 (dataoverføringsformat i url), eller som et objekt med et sett med (navn:verdi)-par - (nøkkel1: "verdi1", nøkkel2: "verdi2") . I sistnevnte tilfelle, før sending av data, konverterer jQuery gitt objekt til en streng ved å bruke $.param(). Denne konverteringen kan imidlertid reverseres ved å sette innstillingen for processData til usann. Konvertering til en streng er uønsket, for eksempel ved sending av et xml-objekt til serveren. I dette tilfellet anbefales det å endre contentType-innstillingen

url: "test.php" ,

suksess: funksjon (data) (

varsel ("Data mottatt: " + data );

} ) ;

Sender en forespørsel til serveren uten å laste inn siden på nytt. Dette er en metode på lavt nivå med mange innstillinger. Det ligger til grunn for driften av alle andre ajax-metoder. Har to bruksalternativer:

url — be om adresse.
innstillinger - i denne parameteren kan du angi innstillinger for denne forespørselen. Spesifisert ved hjelp av et objekt i formatet (navn:verdi, navn:verdi...) . Ingen av innstillingene er nødvendige. Du kan angi standardinnstillinger ved å bruke $.ajaxSetup()-metoden.

Liste over innstillinger

↓ navn :type (standardverdi)

Når en forespørsel sendes, indikerer overskriftene de tillatte innholdstypene som forventes fra serveren. Verdiene for disse typene vil bli hentet fra aksepterer parameteren.

Som standard skjer alle forespørsler uten ominnlasting av siden asynkront (det vil si at etter å ha sendt en forespørsel til serveren, slutter ikke siden å fungere mens den venter på svar). Hvis du trenger å utføre forespørselen synkront, sett parameteren til false . Forespørsler på tvers av domener og "jsonp" kan ikke utføres i synkron modus.

Vær oppmerksom på at utføring av forespørsler i synkron modus kan føre til at siden blir blokkert til forespørselen er fullstendig fullført.

Dette feltet inneholder en funksjon som kalles opp umiddelbart før en ajax-forespørsel sendes til serveren. Denne funksjonen kan være nyttig for å endre jqXHR-objektet (i tidligere versjoner av biblioteket (opptil 1.5) brukes XMLHttpRequest i stedet for jqXHR). Du kan for eksempel endre/spesifisere nødvendige overskrifter osv. JqXHR-objektet vil bli sendt til funksjonen som det første argumentet. Det andre argumentet er forespørselsinnstillingene.

I dette feltet kan du angi flere forespørselshoder. Disse endringene vil bli lagt inn før før Send kalles, hvor endelige overskriftsredigeringer kan gjøres.

Når denne innstillingen er satt til true , vil forespørselen bli utført med statusen "vellykket" bare hvis svaret fra serveren er forskjellig fra det forrige svaret. jQuery sjekker dette ved å se på overskriften Last-Modified. Siden jQuery-1.4, i tillegg til Last-Modified, er "etag" også sjekket (begge leveres av serveren og er nødvendige for å varsle nettleseren om at de forespurte dataene fra serveren ikke er endret fra forrige forespørsel) .

Lar deg sette kildestatusen til en side til lokal (som om den var over filprotokollen), selv om jQuery gjenkjente den ellers. Biblioteket bestemmer at siden kjører lokalt når det gjelder følgende protokoller: fil, *-utvidelse og widget.

Det anbefales å stille inn parameterverdien er Lokal globalt - ved å bruke $.ajaxSetup()-funksjonen, og ikke i innstillingene til individuelle ajax-forespørsler.

Definerer navnet på parameteren som legges til url-en under en jsonp-forespørsel (som standard brukes "callback" - "http://siteName.ru?callback=...").

Fra og med jQuery-1.5 vil å sette denne parameteren til false forhindre at en ekstra parameter legges til url-en. I dette tilfellet må du eksplisitt angi verdien til jsonpCallback-egenskapen. For eksempel: (jsonp:false, jsonpCallback:"callbackName") .

Definerer navnet på funksjonen som skal kalles når serveren svarer på en jsonp-forespørsel. Som standard genererer jQuery et tilpasset navn for denne funksjonen, som er et foretrukket alternativ som forenkler bibliotekets arbeid. En av grunnene til å spesifisere din egen jsonp-forespørselsbehandlingsfunksjon er å forbedre bufring av GET-forespørsler.

Fra og med jQuery-1.5 kan du spesifisere en funksjon i denne parameteren for å håndtere serverresponsen selv. I dette tilfellet må den angitte funksjonen returnere data mottatt fra serveren (i den angitte funksjonen vil den være tilgjengelig i den første parameteren).

Som standard blir alle data som sendes til serveren forhåndskonvertert til en streng (url-format: fName1=value1&fName2=value2&...) som tilsvarer "application/x-www-form-urlencoded". Hvis du trenger å sende data som ikke kan utsettes for slik behandling (for eksempel et DOM-dokument), bør du deaktivere alternativet processData.

Denne parameteren brukes for ajax-forespørsler på tvers av domener av GET-typen, datatypen kan enten være "jsonp" eller "script". Definerer kodingen som forespørselen på tvers av domener skal utføres i. Dette er nødvendig hvis en server på et utenlandsk domene bruker en koding som er forskjellig fra kodingen på serveren til det opprinnelige domenet.

(Denne innstillingen ble introdusert i jQuery-1.5) et sett med par der forespørselsutførelseskoder er knyttet til funksjoner som vil bli kalt. For eksempel, for kode 404 (sider finnes ikke), kan du vise en melding på skjermen:

$.ajax (( statusCode: ( 404 : function () ( varsel ( "Siden ikke funnet" ) ; ) ) ) );

Funksjoner som svarer på suksesskoder for forespørsel vil motta de samme argumentene som de vellykkede forespørselsbehandlerfunksjonene (spesifisert i suksessparameteren), og funksjoner som svarer på feilkoder vil være de samme som for feilfunksjoner.

En funksjon som vil bli kalt hvis forespørselen til serveren fullføres. Det vil bli sendt tre parametere: data sendt av serveren og allerede forhåndsbehandlet (som er forskjellig for forskjellige datatyper). Den andre parameteren er en streng med utførelsesstatus. Den tredje parameteren inneholder jqXHR-objektet (i tidligere versjoner av biblioteket (opptil 1.5) brukes XMLHttpRequest i stedet for jqXHR). Fra og med jQuery-1.5, i stedet for en enkelt funksjon, kan denne parameteren akseptere en rekke funksjoner.

Ventetid på svar fra serveren. Sett i millisekunder. Hvis denne tiden overskrides, vil forespørselen bli fullført med en feil og det vil oppstå en feilhendelse (se beskrivelse ovenfor), som får status "timeout".

Tiden telles fra øyeblikket $.ajax-funksjonen kalles. Det kan skje at flere andre forespørsler kjører for øyeblikket, og nettleseren vil forsinke utføringen av den gjeldende forespørselen. I dette tilfellet pause kan fullføres, selv om forespørselen faktisk ikke engang er startet ennå.

I jQuery-1.4 og tidligere, når XMLHttpRequest-objektet blir tidsavbrutt, vil det gå inn i en feiltilstand og tilgang til feltene kan gi et unntak. I Firefox 3.0+ vil skript- og JSONP-forespørsler ikke bli avbrutt hvis de får timeout. De vil bli fullført selv etter at denne tiden er utløpt.

En funksjon som vil gi et XMLHttpRequest-objekt. Som standard er dette objektet ActiveXObject for IE-nettlesere, og i andre tilfeller er det XMLHttpRequest. Med dette alternativet kan du implementere din egen versjon av dette objektet.

(Denne innstillingen ble introdusert i jQuery-1.5.1) Et sett med (navn:verdi) par for å endre/legge til verdiene til de tilsvarende feltene til XMLHttpRequest-objektet. Du kan for eksempel sette egenskapen withCredentials til true når du utfører en forespørsel på tvers av domener:

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

I jQuery-1.5 støttes ikke egenskapen withCredentials av native XMLHttpRequest og vil bli ignorert i en forespørsel på tvers av domener. Dette er fikset i alle påfølgende versjoner av biblioteket.

Eventbehandlere

Innstillingene beforeSend, error, dataFilter, suksess og fullstendige (beskrivelsen deres er i forrige seksjon) lar deg angi hendelsesbehandlere som oppstår på bestemte punkter i utførelsen av hver ajax-forespørsel.

førSend skjer umiddelbart før forespørselen sendes til serveren. feil oppstår når forespørselen mislykkes. datafilter oppstår når data kommer fra serveren. Lar deg behandle "rå" data sendt av serveren. suksess oppstår når forespørselen er fullført. fullstendig oppstår når en forespørsel fullføres.

Enkelt brukseksempel. Vi vil vise en melding når forespørselen er fullført:

$.ajax (( url: "ajax/test.html" , suksess: funksjon () ( varsel ("Lasting ble utført." ) ; ) ) );

Fra og med jQuery-1.5, returnerer $.ajax()-metoden et jqXHR-objekt som blant annet implementerer det utsatte grensesnittet, som lar deg spesifisere flere kjøringsbehandlere. I tillegg til metodene .done(), .fail() og .then() for det utsatte objektet, som du kan installere behandlere med, implementerer jqXHR .success(), .error() og .complete() . Dette gjøres for å overholde de vanlige navnene på metodene som behandlere for å utføre ajax-forespørsler installeres på. Fra og med jQuery-1.8 vil imidlertid disse tre metodene bli avviklet.

Noen forespørselstyper, for eksempel jsonp eller GET-forespørsler på tvers av domener, støtter ikke bruken av XMLHttpRequest-objekter. I dette tilfellet vil XMLHttpRequest og textStatus som sendes til behandlerne inneholde verdien undefined .

Inne i behandlere vil denne variabelen inneholde verdien til parameteren kontekst. I tilfelle det ikke ble satt, vil dette inneholde innstillingsobjektet.

dataType-parameter

"xml"— det resulterende xml-dokumentet vil være tilgjengelig i tekstform. Du kan jobbe med det ved å bruke standard jQuery-verktøy (så vel som med et html-dokument). "html"— den resulterende HTML-en vil være tilgjengelig i tekstform. Hvis den inneholder skript i tagger, vil de automatisk kjøres bare når html-teksten er plassert i DOM. "manus"— de mottatte dataene vil bli utført som javascript. Variabler som vanligvis inneholder svaret fra serveren vil inneholde et jqXHR-objekt. "json", "jsonp"— de mottatte dataene vil bli forhåndskonvertert til et javascript-objekt. Hvis parsing mislykkes (noe som kan skje hvis json inneholder feil), vil et unntak for filparsefeil bli kastet. Hvis serveren du får tilgang til er på et annet domene, bør jsonp brukes i stedet for json. Du kan lære om json og jsonp på Wikipedia. "tekst"— de mottatte dataene vil være tilgjengelige i ren tekst, uten foreløpig behandling.

Merknad 1: Når en forespørsel sendes til et tredjepartsdomene (som bare er mulig med dataType lik jsonp eller script), vil ikke feilbehandlere og globale hendelser utløses.

Notat 2: Datatypen spesifisert i dataType må ikke komme i konflikt med MIME-informasjonen levert av serveren. For eksempel må xml-data representeres av serveren som text/xml eller application/xml . Hvis dette mislykkes, vil jquery prøve å konvertere de mottatte dataene til den spesifiserte typen (mer om dette i delen Konvertere).

Sender data til serveren

Som standard gjøres en forespørsel til serveren ved å bruke HTTP GET-metoden. Hvis du trenger å gjøre en forespørsel ved å bruke POST-metoden, må du spesifisere riktig verdi i typeinnstillingen. Data sendt ved hjelp av POST-metoden vil bli konvertert til UTF-8 hvis det er i en annen koding, som kreves av W3C XMLHTTPRequest-standarden.

Dataparameteren kan spesifiseres enten som en streng i formatet nøkkel1=verdi1&nøkkel2=verdi2 (dataoverføringsformat i url), eller som et objekt med et sett med (navn:verdi)-par - (nøkkel1: "verdi1", nøkkel2: "verdi2") . I det siste tilfellet, før dataene sendes, konverterer jQuery det gitte objektet til en streng ved å bruke $.param() . Denne konverteringen kan imidlertid reverseres ved å sette processData-innstillingen til false . Konvertering til en streng er uønsket, for eksempel ved sending av et xml-objekt til serveren. I dette tilfellet er det tilrådelig å endre contentType-innstillingen fra application/x-www-form-urlencoded til en mer passende mimetype.

Kommentar: De fleste nettlesere tillater ikke Ajax-forespørsler om ressurser med andre domener, underdomener og protokoller enn den gjeldende. Denne begrensningen gjelder imidlertid ikke for jsonp- og skriptforespørsler.

Mottar data fra serveren

Dataene som mottas fra serveren kan leveres som en streng eller et objekt, avhengig av verdien til dataType-parameteren (se dataType ovenfor). Disse dataene er alltid tilgjengelige i den første parameteren til ajax-forespørselsutførelsesbehandleren:

$.ajax (( url: "some.php" , suksess: funksjon (data) ( alert ( "Profit data: " + data ) ; ) ) );

For tekst- og xml-typer vil dataene som sendes av serveren også være tilgjengelige i jqXHR, nemlig i henholdsvis responsText- eller responseXML-feltene.

Avanserte innstillinger

Ved å bruke den globale parameteren kan du deaktivere kjøringen av hendelsesbehandlere (.ajaxSend(), .ajaxError() osv.) for individuelle forespørsler. Dette kan for eksempel være nyttig hvis lasting av animasjon startes/stoppes i disse behandlerne. Så hvis noen forespørsler utføres veldig ofte og raskt, vil det være nyttig for dem å deaktivere utførelsen av behandlere. For skript på tvers av domener og jsonp-forespørsler deaktiveres den globale parameteren automatisk.

Hvis autentiseringsdata (pålogging/passord) kreves for å sende en forespørsel til serveren, kan du spesifisere det i brukernavn- og passordinnstillingene for ajax-forespørselen.

Det kreves for å utføre en forespørsel til serveren Viss tid. Hvis serveren ikke sender et svar i løpet av denne tiden, avsluttes forespørselen med en feil (status "timeout"). Ventetiden for svar fra serveren kan endres ved å angi ønsket verdi (i millisekunder) i tidsavbruddsinnstillingen.

Det kan hende at vertskodingen er forskjellig fra kodingen til javascript-filen som ble bedt om i ajax-forespørselen. I slike tilfeller er det nødvendig å spesifisere kodingen av sistnevnte i scriptCharset-innstillingen.

I de fleste tilfeller skjer Ajax-forespørselen asynkront, men i noen tilfeller kan det være nødvendig å utføre forespørselen sekvensielt (når videre kjøring av skriptet er umulig uten å motta et svar fra serveren). Du kan gjøre forespørselen synkron hvis du deaktiverer asynkroniseringsinnstillingen. Det er imidlertid verdt å huske at i dette tilfellet vil siden fryse mens den venter på svar fra serveren.

Eksempler på bruk

Den enkleste brukssaken ville være å kalle $.ajax() uten å spesifisere parametere:

$.ajax(); // en GET-forespørsel vil bli sendt til serveren til URL-en til gjeldende side uten å spesifisere noen parametere.

Hvis du trenger å laste og kjøre en js-fil, kan du gjøre det slik:

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

La oss sende en POST-forespørsel til serveren, spesifisere to parametere og varsle brukeren om den fullførte forespørselen:

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

La oss oppdatere innholdet på ønsket HTML-side:

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

La oss gjøre det synkron forespørsel til serveren. Mens forespørselen utføres, vil ikke siden svare på brukerhandlinger:

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

Som en parameter vil vi sende et xml-objekt til serveren. For å overføre den riktig, må du avbryte den foreløpige konverteringen av parametere (processData:false). Vi vil spesifisere den tilpassede funksjonen handleResponse som en behandler for vellykket gjennomføring av en forespørsel:

var xmlDocument = [opprett xml-dokument] ; $.ajax (( url: "page.php" , processData: false , data: xmlDocument, suksess: handleResponse ) );

Avansert tilnærming

Fra og med jQuery-1.5 er det tre nye retninger som lar deg bruke $.ajax() enda dypere. Den første av dem (Prefilters) lar deg utføre ytterligere manipulasjoner umiddelbart før du sender forespørselen. Med den andre tilnærmingen (konverterere), kan du fortelle jQuery hvordan du konverterer data mottatt fra serveren hvis det ikke samsvarer med det forventede formatet. Den tredje tilnærmingen (Transport) er det laveste nivået; den lar deg organisere en forespørsel til serveren uavhengig.

Forfiltre

Denne tilnærmingen består i å sette opp en behandler som kalles opp før hver ajax-forespørsel gjøres. Denne behandleren går før kjøringen av andre ajax-behandlere. Den er installert ved hjelp av funksjonen $.ajaxPrefilter():

$.ajaxPrefilter (funksjon (alternativer, originalOptions, jqXHR) ( ) );

Hvor
alternativer– innstillinger for gjeldende forespørsel,
originalOptions- standard instillinger,
jqXHR— jqXHR objekt for denne forespørselen.

Forfiltre er praktisk for å håndtere egendefinerte innstillinger (det vil si nye innstillinger som er ukjente for biblioteket spesifisert i forespørselen). Du kan for eksempel angi din egen innstilling abortOnRetry , som, når den er aktivert, vil tilbakestille ventende forespørsler hvis følgende forespørsel mottas på samme url:

var currentRequests = ( ) ; $.ajaxPrefilter (funksjon (options, originalOptions, jqXHR) ( if (options.abortOnRetry) ( if (currentRequests[ options.url ]) ( currentRequests[ options.url ] .abort () ; ) currentRequests[ options.url ] = jqXHR ;) ) ) ;

Det er praktisk å behandle og eksisterende innstillinger. For eksempel, dette er hvordan du kan endre en forespørsel på tvers av domener til en omdirigert gjennom domeneserveren din:

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

I tillegg kan du spesifisere dataType-verdiene som forfilteret skal fungere på. Så, for eksempel, kan du spesifisere json- og skripttyper:

$.ajaxPrefilter ( "json script" , funksjon (alternativer, originalOptions, jqXHR) ( // Endre alternativer, sjekk grunnleggende innstillinger(originalOptions) og jqXHR-objekt) );

Til slutt kan du endre dataType-verdien for å returnere ønsket verdi:

$.ajaxPrefilter (function (options) ( // endre dataType til script hvis url oppfyller visse betingelser if (isActuallyScript(options.url) ) ( return "script" ; ) );

Denne tilnærmingen garanterer ikke bare at forespørselen vil endre sin type til script, men også at andre prefilter-behandlere som spesifiserer denne typen i den første parameteren også vil bli utført.

Omformere

Dette prinsippet består i å installere en behandler som vil fungere hvis datatypen angitt i innstillingene ikke samsvarer med datatypen sendt av serveren.

Converters er en ajax-innstilling, så kan settes globalt:

// på denne måten kan du angi en behandler som vil fungere hvis, i stedet for // typen mydatatype du spesifiserte i dataType, data av typen tekst mottas $.ajaxSetup (( converters: ( "text mydatatype" : function ( textValue ) ( if (valid( textValue ) ) ( // behandler den overførte teksten returner mydatatypeValue; ) else ( // hvis dataene som sendes av serveren ikke samsvarer med det som er forventet, // kan du kaste et unntak. throw exceptionObject; ) ) ) ) ;

Konvertere vil hjelpe deg når du introduserer din egen (egendefinerte) datatype. Det er viktig å merke seg at navnet på en slik datatype kun skal brukes små bokstaver! En forespørsel om datatypen "mydatatype" nevnt ovenfor kan se slik ut:

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

Returnerer: jqXHR

Utfører en asynkron HTTP-forespørsel (Ajax).

versjon lagt til: 1.5 jQuery.ajax(url [, innstillinger])
url
Type: String
URL som Ajax-forespørselen vil bli sendt til

innstillinger
Type: Objekt
Et sett med nøkkel-/verdiparametere som konfigurerer en Ajax-forespørsel. Alle innstillinger er valgfrie. Som standard er innstillingene hentet fra . Nedenfor er full liste alle innstillinger.
versjon lagt til: 1.0 jQuery.ajax(innstillinger)
innstillinger
Type: Objekt
Et sett med nøkkel-/verdiparametere som konfigurerer en Ajax-forespørsel. Alle innstillinger er valgfrie. Som standard er innstillingene hentet fra .

innstillinger:

Innstillinger	Data-type
godtar Standard: Avhenger av datatype Når du sender en Ajax-forespørsel, indikerer overskriftene de tillatte innholdstypene som forventes fra serveren. Verdiene for disse typene vil bli hentet fra aksepterer parameteren. Hvis du trenger å endre det, er det bedre å gjøre det ved å bruke $.ajaxSetup()-metoden.	en gjenstand
asynkron Standard: sant Som standard sendes alle forespørsler asynkront (verdien til denne parameteren er sann). Hvis du trenger synkrone forespørsler, setter du async-parameteren til false. Forespørsler på tvers av domener og dataType: "jsonp" kjøres ikke synkront. Vær oppmerksom på at synkrone forespørsler kan blokkere nettleseren mens forespørselen utføres.	logisk
førSend(jqXHR jqXHR, innstillingsobjekt) En funksjon som kalles opp umiddelbart før en ajax-forespørsel sendes til serveren. Den kan brukes til å endre et jqXHR-objekt (i tidligere versjoner, før jQuery 1.4.x, XMLHttpRequest ble brukt). Kan også brukes til å endre overskrifter osv. Et objekt av typen jqXHR og et innstillingsobjekt sendes som argumenter. Hvis du returnerer false i beforeSend-funksjonen, vil ajax-forespørselen bli kansellert. Siden jQuery 1.5, vil beforeSend utløses uavhengig av forespørselstype.	funksjon
cache Standard: true , usant for datatypene "script" og "jsonp". Hvis den er falsk, vil ikke den forespurte siden bufres av nettleseren.	logisk
komplett(jqXHR jqXHR, strengtekstStatus) En funksjon som vil bli kalt etter fullføringen av ajax-forespørselen (utløses etter suksess- og feilbehandlerfunksjonene). Funksjonen tar to argumenter: et objekt av typen jqXHR (i tidligere versjoner, før jQuery 1.4.x, XMLHttpRequest ble brukt) og en streng som karakteriserer statusen til forespørselen ("suksess", "ikke modifisert", "feil", "tidsavbrudd" ", "avbryt" eller " parsererror"). Fra og med jQuery 1.5 kan complete godta en rekke funksjoner.	funksjon eller array
innhold Parameteren er spesifisert i formatet (streng:regulært uttrykk) og bestemmer hvordan jQuery vil analysere svaret fra serveren, avhengig av typen. (lagt til i versjon 1.5)	en gjenstand
innholdstype Standard: "application/x-www-form-urlencoded; charset=UTF-8" Når du sender en Ajax-forespørsel, overføres dataene i den formen som er spesifisert i denne parameteren. Standard er "application/x-www-form-urlencoded; charset=UTF-8". Hvis du angir verdien selv, vil den bli sendt til serveren. Hvis kodingen ikke er spesifisert, brukes standardkodingen satt på serveren.	linje
kontekst Objektet som blir konteksten etter at forespørselen er fullført (verdien som sendes til denne variabelen). For eksempel, hvis du spesifiserer et DOM-element som en kontekst, vil alle ajax-forespørselsbehandlere også bli utført i konteksten til dette DOM-elementet. I dette eksemplet vil dette nøkkelordet inneholde document.body: $.ajax(( url: "test.html", kontekst: document.body, suksess: function())( $(this).addClass("ferdig"); ) ));	en gjenstand
omformere Standard: ("*text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML) Bestemmer hvilke funksjoner som skal brukes til å konvertere verdier fra en type til en annen. (lagt til i versjon 1.5)	en gjenstand
kryssdomene Standard: usann for samme domene, sant for søk på tvers av domener. Hvis du vil utføre en forespørsel på tvers av domener (for eksempel JSONP) på samme domene, setter du innstillingen på tvers av domene til sann. Dette tillater for eksempel serveromadressering til et annet domene. (lagt til i versjon 1.5)	logisk
data Data som vil bli overført til serveren. Hvis dataene ikke er en streng, konverteres de til en spørringsstreng. For GET-forespørsler er data vedlagt URL-en. Et objekt må bestå av nøkkel/verdi-par. Hvis verdien er en matrise, bestiller jQuery verdiene avhengig av den tradisjonelle innstillingen. Som standard blir for eksempel (foo:["bar1", "bar2"]) &foo=bar1&foo=bar2 .	objekt eller streng
dataFilter(strengdata, strengtype) En funksjon som vil bli brukt til å behandle rådata av typen XMLHttpRequest mottatt fra serveren. Din funksjon skal fungere som et filter og returnere den rensede strengen. To parametere sendes til funksjonen: de mottatte dataene og verdien til dataType-parameteren.	funksjon
data-type Standard: automatisk oppdaget streng (xml, json, script eller html) Typen data som forventes fra serveren. Hvis alternativet ikke er spesifisert, vil jQuery prøve å bestemme typen basert på MIME-typen til svaret.	linje
error(jqXHR jqXHR, string textStatus, string errorThrown) En funksjon som utføres hvis forespørselen mislykkes. Tar 3 argumenter: et jqXHR-objekt (tidligere XMLHttpRequest), en streng som beskriver feilen, og en unntaksstreng hvis den ble kastet. Det andre argumentet kan inneholde følgende verdier: null, "timeout", "error", "abort" og "parsererror". I tilfelle det skjer HTTP-feil, vil tekststatusen skrives til det tredje argumentet. For eksempel "Ikke funnet" eller " Intern server Feil." Fra og med jQuery 1.5, i stedet for en enkelt funksjon, kan denne parameteren akseptere en rekke funksjoner. Feilhendelsen oppstår ikke når dataType er lik script eller JSONP.	funksjon eller array
global Standard: sant. Hvorvidt man skal ringe globale Ajax hendelsesbehandlere for denne forespørselen (som ajaxStart eller ajaxStop).	logisk
overskrifter Standard: () Her kan du spesifisere ytterligere forespørselshoder. Verdiene for denne innstillingen vil bli lagt inn før før Send-funksjonen kalles opp, hvor endelige endringer i overskriftene kan gjøres. (lagt til i versjon 1.5)	en gjenstand
ifModified Standard: usant Forespørselen vil kun anses som vellykket hvis svardataene har endret seg siden siste forespørsel. Kontrollen utføres ved å bruke overskriften Last-Modified. Som standard, dette alternativet funksjonshemmet. I jQuery 1.4 blir "etag"-verdien også sjekket for å spore om dataene har endret seg.	logisk
er Lokal Standard: avhengig av gjeldende plassering Parameteren bestemmer om nettsiden kjører lokalt (for eksempel ved å bruke filen, *-utvidelsen og widget-protokollen) eller ikke (for eksempel ved å bruke http-protokoll). Denne innstillingen det er bedre å endre ved å bruke $.ajaxSetup()-metoden. (lagt til i versjon 1.5)	logisk
jsonp Definerer navnet på parameteren som legges til JSONP request url (som standard brukes "callback"). For eksempel blir innstillingen (jsonp:"onJSONPLoad") konvertert til url-delen av strengen "onJSONPLoad=?". Siden versjon 1.5 hindrer spesifisering av false i denne parameteren å legge til en ekstra parameter til url-en. I dette tilfellet må du angi innstillingsverdien for jsonpCallback. For eksempel: (jsonp:false, jsonpCallback:"callbackName").	linje
jsonpCallback En funksjon som blir kalt når serveren svarer på en JSONP-forespørsel. Som standard genererer jQuery vilkårlig unikt navn denne funksjonen, som er å foretrekke. Hvis du ønsker å bruke caching av GET-forespørsler, så skriv inn navnet på funksjonen selv. Fra og med versjon 1.5 kan du spesifisere en funksjon for å behandle serversvaret selv.	streng eller funksjon
mimeType Her kan du spesifisere datatypen som svaret forventes fra serveren i stedet for XHR. (lagt til i versjon 1.5.1)	linje
passord Passord som skal brukes som svar på forespørselen om HTTP-tilgangsautentisering (hvis nødvendig)	linje
brukernavn Brukernavnet som vil bli brukt som svar på forespørselen om HTTP-tilgangsautentisering (hvis nødvendig)	linje
prosessdata Standard: sant ; Som standard konverteres data som sendes til serveren fra et objekt til en spørringsstreng og sendes som "application/x-www-form-urlencoded". Hvis du trenger å sende et DOM-dokument eller andre data som ikke kan konverteres, setter du alternativet processData til false.	logisk
scriptCharset Gjelder bare for Ajax GET-forespørsler av typene "JSONP" og "script". Hvis en server på et tredjepartsdomene bruker en koding som er forskjellig fra din, må du spesifisere kodingen til tredjepartsserveren.	linje
statuskode Standard: () Et sett med par der forespørselsutførelseskoder er knyttet til funksjoner som vil bli kalt. For eksempel, for kode 404 (sider finnes ikke), kan du vise en melding på skjermen: $.ajax(( statusCode:( 404:function())( alert("Siden ikke funnet"); ) ) )); Hvis forespørselen var vellykket, vil den anonyme funksjonen som parameter ta de samme parameterne som for suksess. Hvis det er en feil, vil det ta det samme som med feilbehandlerfunksjonen. (lagt til i versjon 1.5)	en gjenstand
suksess(dataobjekt, tekstStatus-streng, jqXHR-objekt) En funksjon som vil bli kalt hvis forespørselen fullføres. Tar 3 argumenter - data sendt av serveren og forhåndsbehandlet; streng med utførelsesstatus (textStatus); jqXHR-objekt (i versjoner før 1.5 brukes XMLHttpRequest i stedet for jqXHR). Fra og med jQuery 1.5, i stedet for en enkelt funksjon, kan denne parameteren godta en rekke funksjoner.	funksjon eller array
pause Ventetid på svar fra serveren i millisekunder. Overskriver den globale innstillingen til samme parameter i $.ajaxSetup(). Hvis denne tiden overskrides, vil forespørselen mislykkes og en feilhendelse vil oppstå med statusen "timeout".	Antall
tradisjonell Standard: usant Sett denne parameteren til sann for å bruke den tradisjonelle serialiseringsstilen.	logisk
type Standard: GET Bestemmer om forespørselen er GET eller POST. Du kan også bruke andre HTTP-forespørsler (som PUT eller DELETE), men vær oppmerksom på at ikke alle nettlesere støtter dem.	linje
url Standard: gjeldende side. Siden som forespørselen sendes til.	linje
xhr Som standard ActiveXObject i IE, XMLHttpRequest i andre nettlesere. Tilbakeringingsfunksjon for å lage et XMLHttpRequest-objekt. Ved å lage din funksjon tar du det fulle ansvaret for å lage objektet.	funksjon
xhrFields Et objekt av formen (navn:verdi) for å endre verdiene til de tilsvarende feltene til XMLHttpRequest-objektet. $.ajax(( url: a_cross_domain_url, xhrFields: ( withCredentials: true ) )); (lagt til i versjon 1.5.1)	kart

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

Få det siste HTML-versjon sider

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

Vi gir det videre som XML-data dokument. Vi deaktiverer automatisk konvertering av data til en vanlig streng ved å sette processData-innstillingen til false:

Var xmlDocument = ; 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ørsel mislyktes: " + tekstStatus); ));

Last ned og utfør JavaScript-fil:

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

Denne artikkelen beskriver AJAX på funksjons- og eksempelnivå. Funksjonene ved asynkron interaksjon og eksempler på bruk vurderes, men med et minimum av tekniske detaljer.

Jeg håper det vil være nyttig for å forstå hva AJAX er og hva det brukes til.

Hva er AJAX? Eksempelimplementering.

AJAX, eller lenger, EN synkron J avascript EN nd X ml er en teknologi for å samhandle med serveren uten å laste inn sider på nytt.

På grunn av dette reduseres responstiden og webapplikasjonen minner mer om en desktop når det gjelder interaktivitet.

AJAX-teknologi, som den første bokstaven A i navnet indikerer, er asynkron, det vil si at nettleseren, etter å ha sendt en forespørsel, kan gjøre hva som helst, for eksempel vise en melding
om å vente på svar, bla på siden osv.

Her er knappekoden i eksemplet ovenfor:

Når den klikkes, kaller den opp stemmefunksjonen, som sender en forespørsel til serveren, venter på svar og viser deretter en melding om det i div under knappen:

Serversvaret vil være her

For å utveksle data med serveren brukes et spesielt XmlHttpRequest-objekt, som kan sende en forespørsel og motta et svar fra serveren. Du kan lage et slikt objekt på tvers av nettlesere, for eksempel slik:

Funksjon 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 lese mer om detaljene rundt implementering av AJAX ved bruk av XmlHttpRequest og andre transporter i avsnittet om kommunikasjon med serveren.

Vi vil ikke dvele ved dette her og gå rett til stemmefunksjonen:

// javascript stemmekode fra eksempelfunksjonen vote() ( // (1) opprette et objekt for en forespørsel til serveren var req = getXmlHttp() // (2) // span ved siden av knappen // den vil vise utførelsesfremdriften var statusElem = document.getElementById("vote_status") req.onreadystatechange = function() ( // onreadystatechange aktiveres når serversvaret mottas if (req.readyState == 4) ( // hvis forespørselen er fullført utfører statusElem.innerHTML = req.statusText / / vis status (Ikke funnet, OK..) if(req.status == 200) ( // hvis statusen er 200 (OK) - gi et svar på brukervarselet(" Serversvar: "+req.responseText); ) // her kan du legge til annet med forespørselsfeilhåndtering ) ) // (3) angi tilkoblingsadressen req.open("GET", "/ajax_intro/vote.php", true); // forespørselsobjektet er forberedt: adressen er spesifisert og onreadystatechange-funksjonen opprettes / / for å behandle serversvaret // (4) req.send(null); // send forespørselen // (5) statusElem.innerHTML = "Venter på serversvar..." )

Gjennomføringsflyten som brukes ved avstemning er ganske typisk og ser slik ut:

Funksjonen lager et XmlHttpRequest-objekt

tilordner serverresponsbehandleren til onreadystatechange

åpner forbindelse åpen

sender en forespørsel ved å bruke sendeanropet (serversvaret mottas av onreadystatechange-funksjonen, som utløses asynkront)

viser den besøkende en prosessstatusindikator

Serverbehandleren som AJAX-forespørselen er adressert til (i eksemplet er dette vote.php) er i hovedsak ikke forskjellig fra vanlig side. AJAX-forespørselen sendt av XmlHttpRequest er ikke forskjellig fra en vanlig forespørsel.

Det er bare at teksten som serveren returnerer ikke vises som HTML, men leses og behandles av onreadystatechange-funksjonen.

Meningen med AJAX er å integrere teknologier

AJAX-teknologien bruker en kombinasjon av:

(X)HTML, CSS for presentasjon og styling av informasjon
DOM-modell, operasjoner som utføres av javascript på klientsiden for å gi dynamisk visning og interaksjon med informasjon
XMLHttpRequest for asynkron kommunikasjon med en webserver. I noen AJAX-rammeverk og i noen situasjoner brukes en IFrame, SCRIPT-tag eller annen lignende transport i stedet for XMLHttpRequest.
JSON brukes ofte til datautveksling, men alle formater vil fungere, inkludert rik HTML, tekst, XML og til og med noen EBML

En typisk AJAX-applikasjon består av minst to deler.

Den første kjører i nettleseren og er vanligvis skrevet i JavaScript, og den andre er på serveren og er skrevet for eksempel i Ruby, Java eller PHP.

Data utveksles mellom disse to delene via XMLHttpRequest (eller annen transport).

Hva kan jeg gjøre med AJAX?

Poenget med AJAX er interaktivitet og rask responstid.

Små kontroller

Først av alt er AJAX nyttig for små elementer knyttet til grunnleggende handlinger: legg til i handlekurven, abonner, etc.

Dynamisk lasting av data fra serveren.

For eksempel et tre hvis noder lastes når de utvides.

På det tidspunktet det dukket opp, var det den eneste åpne postvesen bruker AJAX for følgende funksjoner.

Sjekker inndatafeil FØR innsending
Brukernavnet sendes til serveren, og resultatet av kontrollen returneres til siden.
"Øyeblikkelig" nedlasting
Nettleseren kontakter kun serveren for data, i stedet for å oppdatere hele det tungvinte grensesnittet
Automatisk "levering" av brev til åpen mappe
Fra tid til annen sendes en forespørsel til serveren og hvis det kommer nye brev, dukker de opp i nettleseren.
Autofullføring
Det er nok å skrive inn de første bokstavene i mottakerens navn, og resten fullføres automatisk, som i skrivebordsapplikasjoner.

Resultat: utbredt popularitet, stor etterspørsel etter kontoer siden åpning.

Synkron modell VS Asynkron modell

I konvensjonell programmering er alle operasjoner synkrone, det vil si at de utføres etter hverandre.

Relativt sett opptrer vi slik:

kaste en fiskestang

venter på at den skal bite

bit - slå på spinnestangstrammingen

Med den asynkrone tilnærmingen:

vi henger en spesiell bittdetektor på fiskestanga, ber den trekke i spinnestangen når den biter

kaste en fiskestang

vi gjør andre ting

bittdetektoren utløses, og utløser tilbaketrekkingen av spinnestangen

Det vil si at i det synkrone tilfellet tiltrekker fiskestanga hele tiden vår oppmerksomhet. Å fange fisk er en sekvensiell prosess.

I den asynkrone versjonen satte vi først programmet for hva vi skulle gjøre ved biting, og senket så fiskestanga for å fange og gikk til andre ting.
For eksempel installerte vi 5 slike fiskestenger til.

Asynkron programmering er vanskeligere enn synkron programmering, og til å begynne med er det uvanlig, fordi det på forhånd hva som vil fungere er gitt etter.
Det vil si at programmet «hva du skal gjøre når den biter» må stilles inn før bittet inntreffer, og det er generelt ukjent om det er fisk i reservoaret.

Det finnes teknikker som gjør asynkron programmering enklere, for eksempel Deferred-objektet (Twisted, Dojo, Mochikit), men dette vil bli diskutert i en egen artikkel.

Synkron og asynkron modell i AJAX

La oss gå tilbake til sauene våre: nettleseren, serveren og for eksempel databasen.

I den synkrone modellen sender nettleseren en forespørsel til serveren og henger og venter på at den skal fullføre alt. nødvendig arbeid. Serveren utfører spørringer til databasen, pakker svaret i det nødvendige formatet og sender det ut. Nettleser. Etter å ha mottatt svaret, kaller den opp showfunksjonen.

Alle prosesser utføres sekvensielt, en etter en.

Nettverksforsinkelser er inkludert i ventetiden, angitt i grått i diagrammet.

Brukeren kan ikke gjøre noe annet på samme side mens synkrone data utveksles.

I den asynkrone modellen sendes forespørselen ("beten er satt"), og du kan gå videre til noe annet. Når forespørselen er fullført ("becked") - lanseres den på forhånd
en funksjon utarbeidet av programmereren ("trekk opp spinnestangen") for å vise en servermelding.

Her gir serveren umiddelbart beskjed til nettleseren om at forespørselen er akseptert for behandling og frigir den for videre arbeid. Når svaret er klart, vil serveren videresende det, og den tilsvarende visningsfunksjonen kalles opp på nettleseren, men mens dette svaret blir generert og sendt, er nettleseren gratis.

Brukeren kan skrive kommentarer, fylle ut og sende inn skjema osv.: Nye asynkrone forespørsler kan gjøres.

Den asynkrone modellen er preget av en nesten øyeblikkelig respons på brukerhandlinger, slik at applikasjonen føles praktisk og rask.

På grunn av dette gapet mellom handlingen og det faktiske resultatet, blir applikasjonen mye mer utsatt for feil.

Spesielt i tilfelle av flere samtidige asynkrone forespørsler, må du ta vare på rekkefølgen for utførelse og respons (race-betingelser) og, i tilfelle feil, la programmet være i en konsistent tilstand.

Funksjoner av den asynkrone modellen

Vanskelig å gjennomføre
- Utilstrekkelige nettleserfunksjoner (javascript)
- Den asynkrone modellen er vanskeligere å feilsøke
Løpsforhold
- Udefinert utførelsessekvens
- Du kan gjøre mange samtidige oppgaver ("fiskestenger"), men oppgaven som ble startet først, kan ende sist.
Reaksjonen er umiddelbar, men det er ukjent hva resultatet blir. Feilhåndtering er mer komplisert
- Kommunikasjonsfeil - frakobling osv.
- Brukerfeil - for eksempel var det ikke nok privilegier
Integritetskontroll (feilsikker)
- For eksempel sendte redaktøren asynkron forespørselå fjerne en tregren. Legging til det må være deaktivert til serversvaret kommer. Hvis det plutselig ikke var nok privilegier, mislyktes operasjonen.
Interaktivitet
Rask grensesnitt

Det er bare to fordeler, men hvilke fordeler! Spillet er verdt lyset.

Asynkron drag"n"drop.

Noen ganger for asynkrone operasjoner det er nødvendig å gjøre forskjellige "finter med ørene." For eksempel vil du gjøre en drag"n"drop i et tre, det vil si å dra artikler fra en seksjon til en annen med musen, og slik at de endrer overordnet på serveren i databasen.

Dra "n" slipp - dette er "tok museobjektet - legg det der det skal - ferdig." Men i den asynkrone modellen kan ikke alt være "klart" med en gang.
Du må sjekke privilegiene på serveren, sjekke om objektet fortsatt eksisterer, i tilfelle en annen bruker slettet det.

Vi må på en eller annen måte vise at prosessen har startet, men resultatet blir "hva som vil skje...". Men som? I den asynkrone modellen kan ikke musepekeren bare sveve over et objekt og bli til en klokke.

I dette tilfellet bruker de enten synkrone forespørsler til serveren – og da fryser virkelig alt, eller den opprinnelige løsningen er å sette objektet som om det var overført og informere med et animert ikon om at et svar venter.
Hvis svaret er negativt, overfører responsbehandleren objektet tilbake.

Foreldet kontekst, utdatert kontekst

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

Web er et flerbrukermiljø. Hvis det brukes til navigasjon,
La oss si et tre med artikler, så jobber mange med det. En av dem kan slette en tregren som den andre jobber med: konflikt.

Som regel brukes følgende midler for å overvinne slike hendelser:

Redigeringspolicy

Dette er når alle vet hvem som gjør hva, og på nivået for maktfordeling og personlig kommunikasjon avtales slike slettinger. Dette alternativet er åpenbart utrygt, men fungerer vanligvis.

Låsing og/eller versjonskontroll

Låsing - blokkering av redigerte dokumenter.

Versjonskontroll – alle nytt dokument blir en versjon slik at endringer aldri går tapt. Versjonsbehandling medfører konflikter da Petya begynte å redigere dokumentet før Vasya, og lagret det senere. Samtidig, i siste versjon Vasyas endringer gikk tapt, selv om den nest siste (Vasyas) versjon definitivt er i systemet.

Du kan lese mer om låsing og versjonskontroll for eksempel i dokumentasjonen til Subversion versjonskontrollsystem.

Automatisk kontekstoppdatering

Problemet med utdatert innhold kan løses 99 % med umiddelbar automatisk oppdatering.

Nettleseren opprettholder en konstant forbindelse med serveren (eller gjør korrigerende forespørsler fra tid til annen) - og nødvendige endringer sendes via denne kanalen.

Noen ganger lastes for eksempel nye artikler inn i en åpen tregren, og noen ganger lastes nye brev inn i et åpent e-postgrensesnitt.

Generelt er problemet med utdatert kontekst direkte knyttet til problemet med dataintegritet. Uansett er serveren ansvarlig for den endelige integritetskontrollen, som med skjemavalidering.

En leksjon der enkle eksempler La oss se på hvordan du jobber med AJAX-teknologi, nemlig hvordan du bruker XMLHttpRequest-objektet (XHR for kort) for å lage synkrone HTTP-forespørsler til serveren og motta svar fra den.

La oss begynne vår introduksjon til AJAX-teknologi ved å se på et eksempel (for nybegynnere) som vil be om informasjon fra serveren gjennom en synkron forespørsel.

En synkron forespørsel, i motsetning til en asynkron, fryser nettsiden etter at den er sendt og før svaret mottas, dvs. gjør den utilgjengelig for brukeren. Synkrone forespørsler brukes ganske sjelden på nettsteder, men det er bedre for nybegynnere å lære AJAX-teknologi med dem.

Før vi går videre til å lage et eksempel, la oss se på hovedtrinnene som er involvert i å utvikle et fragment av en side som fungerer i samsvar med AJAX-teknologi. I dette tilfellet utføres alle handlinger hovedsakelig i JavaScript-kode etter forekomsten av en hendelse på siden (brukeren klikket på en knapp osv.) og består av følgende stadier:

Hente noe informasjon (data) fra en side eller et skjema (om nødvendig)

Sender en forespørsel til webserveren

Mottar svar fra webserveren

Vis resultater på siden hvis svaret var vellykket.

Grunnleggende om å lage synkrone AJAX-forespørsler Eksempel 1: Lage en synkron AJAX-forespørsel

La oss se på et eksempel på å utføre en synkron AJAX-forespørsel til serveren ved å bruke XMLHttpRequest-metoden. I dette eksemplet vil vi be om dataene som ligger i data.txt-filen på serveren og vise dem på siden i span-elementet.

Eksemplet vil bestå av filene index.html , script.js og data.txt , som kan plasseres på serveren i samme katalog for enkelhets skyld.

La oss starte utviklingen ved å lage en HTML-side som vi kobler script.js-filen til. Denne filen, eller rettere sagt innholdet, vil gjøre alt hovedarbeidet. Men før vi går videre til utviklingen, la oss lage div og span-elementer på siden. div-elementet vil fungere som en knapp, som når den klikkes vil utføre en AJAX-forespørsel. Og span-elementet vil fungere som en beholder som vil inneholde svaret som kommer fra serveren.

I tillegg vil vi legge til flere på siden CSS-stilerå pynte den litt. Som et resultat bør vi ha følgende HTML-kode:

JavaScript AJAX#myDiv ( høyde: 30px; bredde: 100px; bakgrunnsfarge: lysegrønn; )

Svar (AJAX):

Deretter åpner du data.txt-filen og skriver inn teksten "Hei, verden!" i den. La oss lagre og lukke filen.

Til slutt, la oss gå videre til å lage script.js-filen. Innholdet i denne filen vil utføre alle de grunnleggende handlingene, dvs. send en ajax-forespørsel til serveren, motta et svar fra serveren og oppdater sideinnholdet (plasser svaret i span-elementet).

Vurder å lage denne filen steg for steg:

JavaScript AJAX

Klikk på den lysegrønne blokken og motta svar fra serveren "Eksempel, verden!"

Svar (AJAX):

// få elementet som har id="myDiv" var myDiv = document.getElementById("myDiv"); // abonner på klikkhendelsen til dette elementet myDiv.addEventListener("klikk", funksjon() ( // opprett et XMLHttpRequest-objekt var request = new XMLHttpRequest(); // konfigurer forespørselen: GET - metode, data.txt - URL som forespørselen vil bli sendt til, false - synkron forespørsel request.open("GET","data.txt",false); // send data til serveren ved å bruke sendemetoden request.send(); // hvis svarstatusen er 200 (OK ) så if (request.status==200) ( // vis serversvaret i elementet som har id="answer" document.getElementById("answer").innerHTML = request.responseText ;)))

Hei Verden!

Eksempel 2: Behandling av en synkron AJAX-forespørsel på serveren ved hjelp av PHP

Et eksempel som vil AJAX-teknologier send en forespørsel som inneholder en parameter til serveren og vis svaret på siden.

I dette eksemplet vil siden bestå av 3 knapper. Den første knappen vil ha tekst 1, den andre knappen tekst 2 og den tredje knappen tekst 3. Klikk på en av knappene vil sende en synkron forespørsel til serveren. Vi vil bruke GET som forespørselsoverføringsmetode. Og adressen som vi vil sende forespørselen og ajax.php-parametere til. Vi vil motta data sendt av klienten på serveren ved hjelp av HTTP GET-variabelen ($_GET). Etter dette vil vi behandle de mottatte dataene på serveren og returnere et svar (streng) til klienten.

JavaScript AJAX span ( font-weight: bold; color: red; )

Klikk på en av knappene og motta svar fra serveren ved hjelp av AJAX-teknologi.

1 2 3

Svar (AJAX):

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