mozilla

Compare Revisions

Getting Started

Change Revisions

Revision 48730:

Revision 48730 by Dria on

Revision 48731:

Revision 48731 by Garweng on

Title:
Getting Started
Getting Started
Slug:
AJAX/Getting_Started
AJAX/Getting_Started
Tags:
AJAX, NeedsTechnicalReview, XMLHttpRequest
AJAX, NeedsTechnicalReview, XMLHttpRequest
Content:

Revision 48730
Revision 48731
n155    <h3 name="Step_3_.E2.80.93_.22All_together_now.21.22_-_A_Simpn155    <p>
>le_Example"> 
156      Step 3 – "All together now!" - A Simple Example156      h
157    </p>
158    <h3 name="ello">
159      ello
t158    <p>t
159      Let's put it all together and do a simple HTTP request. Our
> JavaScript will request an HTML document, <code>test.html</code> 
>, which contains the text "I'm a test." and then we'll <code>aler 
>t()</code> the contents of the <code>test.html</code> file. 
160    </p>
161    <pre>
162&lt;script type="text/javascript" language="javascript"&gt;
163 
164    
165 
166    function makeRequest(url) {
167 
168        var http_request = false;
169 
170        if (window.XMLHttpRequest) { // Mozilla, Safari,...
171            http_request = new XMLHttpRequest();
172            if (http_request.overrideMimeType) {
173                http_request.overrideMimeType('text/xml');
174                // See note below about this line
175            }
176        } else if (window.ActiveXObject) { // IE
177            try {
178                http_request = new ActiveXObject("Msxml2.XMLHTTP"
>); 
179            } catch (e) {
180                try {
181                    http_request = new ActiveXObject("Microsoft.X
>MLHTTP"); 
182                } catch (e) {}
183            }
184        }
185 
186        if (!http_request) {
187            alert('Giving up :( Cannot create an XMLHTTP instance
>'); 
188            return false;
189        }
190        http_request.onreadystatechange = function() { alertConte
>nts(http_request); }; 
191        http_request.open('GET', url, true);
192        http_request.send(null);
193 
194    }
195 
196    function alertContents(http_request) {
197 
198        if (http_request.readyState == 4) {
199            if (http_request.status == 200) {
200                alert(http_request.responseText);
201            } else {
202                alert('There was a problem with the request.');
203            }
204        }
205 
206    }
207&lt;/script&gt;
208&lt;span
209    style="cursor: pointer; text-decoration: underline"
210    onclick="makeRequest('test.html')"&gt;
211        Make a request
212&lt;/span&gt;
213</pre>
214    <p>
215      <br>
216      In this example:
217    </p>
218    <ul>
219      <li>The user clicks the link "Make a request" in the browse
>r; 
220      </li>
221      <li>This calls the <code>makeRequest()</code> function with
> a parameter – the name <code>test.html</code> of an HTML file in 
> the same directory; 
222      </li>
223      <li>The request is made and then (<code>onreadystatechange<
>/code>) the execution is passed to <code>alertContents()</code>; 
224      </li>
225      <li>
226        <code>alertContents()</code> checks if the response was r
>eceived and it's an OK and then <code>alert()</code>s the content 
>s of the <code>test.html</code> file. 
227      </li>
228    </ul>
229    <p>
230      You can test the example <a class="external" href="http://w
>ww.w3clubs.com/mozdev/httprequest_test.html">here</a> and you can 
> see the test file <a class="external" href="http://www.w3clubs.c 
>om/mozdev/test.html">here</a>. 
231    </p>
232    <p>
233      <b>Note</b>: The line <code>http_request.overrideMimeType('
>text/xml');</code> above will cause Javascript Console errors in  
>Firefox 1.5b as documented at https://bugzilla.mozilla.org/show_b 
>ug.cgi?id=311724 if the page called by XMLHttpRequest is not vali 
>d XML (eg, if it is plain text). 
234    </p>
235    <p>
236      If you get Syntax Error or Not Well Formed Error on that br
>owser, and you're not trying to load an XML page from XMLHttpRequ 
>est, remove that line from your code. 
237    </p>
238    <p>
239      <b>Note 2</b>: if you are sending a request to a piece of c
>ode that will return XML, rather than to a static XML file, you m 
>ust set some response headers if your page is to work in Internet 
> Explorer in addition to Mozilla. If you do not set header <code> 
>Content-Type: application/xml</code>, IE will throw a Javascript  
>error 'Object Expected' after the line where you try to access an 
> XML element. If you do not set header <code>Cache-Control: no-ca 
>che</code> the browser will cache the response and never re-submi 
>t the request, making debugging 'challenging'. 
240    </p>
241    <p>
242      <b>Note 3</b>: if the http_request variable is used globall
>y, competing functions calling makeRequest() may overwrite each o 
>ther, causing a race condition. Declaring the http_request variab 
>le local to the function and passing it to the alertContent() fun 
>ction prevents the race condition. 
243    </p>
244    <p>
245      <b>Note 4</b>: To register the call back function onreadyst
>atechange, you cannot have any argument: 
246    </p>
247    <pre>
248http_request.onreadystatechange = function() { alertContents(http
>_request); };  //1 (simultaneous request) 
249http_request.onreadystatechange = alertContents(http_request); //
>2 (does not work) 
250http_request.onreadystatechange = alertContents;  //3 (global var
>iable) 
251</pre>
252    <p>
253      Method 1 allows to have several requests done in simultaneo
>usly, method 2 will not work, method 3 is used if http_request is 
> a global variable 
254    </p>

Back to History