You will be creating a web-application that mixes together several sources of web information.
You will learn how to use a RESTful web API.
Overview.
You are working for a company that does English as a second language instruction.
Your instructors want a web-based application that lets them easily show students an English word along with its picture.
They would also like the application to also show the translation into a small set of languages (the native languages of the students in a particular class).
Your job is to build a web application mashup using several of Microsoft's web service APIs (Bing Search API and Translator API).
The Ajax lecture on the schedule page has links to relevant examples that make use of these APIs.
I will provide you with an API key for use during the assignment.
You can register with Bing as a developer to get access to their web APIs yourself (free up to 5K/month search, 2M character of translation).
You may use any web technology you want, but your application must work in the Firefox browser.
Since the Bing API has support for Ajax via a proxy and JSON-format data, HTML + JavaScript is probably the easiest choice.
The overall behavior of the application is shown in the above video.
You are free to implement the look-and-feel of the page as you see fit, but it should meet the requirements below.
Requirements:
Page has a text entry field allowing one or more words to be typed.
Page has a button that causes a new image and translated word(s) to be loaded.
Hitting return in text field should cause a new image and translated word(s) to be loaded.
The image and translations should be immediately erased when the button is pressed.
The image and translations should load in parallel, populating each relevant page element as soon as the result for that element arrives.
You should retrieve 10 images for the English word(s).
Images can be of different resolutions if you want, but should maintain their original aspect ratio and not be warped.
You should display the thumbnail version of the image, not the full resolution version.
Clicking on the image causes it to cycle through the 10 images, from the top result to the last result.
After clicking on the tenth image, it should cycle back to the first image.
If one or more of the web API queries fails to return a result (e.g. a bogus word), your page should not generate a JavaScript error.
The exact languages and the number of languages displayed should be easily configurable by changing no more than two lines of code. Include a comment describing how to configure the page.
Can I use a single XMLHttpRequest object to make multiple parallel requests? No. You'll need to create multiple objects.
All my Ajax requests are served by the same onreadystatechange callback function.
Is there a way to tell which request a particular response came from?
Not that we could find.
You may be able to figure it out based on the response generated by the web service.
Another option would be to design your code so it works without this knowledge.
Or you could have different callback functions for each type of request, though this may be a bit inelegant.
Submission.
I will be testing your program on the URL specified in the header of your source.
I will be using the Firefox browser.
You also need to submit your source file(s) to the Moodle dropbox.
The Moodle timestamp is the completion time for the assignment.