AJAX Fallback Optie 1 ~ Het verzenden van een Aanvraag Met behulp van een IFrame

Share

|

IFrames een geschikt vervoermiddel voor asynchrone oproepen, omdat zij inhoud kan laden zonder dat de hele pagina te herladen, en nieuwe IFrame elementen kunnen worden gemaakt met behulp van JavaScript. De mooiste attribuut over een IFrame is dat een vorm als een doel, dat opnieuw laden IFrame in plaats van de hele pagina, deze aanpak maakt het mogelijk grote hoeveelheden gegevens moeten worden verzonden naar de server met behulp van POST kan gebruiken.

Een van de moeilijkheden bij het gebruik van een iFrame als transport, is dat we de pagina geladen moet worden HTML, en het moet een JavaScript onload event handler aan de ouder document te vertellen wanneer het laden klaar te hebben. Deze noodzaak dwingt alle verzoeken worden gemaakt met IFrames worden gemaakt op de pagina's zijn ontworpen om te gaan met IFrame verzoeken. (Code kan niet zomaar pakken een XML-bestand in de manier waarop XMLHttpRequest toestaat.)

Merk op dat het gebruik van iframes een aantal verdere beperkingen heeft:

• Ondersteuning van slechts asynchrone aanvragen
• Server-pagina's nodig veranderd
• Phantom vermeldingen in de geschiedenis van de browser
• Odd terug / vooruit knop gedrag in sommige browsers
• Grote verschillen in de browser van implementaties, met name in oudere browsers

Een voordeel dat een IFrame heeft over XMLHttpRequest is dat het kan worden gebruikt voor het uploaden van bestanden te maken. Vanwege de veiligheid beperkingen browser, alleen gebruikers, zoals het klikken een formulier, kan interageren met bestanden op de computer van de gebruiker. Dit maakt een gerichte vorm van een IFrame de enige optie voor het uploaden van bestanden die niet leiden tot een normale vorm POST en de pagina reload cyclus. Er is echter geen reden om je niet kunt terugvallen op het gebruik van een IFrame voor bestand uploads en XMLHttpRequest voor de rest van uw AJAX verzoeken. Tenzij u het maken van remote scripting-stijl AJAX verzoeken, werken rond IFrame beperkingen zal een aanzienlijke hoeveelheid werk toe te voegen aan een AJAX-ontwikkelingsproject.

Het creëren van een verborgen iframe

Om maximale compatibiliteit met oudere browsers, kan je gewoon toevoegen aan uw IFrame HTML en geef het een grootte van 0x0. (Je kunt niet zomaar verbergen, of sommige browsers niet geladen is.) Echter, deze aanpak niet flexibel is, dus wil je het frame dynamisch te maken. Niet alle oudere browsers ondersteunen document.createElement, maar browsers zonder dat de steun zal in het algemeen niet over de andere dynamische capaciteiten die nodig zijn om de gegevens die u laden, dus het is best om ondersteuning te bieden aan hen met een statische HTML-versie van de pagina gebruiken. In het volgende voorbeeld is de IFrame gemaakt met behulp van innerHTML want het is eenvoudiger dan het maken ervan met behulp van DOM methoden. Merk echter op dat het ook zou kunnen worden gemaakt met document.createElement, net als de div waaraan het wordt toegevoegd:

1 var rDiv = document.createElement ( "div ');
2 rDiv.id = 'remotingDiv';
3 var style = "border: 0; width: 0; height: 0; ';
4 rDiv.innerHTML = ""
6
7 document.body.appendChild (rDiv);

Het creëren van een formulier

Als u wilt maken slechts een GET-verzoek, kunt u de waarde van src eigendom van de IFrame, maar om te doen POST, moet u een gerichte vorm te gebruiken. GET is geen goede oplossing voor AJAX verzoeken om twee redenen: het kan alleen sturen een beperkte hoeveelheid gegevens (een bedrag dat verandert afhankelijk van de browser), en GET kunnen worden opgeslagen en / of voorgeladen door proxy-servers, zodat u nooit wil het om een actie uit te voeren gebruiken, zoals het bijwerken van uw database.

Met behulp van een formulier met een IFrame is eenvoudig. Zojuist doel van het formulier attribuut, en wanneer u het formulier, het resultaat belastingen in het IFrame. Het volgende voorbeeld maakt ons formulier en zet haar doelstellingen om de IFrame hebben we eerder in het "creëren van een verborgen iframe" sectie van het artikel:

1 rDiv.form = document.createElement ( 'form');
2 rDiv.form.setAttribute ( 'id', id + 'RemotingForm');
3 rDiv.form.setAttribute ( 'action', url);
4 rDiv.form.setAttribute ( 'target', id);
5 rDiv.form.target = id;
6 rDiv.form.setAttribute ( 'methode', 'post');
7 rDiv.form.innerHTML = '8 id = " '+ id +' Data"> ';

Stuur de gegevens van de Loaded inhoud naar het originele document

De enige manier om te weten dat de inhoud van het IFrame is geladen is om de content pagina lopen sommige JavaScript dat de bovenliggende pagina waarin het IFrame is ingebed in kennis stelt. De eenvoudigste manier om dit te doen is om de onload event handler ingesteld op het document dat u wilt plaatsen. Deze beperking betekent dat u een IFrame niet gebruiken voor het laden van willekeurige content zoals je kunt met XMLHttpRequest. Maar het is nog steeds nuttig voor gevallen waarin een enkele server pagina reeds wordt gebruikt als een AJAX-gateway. Hier is een voorbeeld van onload:

Complete IFrame AJAX Voorbeeld

Een volledig voorbeeld van een IFrame dat AJAX verzoeken bevat twee stukken. Het eerste stuk is de client-side code naar de IFrame en vorm te creëren. Het tweede stuk is de server-side code, die enkele gegevens voorbereidt en stuurt het terug naar de bovenliggende document in zijn onload event handler.

Het eerste deel van het voorbeeld (Listing 1) is de JavaScript-code in een eenvoudige HTML-bestand. Deze pagina wordt gebruikt voor het testen, de callback functie alleen waarschuwt de inhoud van de resultaten. Het tweede deel van het voorbeeld (Listing 2) is een eenvoudig PHP-script, dat de gegevens van POST neemt en stuurt het terug naar de bovenliggende document. Om een bruikbaar systeem, kan je ook wilt opnemen wat extra variabelen in de vorm, die zou vertellen de PHP-code wat te doen met de gegevens die is geüpload, of je zou kunnen brengen de logica rechtstreeks in het script en een ander doel te gebruiken voor pagina elke taak die u wilde bereiken.

Listing 1. Het maken van een AJAX aanvragen Met behulp van een IFrame

1 2 3 18 rDiv.form.setAttribute ( 'target', id); 19 rDiv.form.target = id; 20 rDiv.form.setAttribute ( 'methode', 'post'); 21 rDiv.form.innerHTML = '22 id = " '+ id +' Data"> '; 23 24 rDiv.appendChild (rDiv.form); 25 rDiv.data = document.getElementById (id + 'Data'); 26 27 return rDiv; 28) 29 30 functie sendRequest (url, laadvermogen, callback) ( 31 if (! RemotingDiv) ( 32 remotingDiv = createRemotingDiv ( 'remotingFrame', 33 'blank.html'); 34) 35 remotingDiv.form.action = url; 36 remotingDiv.data.value = lading; 37 remotingDiv.callback = callback; 38 remotingDiv.form.submit (); 39 40) 41 42 function test () ( 43 sendRequest ( 'test.php', 'Dit is een test data ", 44 function (result) (alert (result))); 45) 46 47 48 49 50 51 52 53 54 55 Test 56 57 58

Listing 1 bestaat uit drie functies:

• createRemotingDiv voor het opzetten van de iFrame.
• sendRequest voor het maken van een AJAX verzoek.
• test voor het maken van een AJAX verzoek. De test functie is gekoppeld aan een link (lijn 55) in de HTML van de pagina's '. Door te klikken op deze link kan de gebruiker om te beginnen met een AJAX verzoek.

De createRemotingDiv functie (lijn 5 tot 28) combineert de eerder beschreven code voor het maken van een verborgen iframe met de code voor het maken van een formulier voor te leggen. Wanneer het formulier is gemaakt, het is gericht tegen de pas opgerichte IFrame, waardoor het formulier indienen gebruiken in plaats van de huidige pagina herladen. Tonen van de IFrame tijdens de ontwikkeling is vaak nuttig bij het debuggen proces, zodat u elke uitgang gegenereerd door de pagina die u belt kan zien. U kunt dit doen door het bewerken van de stijl op lijn 8 en veranderen naar de breedte: 200; height: 200;.

De sendRequest functie (lijnen 30 tot 40) maakt een AJAX verzoek. Het neemt de URL te maken die het verzoek, een nuttige lading te sturen naar de server, en een callback functie kan worden uitgevoerd wanneer de aanvraag volledig is. De functie maakt gebruik van createRemotingDiv te zetten van het proces (regels 31-34). Dan sendRequest bijwerken van de actie op het IFrame formulier (lijn 35), voegt de payload waarde op het formulier en stelt de vorm met behulp van de iFrame. Als de nieuwe pagina is geladen in het iframe, het nieuwe document maakt gebruik van een JavaScript-onload handler te bellen naar de callback functie die werd aangenomen in de sendRequest methode. De PHP-pagina die het formulier POST-processen en creëert de onload Javascript is weergegeven in Listing 2

Listing 2. PHP Server Page Dat Handles een IFrame AJAX Request

1 2 3 8 9 10 onload = 11 "parent.document.getElementById ( 'remotingDiv'). Callback (resultaat)"> 12 13

Op de server kant, wordt het formulier verwerkt en de output wordt gemaakt in de vorm van een HTML-pagina. De eenvoudigste manier om nieuwe gegevens toe te voegen is het genereren van JavaScript met de nieuwe gegevens. In dit geval zijn we gewoon aansluit bij de gegevens terug naar de client door het in het resultaat variabele (regels 4-6). Normaal, zult u worden uitgevoerd server-side code hier en ofwel een string outputten (zoals in dit geval) of het toevoegen van nieuwe JavaScript-code uit te voeren tegen de ouder document. De callback functie op de ouder wordt door de onload handler op het lichaam tag (regel 11).

---