JavaScript Evolution: JSONP and 3D Data Structures

JavaScript: A Fast-Growing Language

JavaScript is a fast-growing language, with a lot of features being added to every release! These include:

• JSONP
• Arrow functions
• Arguments and call arguments
• Rest parameters
• Blob and DOMString
• A download button
• apply() vs call()

Understanding JSONP (JSON with Padding)

JSONP (JSON with Padding) was a technique used before modern CORS support to get data from another website. JSONP (JavaScript Object Notation with Padding) is an older technique used to retrieve data from a server when normal AJAX requests using XMLHttpRequest (XHR) or fetch() are blocked by the browser's Same-Origin Policy.

Normally, when a client requests data from a server, the server returns plain JSON, such as { "value": 123 }, which is then parsed by JavaScript. However, if the request is made to a different domain, the browser blocks it unless the server explicitly allows it through CORS (Cross-Origin Resource Sharing).

How JSONP Works

JSONP provides a workaround by taking advantage of the fact that browsers allow JavaScript files to be loaded from any domain using the <script> tag. Instead of returning plain JSON, the server returns executable JavaScript code that calls a function specified by the client.

For example, if the client includes <script src="https://api.countapi.xyz/hit/cs571isfun/visits?callback=displayTheVal"></script>, the callback=displayTheVal parameter tells the server to wrap the JSON data inside a function call. Instead of sending { "value": 256 }, the server sends displayTheVal({ "value": 256 });.

When the browser loads this script, it immediately executes the JavaScript, automatically calling the displayTheVal() function that was defined by the client. The object { "value": 256 } is passed as the function's argument, allowing the function to access o.value and display it on the webpage, such as inside the <div id="visits"></div> element.

The commented line displayTheVal({"value":"OMG!"}); simply demonstrates what the server would normally return and can be used to test the function without contacting the server.

Security and Modern Alternatives

Compared to XHR or fetch(), JSONP works only for GET requests and executes JavaScript directly, making it less secure because it requires trusting the remote server. For this reason, JSONP is now considered obsolete, and modern web applications use fetch() or XMLHttpRequest together with CORS to securely exchange data between different domains.

3D Model Representation in JSON

The large JSON object shown at the end is unrelated to JSONP itself; it represents a 3D model of a dog. The "data" array contains many triangles, where each triangle consists of three vertices (v0, v1, and v2).

Each vertex stores its 3D position in the "v" array (x, y, z coordinates), its surface normal in the "n" array (used for lighting calculations), and texture coordinates in the "t" array (used to map images onto the model). A rendering program reads all of these triangles and combines them to reconstruct and display the complete 3D dog model.