A brief discussion on the difference between JSON and JSONP and the use of jQuery's ajax jsonp_jquery

JSON and JSONP

JSON (JavaScript Object Notation) is a lightweight data exchange format used to exchange information between browsers and servers.

JSONP (JSON With Padding) is JSON (or wrapped JSON) packaged in a function call.

JSON is a data format, and JSONP is a data calling method.

Copy code The code is as follows:

//JSON
{
“name”: “sb”
}

Copy code The code is as follows:

//JSONP
callback({
“name”: “sb”
})

For security reasons, scripts (AJAX) cannot access content outside this domain. However, static resources are not restricted by domain policies and can load scripts, styles, pictures and other static resources from any domain. JSOP uses this principle to achieve cross-domain data acquisition.

Example 1:

Copy code The code is as follows:

//Define shoPrice function
function showPrice(data) {
alert("Symbol: " data.symbol ", Price: " data.price);
}

Copy code The code is as follows:

//Include showPrice function and parameters in the Web page

This example shows how to call a JavaScript function with static JSON data as a parameter.

Example 2:

The first function call can be written in a js file and placed on the server, loaded into the page using a script tag, and this tag can be created dynamically.

Copy code The code is as follows:

The content of remote.js is the same as what was written in the tag before:

1 showPrice({symbol: 'IBM', price: 91.42});

The dynamically inserted JavaScript code takes the JSON data to be passed as a parameter and the parameter of the showPrice function calling statement.

So the question is, should the showPrice function be called every time the data is obtained? This requires the front-end and back-end programmers to make an agreement. Of course, this will cause a lot of inconvenience, especially when the interface is open to public development. JSOP is processed in this way: the front end is supported to pass a callback function name parameter, the back end receives the callback function name parameter, and then generates a call to the function, passes the JSON data as a parameter, and inserts it into the page when it reaches the client to start execution.

Example 3:

Dynamically insert code with callback parameters:

Copy code The code is as follows:

Code snippet of JSONP service implemented in PHP on the backend:

Copy code The code is as follows:

$jsonData = getDataAsJson($_GET['symbol']);
echo $_GET['callback'] . '(' . $jsonData . ');';
// Print: showPrice({"symbol" : "IBM", "price" : "91.42"});

It fits well with the definition of JSONP and packages JSON data in function calls.

The above examples come from:

Using JSONP for cross-domain communication, Part 1: Quickly build powerful mashups using JSONP and jQuery

Using JSONP with jQuery

The calling methods of AJAX and JSONP in jQuery look very similar. Don't be confused by this phenomenon. They are very different in nature. AJAX obtains non-page content through the XMLHttpRequest object, while JSONP dynamically adds

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

1 months ago By DDD

R.E.P.O. Best Graphic Settings

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

1 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7413

15

CakePHP Tutorial

1359

52

What is the format of the account name of steam

76

11

win11 activation key permanent

20

19

Show More

Related knowledge

Performance optimization tips for converting PHP arrays to JSON May 04, 2024 pm 06:15 PM

Performance optimization methods for converting PHP arrays to JSON include: using JSON extensions and the json_encode() function; adding the JSON_UNESCAPED_UNICODE option to avoid character escaping; using buffers to improve loop encoding performance; caching JSON encoding results; and considering using a third-party JSON encoding library.

How do annotations in the Jackson library control JSON serialization and deserialization? May 06, 2024 pm 10:09 PM

Annotations in the Jackson library control JSON serialization and deserialization: Serialization: @JsonIgnore: Ignore the property @JsonProperty: Specify the name @JsonGetter: Use the get method @JsonSetter: Use the set method Deserialization: @JsonIgnoreProperties: Ignore the property @ JsonProperty: Specify name @JsonCreator: Use constructor @JsonDeserialize: Custom logic

In-depth understanding of PHP: Implementation method of converting JSON Unicode to Chinese Mar 05, 2024 pm 02:48 PM

In-depth understanding of PHP: Implementation method of converting JSONUnicode to Chinese During development, we often encounter situations where we need to process JSON data, and Unicode encoding in JSON will cause us some problems in some scenarios, especially when Unicode needs to be converted When encoding is converted to Chinese characters. In PHP, there are some methods that can help us achieve this conversion process. A common method will be introduced below and specific code examples will be provided. First, let us first understand the Un in JSON

How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM

How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute

PHP Tutorial: How to Convert JSON Unicode to Chinese Characters Mar 05, 2024 pm 06:36 PM

JSON (JavaScriptObjectNotation) is a lightweight data exchange format commonly used for data exchange between web applications. When processing JSON data, we often encounter Unicode-encoded Chinese characters (such as "u4e2du6587") and need to convert them into readable Chinese characters. In PHP, we can achieve this conversion through some simple methods. Next, we will detail how to convert JSONUnico

Quick tips for converting PHP arrays to JSON May 03, 2024 pm 06:33 PM

PHP arrays can be converted to JSON strings through the json_encode() function (for example: $json=json_encode($array);), and conversely, the json_decode() function can be used to convert from JSON to arrays ($array=json_decode($json);) . Other tips include avoiding deep conversions, specifying custom options, and using third-party libraries.

How to use PHP functions to process JSON data? May 04, 2024 pm 03:21 PM

PHP provides the following functions to process JSON data: Parse JSON data: Use json_decode() to convert a JSON string into a PHP array. Create JSON data: Use json_encode() to convert a PHP array or object into a JSON string. Get specific values ​​of JSON data: Use PHP array functions to access specific values, such as key-value pairs or array elements.

Summary of commonly used file operation functions in PHP Apr 03, 2024 pm 02:52 PM

目录1：basename()2：copy()3：dirname()4：disk_free_space()5：disk_total_space()6：file_exists()7：file_get_contents()8：file_put_contents()9：filesize()10：filetype()11：glob()12：is_dir()13：is_writable()14：mkdir()15：move_uploaded_file()16：parse_ini_file()17：

See all articles