How to Make Cross-Domain JSONP Requests in JavaScript Without jQuery?

Making Cross-Domain JSONP Requests in JavaScript Without External Libraries

JSONP (JSON with Padding) is a technique that allows cross-domain requests by appending a callback function to the request URL. The callback function is defined by the client and is executed by the server upon successful reception of the request.

How to Make a JSONP Request Without jQuery

To make a JSONP request without jQuery, you can follow these steps:

1. Create a callback function: Define a function that will be called when the server responds with the JSON data. This function will be provided with the data as an argument.

<code class="javascript">function foo(data) {
    // Process the JSON data
}</code>

2. Construct the JSONP URL: Create the URL for the JSONP request by appending the callback function name as a query parameter.

<code class="javascript">const url = '//example.com/path/to/jsonp?callback=foo';</code>

3. Create a script element: Create a script element and set its src attribute to the JSONP URL.

<code class="javascript">const script = document.createElement('script');
script.src = url;</code>

4. Append the script element to the DOM: Append the script element to the head of the document. This will trigger the request to the server.

<code class="javascript">document.head.appendChild(script);
// or document.getElementsByTagName('head')[0].appendChild(script) in older browsers</code>

Once the server responds with the JSON data, the callback function will be executed and you can use the provided data to populate your application.

The above is the detailed content of How to Make Cross-Domain JSONP Requests in JavaScript Without jQuery?. For more information, please follow other related articles on the PHP Chinese website!