This website (http://www.thekatespanos.com/scrabble-score-calculator/) has a button where a user can validate the word they have typed in against some online dictionaries. I understand how the code works in terms of the jQuery code, but I don't fully get how it does what it does as it pulls in data from other webpages..
Here is an example:-
$.ajax({
url: 'http://dictionary.reference.com/browse/' + word,
type: 'GET',
error: function() {
$('#validationDC').html('<span class="invalid">error loading from</span> <a target="_blank" href="http://www.dictionary.reference.com/browse/' + word + '">Dictionary.com</a>.');
},
success: function(res) {
var definition = $(res.responseText).find('.results_content').html();
if (definition) {
$('#validationDC').html('<span class="word valid">' + word + '</span> is a valid word according to <a target="_blank" href="http://www.dictionary.reference.com/browse/' + word + '">Dictionary.com</a>.');
//$('#definitionDC').html(definition);
}
else {
$('#validationDC').html('<span class="word invalid">' + word + '</span> is not a valid word according to <a target="_blank" href="http://www.dictionary.reference.com/browse/' + word + '">Dictionary.com</a>.');
}
},
complete: function() {
$('.loading').remove();
}
});
This code sends a jQuery ajax request to dictionary.reference.com to validate the word entered on the application and parses the returned data to identify whether or not the word is valid.
How is this possible, given the same origin policy? Can somebody explain as I feel I'm missing something.