Javascript 什么是JSONP，为什么创建它？
我理解JSON，但不理解JSONP。是JSONP的顶级搜索结果。上面说： JSONP或“带填充的JSON”是一个JSON扩展，其中一个前缀被指定为调用本身的输入参数 嗯？什么电话？那对我来说毫无意义。JSON是一种数据格式。没有电话 这封信来自一个名叫的家伙，他写了一篇关于JSONP的文章： JSONP是脚本标记注入，将响应从服务器传递到用户指定的函数 我可以理解这一点，但它仍然没有任何意义Javascript 什么是JSONP，为什么创建它？,javascript,json,jsonp,terminology,Javascript,Json,Jsonp,Terminology,我理解JSON，但不理解JSONP。是JSONP的顶级搜索结果。上面说： JSONP或“带填充的JSON”是一个JSON扩展，其中一个前缀被指定为调用本身的输入参数 嗯？什么电话？那对我来说毫无意义。JSON是一种数据格式。没有电话 这封信来自一个名叫的家伙，他写了一篇关于JSONP的文章： JSONP是脚本标记注入，将响应从服务器传递到用户指定的函数 我可以理解这一点，但它仍然没有任何意义 那么什么是JSONP呢？为什么创建它（它解决了什么问题）？我为什么要用它 附录：我刚刚在维基百科上创
那么什么是JSONP呢？为什么创建它（它解决了什么问题）？我为什么要用它
附录：我刚刚在维基百科上创建；现在，它基于的答案对JSONP进行了清晰而全面的描述。因为您可以要求服务器为返回的JSON对象预先添加前缀。例如
function\u前缀（json\u对象）
为了使浏览器能够eval
“内联”JSON字符串作为表达式。这一技巧使得服务器可以直接在客户端浏览器中“注入”javascript代码，并且绕过“同源”限制
换句话说，您可以实现跨域数据交换
通常，XMLHttpRequest
不允许直接进行跨域数据交换（需要通过同一域中的服务器），而：
其实并不太复杂
假设您在域example.com
，并且希望向域example.net
发出请求。要做到这一点，你需要跨越域边界，在大多数browserland中都是不
绕过此限制的一项是
标记。当您使用脚本标记时，域限制被忽略，但在正常情况下，您无法对结果执行任何操作，脚本只是得到评估
输入JSONP
。当您向启用JSONP的服务器发出请求时，您会传递一个特殊参数，该参数会告诉服务器一点关于页面的信息。这样，服务器就能够以页面可以处理的方式很好地包装其响应
例如，假设服务器需要一个名为回调的参数来启用其JSONP功能。那么您的请求将如下所示：
http://www.example.net/sample.aspx?callback=mycallback
如果没有JSONP，这可能会返回一些基本的JavaScript对象，如下所示：
{ foo: 'bar' }
但是，对于JSONP，当服务器接收到“callback”参数时，它会以稍微不同的方式包装结果，返回如下内容：
mycallback({ foo: 'bar' });
peopleDataJSONP({"user":"Smith"})
<script src="https://anotherweb.com/api/data-from-people.json?myCallback=peopleDataJSONP"></script>
function peopleDataJSONP(data){
alert(data.user); // "Smith"
}
如您所见，它现在将调用您指定的方法。因此，您可以在页面中定义回调函数：
mycallback = function(data){
alert(data.foo);
};
function minifyResultsCallBack(data)
{
document.getElementById("results").innerHTML = JSON.stringify(data);
}
现在，当脚本被加载时，它将被评估，并且您的函数将被执行。瞧，跨域请求
还值得注意的是，JSONP的一个主要问题是：您失去了对请求的大量控制。例如，没有“好”的方法来获取正确的故障代码。结果，您最终使用计时器来监视请求等，这总是有点可疑。对于允许跨域脚本编写、维护安全性以及允许对请求进行适当控制而言，这是一个很好的解决方案
这几天（2015年）是推荐的方法，而不是JSONRequest。JSONP对于较旧的浏览器支持仍然很有用，但考虑到安全问题，除非您别无选择，否则CORS是更好的选择。JSONP确实是克服XMLHttpRequest相同域策略的一个简单技巧。（正如您所知，不能向其他域发送AJAX（XMLHttpRequest）请求。）
因此，我们不必使用XMLHttpRequest而是必须使用scriptHTML标记，这些标记通常用于加载js文件，以便js从另一个域获取数据。听起来怪怪的
事实是，script标记可以以类似于XMLHttpRequest的方式使用！看看这个：
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data';
加载数据后，您将得到一个类似以下内容的脚本段：
<script>
{['some string 1', 'some data', 'whatever data']}
</script>
看看利润在哪里：现在我们得到了自动回调（my_回调），一旦我们得到数据就会触发。
这就是关于JSONP的所有知识：它是一个回调和脚本标记
注意：这些是JSONP使用的简单示例，它们不是可用于生产的脚本。
基本JavaScript示例（使用JSONP的简单Twitter提要）
函数myCallback（dataWeGotViaJsonp）{
var text=''；
var len=dataWeGotViaJsonp.length；
for（var i=0；iJSONP通过构造“script”元素（在HTML标记中或通过JavaScript插入DOM）工作，请求远程数据服务位置。响应是加载到浏览器上的javascript，带有预定义函数的名称以及传递的参数，该参数是请求的JSON数据。当脚本执行时，该函数与JSON数据一起调用，允许请求页面接收和处理数据
进一步阅读请访问：
客户端代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<title>AvLabz - CORS : The Secrets Behind JSONP </title>
<meta charset="UTF-8" />
</head>
<body>
<input type="text" id="username" placeholder="Enter Your Name"/>
<button type="submit" onclick="sendRequest()"> Send Request to Server </button>
<script>
"use strict";
//Construct the script tag at Runtime
function requestServerCall(url) {
var head = document.head;
var script = document.createElement("script");
script.setAttribute("src", url);
head.appendChild(script);
head.removeChild(script);
}
//Predefined callback function
function jsonpCallback(data) {
alert(data.message); // Response data from the server
}
//Reference to the input field
var username = document.getElementById("username");
//Send Request to Server
function sendRequest() {
// Edit with your Web Service URL
requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
}
</script>
</body>
</html>
<?php
header("Content-Type: application/javascript");
$callback = $_GET["callback"];
$message = $_GET["message"]." you got a response from server yipeee!!!";
$jsonResponse = "{\"message\":\"" . $message . "\"}";
echo $callback . "(" . $jsonResponse . ")";
?>
AvLabz-CORS：JSONP背后的秘密
向服务器发送请求
“严格使用”；
//在运行时构造脚本标记
函数requestServerCall（url）{
var head=document.head；
var script=document.createElement（“脚本”）；
setAttribute（“src”，url）；
head.appendChild（脚本）；
头
whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});
function minifyResultsCallBack(data)
{
document.getElementById("results").innerHTML = JSON.stringify(data);
}
function minify(urlToMinify)
{
url = escape(urlToMinify);
var s = document.createElement('script');
s.id = 'dynScript';
s.type='text/javascript';
s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
document.getElementsByTagName('head')[0].appendChild(s);
}
<html>
<head>
</head>
body>
<input type="button" id="001" onclick=gO("getCompany") value="Company" />
<input type="button" id="002" onclick=gO("getPosition") value="Position"/>
<h3>
<div id="101">
</div>
</h3>
<script type="text/javascript">
var elem=document.getElementById("101");
function gO(callback){
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://localhost/test/server.php?callback='+callback;
elem.appendChild(script);
elem.removeChild(script);
}
function getCompany(data){
var message="The company you work for is "+data.company +"<img src='"+data.image+"'/ >";
elem.innerHTML=message;
}
function getPosition(data){
var message="The position you are offered is "+data.position;
elem.innerHTML=message;
}
</script>
</body>
</html>
<?php
$callback=$_GET["callback"];
echo $callback;
if($callback=='getCompany')
$response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})";
else
$response="({\"position\":\"Development Intern\"})";
echo $response;
?>
$.ajax({
url: "http://api_test_server.proudlygeek.c9.io/?callback=?",
dataType: "jsonp",
success: function(data) {
console.log(data);
}
});
var http = require("http"),
url = require("url");
var server = http.createServer(function(req, res) {
var callback = url.parse(req.url, true).query.callback || "myCallback";
console.log(url.parse(req.url, true).query.callback);
var data = {
'name': "Gianpiero",
'last': "Fiorelli",
'age': 37
};
data = callback + '(' + JSON.stringify(data) + ');';
res.writeHead(200, {'Content-Type': 'application/json'});
res.end(data);
});
server.listen(process.env.PORT, process.env.IP);
console.log('Server running at ' + process.env.PORT + ':' + process.env.IP);
$.ajax({
url: "http://api_test_server.proudlygeek.c9.io/",
success: function(data) {
console.log(data);
}
});
var http = require("http"),
url = require("url");
var server = http.createServer(function(req, res) {
console.log(req.headers);
var data = {
'name': "Gianpiero",
'last': "Fiorelli",
'age': 37
};
res.writeHead(200, {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
});
res.end(JSON.stringify(data));
});
server.listen(process.env.PORT, process.env.IP);
console.log('Server running at ' + process.env.PORT + ':' + process.env.IP);
jQuery.ajax({
url: "https://data.acgov.org/resource/k9se-aps6.json?city=Berkeley",
jsonp: "callbackName",
dataType: "jsonp"
}).done(
response => console.log(response)
);
peopleDataJSONP({"user":"Smith"})
peopleDataJSONP({"user":"Smith"})
<script src="https://anotherweb.com/api/data-from-people.json?myCallback=peopleDataJSONP"></script>
function peopleDataJSONP(data){
alert(data.user); // "Smith"
}