Skip to content

Commit a3b8479

Browse files
authored
Ajax: Replace broken YQL example with Wikipedia API
Fixes #812. Closes gh-819.
1 parent b607e4b commit a3b8479

File tree

1 file changed

+17
-17
lines changed

1 file changed

+17
-17
lines changed

page/ajax/working-with-jsonp.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,30 @@
55
"attribution": [ "jQuery Fundamentals" ]
66
}</script>
77

8-
The advent of JSONP — essentially a consensual cross-site scripting hack — has opened the door to powerful mashups of content. Many prominent sites provide JSONP services, allowing you access to their content via a predefined API. A particularly great source of JSONP-formatted data is the [Yahoo! Query Language](http://developer.yahoo.com/yql/console/), which we'll use in the following example to fetch news about cats.
8+
The advent of JSONP — essentially a consensual cross-site scripting hack — has opened the door to powerful mashups of content. Many prominent sites provide JSONP services, allowing you access to their content via a predefined API. A particularly great source of JSONP-formatted data is the [Wikipedia API](https://en.wikipedia.org/w/api.php?action=help&modules=query), which we'll use in the following example to fetch a list of articles about [JavaScript libraries](https://en.wikipedia.org/wiki/Category:Free_software_programmed_in_JavaScript).
99

1010
```
11-
// Using YQL and JSONP
12-
$.ajax({
13-
url: "http://query.yahooapis.com/v1/public/yql",
11+
$.ajax( {
12+
// Tell MediaWiki what we want and that we want JSON
13+
url: "https://en.wikipedia.org/w/api.php",
14+
data: {
15+
format: "json",
16+
action: "query",
17+
list: "categorymembers",
18+
cmtitle: "Category:Free_software_programmed_in_JavaScript",
19+
cmprop: "title",
20+
cmlimit: 500
21+
},
1422
15-
// The name of the callback parameter, as specified by the YQL service
23+
// Name of the query parameter that jQuery will add to set the callback function
1624
jsonp: "callback",
1725
1826
// Tell jQuery we're expecting JSONP
1927
dataType: "jsonp",
2028
21-
// Tell YQL what we want and that we want JSON
22-
data: {
23-
q: "select title,abstract,url from search.news where query=\"cat\"",
24-
format: "json"
25-
},
26-
27-
// Work with the response
28-
success: function( response ) {
29-
console.log( response ); // server response
30-
}
31-
});
29+
} ).then( function( response ) {
30+
console.log( response.query.categorymembers );
31+
} );
3232
```
3333

34-
jQuery handles all the complex aspects of JSONP behind-the-scenes — all we have to do is tell jQuery the name of the JSONP callback parameter specified by YQL ("callback" in this case), and otherwise the whole process looks and feels like a normal Ajax request.
34+
jQuery handles all the complex aspects of JSONP behind-the-scenes. All we have to do is set `dataType` to `"jsonp"` and tell jQuery the name of the JSONP parameter ("callback" in this case). Beyond that one option, the whole process looks and feels like a normal Ajax request for fetching JSON.

0 commit comments

Comments
 (0)