Skip to content

Ajax: Replace broken YQL example with Wikipedia API #819

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 23, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions page/ajax/working-with-jsonp.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,30 @@
"attribution": [ "jQuery Fundamentals" ]
}</script>

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.
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).

```
// Using YQL and JSONP
$.ajax({
url: "http://query.yahooapis.com/v1/public/yql",
$.ajax( {
// Tell MediaWiki what we want and that we want JSON
url: "https://en.wikipedia.org/w/api.php",
data: {
format: "json",
action: "query",
list: "categorymembers",
cmtitle: "Category:Free_software_programmed_in_JavaScript",
cmprop: "title",
cmlimit: 500
},

// The name of the callback parameter, as specified by the YQL service
// Name of the query parameter that jQuery will add to set the callback function
jsonp: "callback",

// Tell jQuery we're expecting JSONP
dataType: "jsonp",

// Tell YQL what we want and that we want JSON
data: {
q: "select title,abstract,url from search.news where query=\"cat\"",
format: "json"
},

// Work with the response
success: function( response ) {
console.log( response ); // server response
}
});
} ).then( function( response ) {
console.log( response.query.categorymembers );
} );
```

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.
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.