Web Services Mini-exercise: What's in a URL?

<pre>
Concepts taught: 
- Anatomy of a URL
	- The ? delimiter
	- name=value pairs
	- character substitution in URL strings: e.g. space --> +
- URL "hacking"
- The REST architecture
</pre>

<h4>Fun with URL Strings</h4>
<p>In many ways the World Wide Web is made up of thousands of publicly accessible web services. We use them every day. One of the most common is a simple Google search.</p>

<p>Open a web browser to google.com. Enter a topic to search and press return or click the search button to execute the search. Say you searched on "French revolution". You'll see the accustomed search results, of course. But look at the long string of characters that appears in the address field. It begins with http://www.google.com/ followed by a delimiter (normally a <strong><code>?</code></strong>), followed by a series of what are called <strong>name=value pairs</strong>. This may be quite long; e.g.:</p>

<pre class="codeblock">
<span style="color:#AAAAAA">http://www.google.com/</span>?q=french+revolution<strong>&</strong>oq=French+re<strong>&</strong>aqs=chrome.0.0j69i57j0l6.3444j0j7<strong>&</strong>sourceid=chrome<strong>&</strong>ie=UTF-8

</pre>

<p>These name=value pairs are separated from one another by a <strong>&</strong> character. The pairs represent the bits of information that get sent to Google's web search service. <!-- (This can be things like search language, information about what browser you are using, country from where the search originated, and many more. This is documented in great detail <a href="https://developers.google.com/search-appliance/documentation/50/xml_reference" target="_blank">in the Google Search Protocol Reference</a>.) --></p>

<p>Look carefully through these name=value pairs. Eventually you'll encounter one that looks like this:</p>

<pre class="codeblock">
<span style="color:#AAAAAA">&hellip;&</span>q=French+revolution<span style="color:#AAAAAA">&&hellip;</span>
</pre>

<p>As you can see, this is the actual query that you typed in the search field. You can modify this search string directly in the address field by simply replacing the search text, taking care to use a + sign in place of each space, e.g.:
</p>

<pre class="codeblock">
<span style="color:#AAAAAA">&hellip;&</span>q=south+america+economy<span style="color:#AAAAAA">&&hellip;</span>
</pre>

<p><strong><em>Try this now.</em></strong> Modify this URL string and press return. Note that the search results are based on the modified search string.</p>

<p>The point here is twofold:</p>
<ol type="1">
	<li>Submissions to many web services follow a fairly simple format;</li>
	<li>They key to submitting requests to web services lies in creating a properly-formatted URL address plus parameters string.</li>
</ol>

<p>URL strings of the type we just looked at are typical ways to access web services using the simple and widely used <a href="http://en.wikipedia.org/wiki/Representational_state_transfer" target="_blank">REST architecture</a>. This is the type of web service we want to explore, so as you look for web services to experiment with, look for REST as the type of service.</p>

<pre>
Now try this in LiveCode:

1. Create a card with these controls:
	- field "urlfld"
	- field "contents"
	- button "search"

2. Copy/paste the URL from above into fld "urlfld"

3. In button "search" enter the following script

on mouseUp
	put URL fld "urlfld" into tRawHTML
	set the htmlText of fld "contents" to tRawHTML
end if

Click the button, and you will see that LiveCode is able to partially render the HTML that google.com returns.

But LiveCode also has a secret trick--the ability to render a full-blown web browser in a stack. Do this:

1. Drag a *browser widget* from the tools palette. It has a world globe icon. 

2. Resize it to cover most of the card.

3. Now change the button's script to this:

on mouseUp
	set the url of widget "browser" to fld "urlfld"
end mouseUp

4. Now click the button. The entire Google search results should be perfectly and fully rendered in the browser widget.
</pre>