Qu'est-ce que JSONP?
Baidu regarder avec désinvolture sur le site, il y a beaucoup d'explications au sujet JSONP, mais il se sent comme un tout, et après avoir lu beaucoup encore hébétée, pour beaucoup de gens qui sont nouveaux JSONP encore difficile à comprendre, essayez d'utiliser leur propre langue pour parler JSONP, voir si elle vous aide.
Tout d'abord, laissez-nous parler de la façon JSONP est générée:
1, un problème bien connu, l'Ajax demande interdomaine directe sans accès à un problème de fichier commun, peu importe que vous êtes des pages statiques, les pages Web dynamiques, des services Web, WCF, aussi longtemps que les demandes inter-domaines, seront autorisés.
2, mais nous avons aussi constaté que l'impact de interdomaine est pas si vous appelez fichier js sur une page Web (Non seulement cela, nous avons aussi constaté que ceux qui ont l'attribut « src » des balises ont la possibilité de contre-domaine, tel que <\ script> , <\ img>, <\ iframe>).
3, de sorte que vous pouvez juger par le stade actuel si vous voulez mettre fin à la Web pur (les contrôles ActiveX, serveur proxy, l'avenir appartient à HTML5 est pas le Websocket etc.) l'accès aux données à travers des domaines est le seul possible, qui est d'essayer sur un serveur distant js chargé dans le format de données, les appels des clients et pour un traitement ultérieur.
4, comme il arrive que nous savons déjà qu'il ya quelque chose appelé pur caractère JSON description concise format de données de données complexes, mieux encore est js également prise en charge native de JSON, donc ce format des données de traitement sur le côté client peut être presque arbitraire.
5, avec les solutions prêtes à venir, client Web en appelant le script exactement de la même manière, au format de fichier d'appel généré dynamiquement sur le serveur inter-domaines (généralement le suffixe JSON), il est évident pourquoi le serveur pour générer dynamiquement JSON document, le but est de charger des données dans les besoins des clients.
6, le client après l'appel à la réussite du fichier JSON, les données également obtenues dont ils ont besoin, le reste est traité conformément à leurs besoins et montrent que cette façon de regards d'acquisition de données à distance très bien comme AJAX, mais en fait pas la même chose.
7, en vue de faciliter l'utilisation des données de client, formé progressivement un protocole de transport informel, il JSONP appeler, un point de ce protocole est de permettre aux utilisateurs de transmettre un paramètre de rappel vers le serveur, le serveur puis retourner les données lorsque le nom de la fonction de rappel comme paramètre pour envelopper les données JSON afin que les clients peuvent personnaliser librement leur fonction pour traiter automatiquement les données renvoyées.
Si vous comment utiliser certains paramètres vagues pour un rappel, alors nous aurons des exemples concrets pour expliquer plus tard.
JSONP mise en œuvre spécifique du client:
Quelle que soit la jQuery Ye Hao, ExtJS mentionner la valeur, ou tout autre cadre jsonp de soutien du travail accompli dans les coulisses, ils sont identiques, Laissez-moi vous expliquer étape par étape pour atteindre le jsonp du client:
1, nous savons que, même si le code de fichier inter-domaines (bien sûr, signifie une politique de sécurité de script web), les pages Web peuvent également être exécutées sans condition.
Il y a à la base d'un code de fichier serveur distant remoteserver.com remote.js est la suivante:
alert('我是远程文件');
Là, sous un serveur local localserver.com jsonp.html code page est comme suit:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="http://remoteServer.com/remote.js"></script>
</head>
<body>
</body>
</html>
Sans aucun doute, la page fera apparaître une fenêtre d'invite, montrant le succès des appels inter-domaines.
2. Maintenant, nous définissons une fonction, puis Convoquez les données entrantes dans la page de remote.js à distance.
jsonp.html code de la page est la suivante:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
var localHandler = function(data){
alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
};
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>
</body>
</html>
Code remote.js document est le suivant:
localHandler ({ « résultat »: «J'ai été amené js données à distance »});
voir les résultats après l'opération, la page fenêtre conduit avec succès, affiche la fonction locale est l'appel d'une distance inter-domaines réussit, et a également reçu avec js à distance aux données.
Très satisfait, le but de l' accès à distance inter-domaines aux données essentiellement obtenus, mais il est un problème, comment puis-je laisser la fonction js à distance , il doit appeler le savoir -faire local Quel est le nom de celui - ci? Après tout, le service est jsonp qui doivent faire face à beaucoup de clients, et ceux - ci servent leurs fonctions locales ne sont pas les mêmes ah? Nous examinons ensuite vers le bas.
3, les développeurs intelligents peuvent facilement penser, tant que serveur de script js fournit est généré dynamiquement sur la ligne en chantant, afin que l'appelant peut passer un paramètre dans le passé pour dire au serveur « Je veux code que certains appellent la fonction XXX, vous revenez me voir », de sorte que la boîte de serveur conformément aux besoins du client pour générer le script js et a répondu à.
Regardez la page jsonp.html de code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
// 得到电影信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的电影结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
};
// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
var url = "http://flightQuery.com/jsonp/flightResult.aspx?time=12m12d&callback=flightHandler";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>
Ce changement de code est relativement important, ne plus écrire directement aux js à distance fichier mort, mais codage requête dynamique, ce qui est ce que la mise en œuvre du client jsonp de la partie de base, l'accent dans ce cas est de savoir comment le faire est d'appeler jsonp l'ensemble du processus.
Nous voyons les paramètres d'appel d'URL transmis une fois, je veux dire au serveur de vérifier les informations sur le 12 Décembre, alors que le paramètre de rappel indique au serveur de ma fonction de rappel local appelé flightHandler, donc s'il vous plaît passer les résultats de la requête cet appel de fonction.
OK, le serveur est très intelligent, ce qu'on appelle la génération de pages flightResult.aspx pendant un certain temps à ce code jsonp.html:
flightHandler({
"time": "12m12d",
"price": 39,
"tickets": 16
});
4. Jusqu'à ce point, je crois que vous avez été en mesure de comprendre le principe de la mise en œuvre du client jsonp, non? Le reste est sur la façon dont le paquet de code, afin d'interagir avec l'interface utilisateur, ce qui permet des appels répétés et multiples
JQuery comment réaliser appel jsonp?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled Page</title>
<script type="text/javascript" src=jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(json){
alert('您查询到电影信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
},
error: function(){
alert('fail');
}
});
});
</script>
</head>
<body>
</body>
</html>
Est - ce pas étrange? Pourquoi cette fois , je ne pas écrire flightHandler cette fonction? Et l' opération étonnamment réussie!
Ceci est un crédit à la jQuery, jquery en traitant le type jsonp de ajax (, bien que le jquery jsonp également inclus dans le ajax, mais en fait , ils ne sont vraiment pas les mêmes chose que les enfants), le rappel automatique et vous aider à générer les données prises sur méthode de propriété à l' appel de la réussite, est pas refroidir?
supplément
Enfin, les similitudes et ajax JSONP et différences ajouté:
. 1 et jsonp ajax sur ces deux technologies est appelée « look » comme un objet, aussi, est une URL de requête, puis le serveur renvoie les données sont traitées, et donc jquery jsonp considéré comme un cadre. Ext ajax une forme d'emballage.
2, mais le ajax et jsonp fait quelque chose de différent nature. Ajax est d'acquérir du contenu non-core sur cette page par XMLHttpRequest, tandis que le noyau est ajouté dynamiquement jsonp
