CODEWITHSUNDEEP
javascriptjqueryajaxjsonunicode
kevins
kevins

Reputation: 482

Why is this website returning autocomplete data wrapped in a jQuery tag?

I was looking at the autocomplete widget on www.healthgrades.com and inspected the network response.

I think the data is JSON, but it appears to have been run through some sort of encoding / filter and escaped, then returned in a jQuery tag (presumably a cache buster?).

A small bit of the data looks like what you see below.

jQuery17207977216457948089_1379039838014([{"ItemIds":null,"LinkUrl":"/hospital-directory/texas-tx-central/scott-and-white-memorial-hospital-hgst712bc8b6450054","Text":"Scott and White Memorial Hospital","PlainText":null,"Type":"tophospital","TrackingName":null,"StateAbbreviation":null,"Data":null},{"ItemIds":null,"LinkUrl":"/hospital-directory/texas-tx-austin/st-davids-medical-center-hgst613bc8b6450431","Text":"St. David\u0027s Medical Center","PlainText":null,"Type":"tophospital","TrackingName":null,"StateAbbreviation":null,"Data":null},{"ItemIds":null,"LinkUrl":"/hospital-directory/texas-tx-southern/st-davids-georgetown-hospital-hgst182bc8b6450191","Text":"St. David\u0027s Georgetown Hospital","PlainText":null,"Type":"tophospital","TrackingName":null,"StateAbbreviation":null,"Data":null},{"ItemIds":null,"LinkUrl":"/hospital-directory/texas-tx-austin/heart-hospital-of-austin-hgstbb7ecdaa450824","Text":"Heart Hospital of Austin","PlainText":null,"Type":"tophospital","TrackingName":null,"StateAbbreviation":null,"Data":null},{"ItemIds":null,"LinkUrl":"/hospital-directory/texas-tx-austin/st-davids-north-austin-medical-center-hgst234bc8b6450809","Text":"St. David\u0027s North Austin Medical Center","PlainText":null,"Type":"tophospital","TrackingName":null,"StateAbbreviation":null,"Data":null}]);

What are the benefits of doing this, and if my assumptions are wrong, what is going on here?

Upvotes: 0

Views: 71

Answers (2)

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123453

It's an example of jQuery's JSONP support.

JSONP, if you're not familiar, is "JSON with Padding." The padding is a call to a global function with the JSON as the argument.

The name at the start, jQuery17207977216457948089_1379039838014, is that global function which jQuery generated at the start of the request. And, it'll create one for any requests using a ? placeholder in the query-string:

The jsonp type appends a query string parameter of callback=? to the URL. The server should prepend the JSON data with the callback name to form a valid JSONP response. We can specify a parameter name other than callback with the jsonp option to $.ajax().

The main advantage of JSONP is that it supports cross-origin requests. It does this by creating a <script> rather than an XMLHttpRequest (similar to using $.getScript()) because they aren't restricted by the SOP. They are, however, limited to GET requests; so it's a bit of a trade-off.

And, it was an option for cross-origin that was available before the introduction of CORS.

As an aside: JSONP is technically JSON treated as JavaScript, taking advantage of JSON's syntax being taken from JavaScript's.

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

It is the response format for jsonp requests, it is a technique used to overcome the same origin policy restrictions on ajax requests where ajax requests to a domain different from where the page was loaded is prevented by the browser.

In this particular case it is of not much use because both the page and the ajax resource are in the same domain.

Upvotes: 2

Related Questions