mozilla

Compare Revisions

Getting Started

Change Revisions

Revision 48829:

Revision 48829 by garann on

Revision 48830:

Revision 48830 by garann on

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

Revision 48829
Revision 48830
tt271    <h3>
272      Step 5 – Working with data
273    </h3>
274    <p>
275      Finally, let's send some data to the server and receive a r
 >esponse. Our JavaScript will request a dynamic page this time, <c
 >ode>test.php</code>, which will take the data we send and return 
 >a "computed" string - "Hello, [user data]!" - which we'll <code>a
 >lert().</code>
276    </p>
277    <p>
278      First we'll add a textbox to our HTML so the user can enter
 > their name:
279    </p>
280    <pre class="brush: html">
281&lt;label&gt;Your name: 
282  &lt;input type="text" id="ajaxTextbox" /&gt;
283&lt;/label&gt;
284&lt;span id="ajaxButton" style="cursor: pointer; text-decoration:
 > underline"&gt;
285  Make a request
286&lt;/span&gt;
287</pre>
288    <p>
289      We'll also add a line to our event handler to get the user'
 >s data from the textbox and send it to the <code>makeRequest()</c
 >ode> function along with the URL of our server-side script:
290    </p>
291    <pre class="brush: html">
292  document.getElementById("ajaxButton").onclick = function() { 
293      var userName = document.getElementById("ajaxTextbox").value
 >;
294      makeRequest('test.php',userName); 
295  };
296</pre>
297    <p>
298      &nbsp;
299    </p>
300    <p>
301      We need to modify <code>makeRequest()</code> to accept the 
 >user data and pass it along to the server. We'll change the reque
 >st method from <code>GET</code> to <code>POST</code>, and include
 > our data as a parameter in the call to <code>httpRequest.send()<
 >/code>:
302    </p>
303    <pre class="brush: html">
304  function makeRequest(url, userName) {
305 
306    ...
307 
308    httpRequest.onreadystatechange = alertContents;
309    httpRequest.open('POST', url);
310    httpRequest.send('userName=' + userName);
311  }
312</pre>
313    <p>
314      The function <code>alertContents()</code> can be written th
 >e same way it was in Step 3 to alert our computed string, if that
 >'s all the server returns. However, let's say the server is going
 > to return both the computed string and the original user data. S
 >o if our user typed "Jane" in the textbox, the server's response 
 >would look like this:
315    </p>
316    <p>
317      <code>{"userData":"Jane","computedString":"Hi, Jane!"}</cod
 >e>
318    </p>
319    <p>
320      To use this data within <code>alertContents()</code>, we ca
 >n't just alert the <code>responseText</code>, we have to parse it
 > and alert <code>computedString</code>, the property we want:
321    </p>
322    <pre class="brush: html">
323function alertContents() {
324    if (httpRequest.readyState == 4) {
325      if (httpRequest.status == 200) {
326        var response = JSON.parse(httpRequest.responseText);
327        alert(response.computedString);
328    } else {
329      alert('There was a problem with the request.');
330    }
331  }
332</pre>

Back to History