How does jsonp obtain data across domains? (code example)
How does jsonp obtain data across domains? This article will introduce to you the method of jsonp to obtain cross-domain data. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Jsonp cross-domain data acquisition explanation
Since the browser has a same origin policy, if you want to obtain non-original origin (protocol, domain name , if the three ports are different, they are considered non-original) The data of the page must be cross-domain
(1) jsonp principle
Since the src attribute of the script tag can access non-original js scripts, accessing the server through the src attribute will return the js code of the function, and the data we want is returned as a function parameter, and we will first define this function and return The js code can be executed
(2) jsonp implementation code
Request page
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function jsonp(data){
console.log(username)
}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
var url = "http://www.example.com/jsonp.php?callback=jsonp";
var script = $('<script><\/script>');
script.attr("src",url);
$("body").append(script);
});
</script>
</body>
</html><?php
$data = {'name': '张三'};
$callback = $_GET['callback'];
echo $callback."(".json_encode($data).")";
?php>After that, php will return
jsonp（{
name:'niuni
}）Then the code h returned by PHP will be executed by the jsonp method of the requested page
(3) jQuery’s simple jsonp cross-domain
<script>
function showData (data) {
console.info(data);
}
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
url: "http://www.example.comjsonp",
type: "GET",
dataType: "jsonp",// 返回数据类型
jsonpCallback: "showData",//回调函数
// 获取数据成功就执行success函数
success: function (data) {
console.info("data");
}
});
});
});
</script>Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !
The above is the detailed content of How does jsonp obtain data across domains? (code example). For more information, please follow other related articles on the PHP Chinese website!
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.
Hot Article
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)
Hot Topics
1378
52
Solution to PHP Session cross-domain problem
Oct 12, 2023 pm 03:00 PM
Solution to the cross-domain problem of PHPSession In the development of front-end and back-end separation, cross-domain requests have become the norm. When dealing with cross-domain issues, we usually involve the use and management of sessions. However, due to browser origin policy restrictions, sessions cannot be shared by default across domains. In order to solve this problem, we need to use some techniques and methods to achieve cross-domain sharing of sessions. 1. The most common use of cookies to share sessions across domains
What is the best way to get stock data using Python?
Aug 26, 2023 pm 01:41 PM
In this article, we will learn the best way to get stock data using Python. The yfinancePython library will be used to retrieve current and historical stock market price data from Yahoo Finance. Install Yahoo Finance (yfinance) One of the best platforms to get stock market data is Yahoo Finance. Simply download the dataset from the Yahoo Finance website and use the yfinance library and Python programming to access it. You can install yfinance with the help of pip, all you have to do is open the command prompt and type the following command to show the syntax: Syntax pipinstallyfinance The best part about the yfinance library is that it is free to use and does not require an API key like
How to make cross-domain requests in Vue?
Jun 10, 2023 pm 10:30 PM
Vue is a popular JavaScript framework for building modern web applications. When developing applications using Vue, you often need to interact with different APIs, which are often located on different servers. Due to cross-domain security policy restrictions, when a Vue application is running on one domain name, it cannot communicate directly with the API on another domain name. This article will introduce several methods for making cross-domain requests in Vue. 1. Use a proxy A common cross-domain solution is to use a proxy
How to use Flask-CORS to achieve cross-domain resource sharing
Aug 02, 2023 pm 02:03 PM
How to use Flask-CORS to achieve cross-domain resource sharing Introduction: In network application development, cross-domain resource sharing (CrossOriginResourceSharing, referred to as CORS) is a mechanism that allows the server to share resources with specified sources or domain names. Using CORS, we can flexibly control data transmission between different domains and achieve safe and reliable cross-domain access. In this article, we will introduce how to use the Flask-CORS extension library to implement CORS functionality.
How to use JSONP to implement cross-domain requests in Vue
Oct 15, 2023 pm 03:52 PM
Introduction to how to use JSONP to implement cross-domain requests in Vue. Due to the restrictions of the same-origin policy, the front-end will be hindered to a certain extent when making cross-domain requests. JSONP (JSONwithPadding) is a cross-domain request method. It uses the characteristics of the <script> tag to implement cross-domain requests by dynamically creating the <script> tag, and passes the response data back as a parameter of the callback function. This article will introduce in detail how to use JSONP in Vue
How to allow cross-domain use of images and canvas in HTML?
Aug 30, 2023 pm 04:25 PM
To allow images and canvases to be used across domains, the server must include the appropriate CORS (Cross-Origin Resource Sharing) headers in its HTTP response. These headers can be set to allow specific sources or methods, or to allow any source to access the resource. HTMLCanvasAnHTML5CanvasisarectangularareaonawebpagethatiscontrolledbyJavaScriptcode.Anythingcanbedrawnonthecanvas,includingimages,shapes,text,andanimations.Thecanvasisagre
Cross-domain problems encountered in Vue technology development and their solutions
Oct 08, 2023 pm 09:36 PM
Cross-domain problems and solutions encountered in the development of Vue technology Summary: This article will introduce the cross-domain problems and solutions that may be encountered during the development of Vue technology. We'll start with what causes cross-origin, then cover a few common solutions and provide specific code examples. 1. Causes of cross-domain problems In web development, due to the browser's security policy, the browser will restrict requests from one source (domain, protocol or port) for resources from another source. This is the so-called "same origin policy". When we are developing Vue technology, the front-end and
Use CORS in Beego framework to solve cross-domain problems
Jun 04, 2023 pm 07:40 PM
With the development of web applications and the globalization of the Internet, more and more applications need to make cross-domain requests. Cross-domain requests are a common problem for front-end developers, and it can cause applications to not work properly. In this case, one of the best ways to solve the problem of cross-origin requests is to use CORS. In this article, we will focus on how to use CORS in the Beego framework to solve cross-domain problems. What is a cross-domain request? In web applications, cross-domain requests refer to requests from a web page of one domain name to another
