Comparaison de révisions

Premiers pas

Changer de révision

Révision 13025 :

Révision 13025 par Mgjbot le

Révision 13026 :

Révision 13026 par arena le

Titre :
Premiers pas
Premiers pas
Identifiant d'URL :
AJAX/Premiers_pas
AJAX/Premiers_pas
Étiquettes :
AJAX
AJAX
Contenu :

Révision 13025
Révision 13026
nn8       
9    </p>
10    <p>
n11      Présentation d'AJAXn14      Présentation d'Ajax
12    </h3>
13    <p>15    </h3>
16    <p>
14      AJAX est un acronyme anglais signifiant <i>Asynchronous Jav17      Ajax est un raccourci pour&nbsp;<em>Asynchronous JavaScript
>aScript and XML</i> (JavaScript et XML asynchrones). Pour simplif> + XML</em> (JavaScript &nbsp;asynchrone plus XML) inventé par Je
>ier, il s'agit d'employer l'objet non standard <code><a href="fr/>sse James Garrett. Pour simplifier, il s'agit d'employer l'objet 
>XMLHttpRequest">XMLHttpRequest</a></code> pour communiquer avec d>non standard <code><a href="/fr/XMLHttpRequest" title="fr/XMLHttp
>es scripts situés sur le serveur. L'objet permet d'échanger des i>Request">XMLHttpRequest</a></code> pour communiquer avec des scri
>nformations sous différents formats (dont XML, HTML ou texte), ma>pts situés sur le serveur. L'objet permet d'échanger des informat
>is son principal attrait est sa nature «&nbsp;asynchrone&nbsp;»&n>ions sous différents formats (dont XML, HTML ou texte), mais son 
>bsp;: tout cela peut se faire sans recharger la page. C'est ce qu>principal attrait est sa nature «&nbsp;asynchrone&nbsp;»&nbsp;: t
>i permet de mettre à jour certaines parties d'une page sur base d>out cela peut se faire sans recharger la page. C'est ce qui perme
>'évènements déclenchés par l'utilisateur.>t de mettre à jour certaines parties d'une page sur base d'évènem
 >ents déclenchés par l'utilisateur.
n71httpRequest.send(<i>);</i>n74httpRequest.send(<em>);</em>
n234      <b>Note</b>&nbsp;: La ligne <code>httpRequest.overrideMimeTn237      <strong>Note</strong>&nbsp;: La ligne <code>httpRequest.ove
>ype('text/xml');</code> ci-dessus provoquera des erreurs dans la >rrideMimeType('text/xml');</code> ci-dessus provoquera des erreur
>console JavaScript de Firefox 1.5 ou supérieur (comme documenté d>s dans la console JavaScript de Firefox 1.5 ou supérieur (comme d
>ans le {{ Bug("311724") }}) si la page appelée par XMLHttpRequest>ocumenté dans le {{ Bug("311724") }}) si la page appelée par XMLH
> n'est pas du XML valide (par exemple s'il s'agit de texte simple>ttpRequest n'est pas du XML valide (par exemple s'il s'agit de te
>). Ce comportement est en réalité le comportement correct et cet >xte simple). Ce comportement est en réalité le comportement corre
>article sera revu ultérieurement.>ct et cet article sera revu ultérieurement.
235    </p>
236    <p>238    </p>
239    <p>
237      <b>Note 2</b>&nbsp;: Si vous envoyez une requête vers un bo240      <strong>Note 2</strong>&nbsp;: Si vous envoyez une requête 
>ut de code dynamique qui renvoie du XML, plutôt que vers un fichi>vers un bout de code dynamique qui renvoie du XML, plutôt que ver
>er XML statique, vous devez définir certains en-têtes de réponse >s un fichier XML statique, vous devez définir certains en-têtes d
>pour que votre page fonctionne non seulement avec Mozilla, mais a>e réponse pour que votre page fonctionne non seulement avec Mozil
>ussi avec Internet Explorer. Si vous ne spécifiez pas l'en-tête <>la, mais aussi avec Internet Explorer. Si vous ne spécifiez pas l
>code>Content-Type: application/xml</code>, IE produira une erreur>'en-tête <code>Content-Type: application/xml</code>, IE produira 
> JavaScript «&nbsp;Objet attendu&nbsp;» après la ligne à laquelle>une erreur JavaScript «&nbsp;Objet attendu&nbsp;» après la ligne 
> vous tenterez d'accéder à un élément XML. Si vous ne spécifiez p>à laquelle vous tenterez d'accéder à un élément XML. Si vous ne s
>as l'en-tête <code>Cache-Control: no-cache</code>, le navigateur >pécifiez pas l'en-tête <code>Cache-Control: no-cache</code>, le n
>mettra la réponse en cache et n'effectuera plus jamais la requête>avigateur mettra la réponse en cache et n'effectuera plus jamais 
> ultérieurement, ce qui peut faire du débogage un véritable défi.>la requête ultérieurement, ce qui peut faire du débogage un vérit
 >able défi.
238    </p>
239    <p>241    </p>
240      <b>Note 3</b>&nbsp;: Si la variable <code>httpRequest</code
>> est utilisée globalement, des appels concurrents à <code>makeRe 
>quest()</code> peuvent s'écraser l'un l'autre, provoquant un effe 
>t de <i>race condition</i>. On peut s'en prémunir en rendant la v 
>ariable <code>httpRequest</code> locale à la fonction et en la pa 
>ssant en paramètre à la fonction <code>alertContent()</code>. 
241    </p>242    <p>
243      <strong>Note 3</strong>&nbsp;: Si la variable <code>httpReq
 >uest</code> est utilisée globalement, des appels concurrents à <c
 >ode>makeRequest()</code> peuvent s'écraser l'un l'autre, provoqua
 >nt un effet de <em>race condition</em>. On peut s'en prémunir en 
 >rendant la variable <code>httpRequest</code> locale à la fonction
 > et en la passant en paramètre à la fonction <code>alertContent()
 ></code>.
242    <p>244    </p>
245    <p>
243      <b>Note 4</b>&nbsp;: Pour procéder à l'enregistrement de la246      <strong>Note 4</strong>&nbsp;: Pour procéder à l'enregistre
> fonction de callback <code>onreadystatechange</code>, aucun para>ment de la fonction de callback <code>onreadystatechange</code>, 
>mètre n'est permis. C'est pourquoi le code suivant ne fonctionner>aucun paramètre n'est permis. C'est pourquoi le code suivant ne f
>a pas&nbsp;:>onctionnera pas&nbsp;:
n259      <b>Note 5</b>&nbsp;: Si erreur de communication se produit n262      <strong>Note 5</strong>&nbsp;: Si erreur de communication s
>(par exemple le serveur web qui cesse de répondre), une exception>e produit (par exemple le serveur web qui cesse de répondre), une
> se déclenchera dans la méthode <code>onreadystatechange</code> l> exception se déclenchera dans la méthode <code>onreadystatechang
>ors de l'accès à la variable <code>.status</code>. Assurez-vous d>e</code> lors de l'accès à la variable <code>.status</code>. Assu
>'envelopper votre bloc <code>if...then</code> dans un <code>try..>rez-vous d'envelopper votre bloc <code>if...then</code> dans un <
>.catch</code>. (cf {{ Bug("238559") }}).>code>try...catch</code>. (cf {{ Bug("238559") }}).
n283      Dans l'exemple précédent, après la réception de la réponse n286      Dans l'exemple précédent, après la réception de la réponse 
>à la requête HTTP, nous avons utilisé la propriété <code>response>à la requête HTTP, nous avons utilisé la propriété <code>response
>Text</code> de l'objet de requête, qui contient le contenu du fic>Text</code> de l'objet de requête, qui contient le contenu du fic
>hier <tt>test.html</tt>. Essayons maintenant la propriété <code>r>hier <code>test.html</code>. Essayons maintenant la propriété <co
>esponseXML</code>.>de>responseXML</code>.
284    </p>
285    <p>287    </p>
288    <p>
286      Tout d'abord, créons un document XML valide qui sera l'obje289      Tout d'abord, créons un document XML valide qui sera l'obje
>t de la requête. Le document (<tt>test.xml</tt>) contient ce qui >t de la requête. Le document (<code>test.xml</code>) contient ce 
>suit&nbsp;:>qui suit&nbsp;:
tt325    <p>
322    <div class="noinclude"></div>{{ languages( { "ca": "ca/AJAX/P326      {{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/A
>rimers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/G>JAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/
>etting_Started", "es": "es/AJAX/Primeros_Pasos", "it": "it/AJAX/I>AJAX/Primeros_Pasos", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Ge
>niziare", "ja": "ja/AJAX/Getting_Started", "ko": "ko/AJAX/Getting>tting_Started", "ko": "ko/AJAX/Getting_Started", "pl": "pl/AJAX/N
>_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_>a_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar", "ru": "ru/AJ
>come\u00e7ar", "ru": "ru/AJAX/\u0421_\u0447\u0435\u0433\u043e_\u0>AX/\u0421_\u0447\u0435\u0433\u043e_\u043d\u0430\u0447\u0430\u0442
>43d\u0430\u0447\u0430\u0442\u044c", "zh-cn": "cn/AJAX/\u5f00\u59c>\u044c", "zh-cn": "cn/AJAX/\u5f00\u59cb", "zh-tw": "zh_tw/AJAX/\u
>b", "zh-tw": "zh_tw/AJAX/\u4e0a\u624b\u7bc7" } ) }}>4e0a\u624b\u7bc7" } ) }}
327    </p>

Retour à l'historique