Recently I have been working with Wikipedia, Wikimedia and had to do AJAX requests and parsing the returned HTML.
Javascript and JQUERY have problems when you try an AJAX query to cross-domain sites. I read the following article by Micahs
Making Cross Domain jQuery AJAX Calls and followed the method suggested using YQL and seems to work fine. I have repeated below the code mentioned in the article for reference.
//feel free to add querystring vars to this
var myurl="http://www.example.com/get-post.ashx?var1=var1value&callback=?";
//make the call to YQL
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
"q=select%20*%20from%20html%20where%20url%3D%22"+
encodeURIComponent(myurl)+
"%22&format=xml'&callback=?",
function(data){
if(data.results[0]){
//this data.results[0] is the return object you work with,
//if you actually want to do something with the returned json
alert(data.results[0]);
} else {
var errormsg = '
Error: could not load the page.
';
//output to firebug's console
//use alert() for other browsers/setups
console.log(errormsg);
}
}
);
I have given below an example of parsing all the image source in a list of images.
The list item code snippet is given below
<div class="thumb" style="width: 150px;"><div style="margin:15px auto;"><a href="//commons.wikimedia.org/wiki/File:Adrien_Ysenbrandt_-_Virgin_and_Child_with_Two_Angels_in_a_Landscape_-_Walters_37266.jpg" class="image"><img alt="Adrien Ysenbrandt - Virgin and Child with Two Angels in a Landscape - Walters 37266.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/4/49/Adrien_Ysenbrandt_-_Virgin_and_Child_with_Two_Angels_in_a_Landscape_-_Walters_37266.jpg/102px-Adrien_Ysenbrandt_-_Virgin_and_Child_with_Two_Angels_in_a_Landscape_-_Walters_37266.jpg" width="102" height="120" /></a></div></div>
After alert(data.results[0]); you can do something like the following to get the thumb html in the list:
var thumb_array_img = $(('.thumb img'), result);
To get all the src links in an array use the JQUERY map function like the following code:
image_thumb_array = [];image_thumb_array = $(thumb_array_img).map(function ()
{ return $(this).attr("src"); });
