<section>
<?= t_head("Ajax Request to Load an HTML File", "5–10") ?>
<p>First, write the necessary JavaScript code to make an AJAX request to an HTML “snippet” file — that is, an HTML file that doesn’t have a <code>head</code>, <code>body</code>, <code>doctype</code>, etc. but is intended to be injected inside another HTML document that does have these.</p>
<p>Download the following skeleton and HTML snippet files:</p>
<p class="resource"><a href="minilab10.html">minilab10.html</a></p>
<p class="resource"><a href="minilab10.js">minilab10.js</a></p>
<p class="resource"><a href="snippet.html">snippet.html</a></p>
<p>In your JavaScript code, attach a <code>.click()</code> handler to the <code>fetch</code> button. This should make an Ajax request for the <samp>snippet.html</samp> file, and injects it into the <code>output</code> div.</p>
<p>Do this using either jQuery’s <code>$.ajax()</code> or <code>$.get()</code> function, in conjunction with <code>.html()</code>.</p>
<p class="note"><strong>Important:</strong> Don’t forget to upload both files to the server. AJAX requests can only be made to a web server, not a local file.</p>
</section>
<section>
<?= t_head("Ajax Request to Load a Text File", '15–20') ?>
<p>Now we’ll switch to loading a plain text file instead of an HTML file. Modify your Ajax request to fetch the following file instead:</p>
<p class="resource"><a href="snippet.txt">snippet.txt</a></p>
<p>It contains similar data to <samp>snippet.html</samp>, but it’s in plain text rather than HTML.</p>
<p>Each line of the text file should be made into an HTML <code>li</code> element. Inject those new <code>li</code> elements into a new <code>ul</code> element, and inject that <code>ul</code> into the <code>#output</code> div.</p>
<p>To split up the text file, use the built-in <a href="http://www.w3schools.com/jsref/jsref_split.asp"><code>.split()</code></a> function of strings. To get each line separately you’ll want to split on newline characters:</p>
<pre><code>var <var>array</var> = <var>string</var>.split('\\n');</code></pre>
<p>This returns an array of the lines in the file for you to loop over.</p>
</section>
<footer>
<p>If you’ve finished everything, good job! Experiment with creating more complex HTML and/or text files and injecting their contents into the page.</p>
</footer>