Principe jsonp

Utilisation script L'étiquette n'a pas de vulnérabilité de restriction inter - domaines,Les pages Web peuvent être générées dynamiquement à partir d'autres sources JSON Données.JSONP
.La demande doit être prise en charge par le serveur de l'autre.

1. JSONPEtAJAXComparer
   JSONPEtAJAXMême chose.,C'est le client qui envoie la demande au serveur,Comment obtenir les données du côté serveur.Mais...AJAXDe
   Politique d'Homologie,JSONPAppartient à une politique non homologue（Demandes transversales）
2. JSONPAvantages et inconvénients
   JSONPL'avantage est une bonne compatibilité simple,Peut être utilisé pour résoudre les problèmes d'accès aux données inter - domaines des principaux navigateurs.L'inconvénient est qu'il ne supporte quegetFang
   La loi a ses limites,L'insécurité peut souffrirXSSAttaque.
3. JSONPProcessus de mise en œuvre

• Déclarer une fonction de rappel,Son nom de fonction(Par exemple:show)Comme valeur du paramètre,Serveur à transmettre à la demande de données inter - domaines,Paramètre de fonction
  Pour obtenir les données de destination(Serveur retournédata).
• Créer un``Étiquettes,Prenez ce Cross - DomainAPIAdresse de l'interface de données,Assigner une valeur àscriptDesrc,Et dans cette adresse au serveur
  Passez le nom de la fonction（Les paramètres peuvent être transmis par des points d'interrogation:?callback=show）.
• Après réception de la demande par le serveur,Traitement spécial requis：Assemblez le nom de la fonction passée avec les données qu'elle doit vous donner
  String,Par exemple：Le nom de la fonction passée estshow,Les données qu'il a préparées sont: show(‘Je ne t'aime pas.’) .
• Enfin, le serveur passe les données préparées à traversHTTPProtocole retourné au client,Le client rappelle la fonction de rappel précédemment déclarée pour l'exécution
  （show）,Manipulation des données retournées.
  Vous pouvez rencontrer plusieurs JSONP Le nom de la fonction de rappel demandée est le même,À ce moment - là, vous devez vous encapsuler JSONP
  Fonctions.

// index.html 
function jsonp({
      url, params, callback }) {
    
 return new Promise((resolve, reject) => {
     
 	let script = document.createElement('script') 
 	window[callback] = function(data) {
     
 		resolve(data) 
 		document.body.removeChild(script) 
 	}
 	params = {
     ...params, callback } // wd=b&callback=show 
 	let arrs = [] 
 	for (let key in params) {
    
 		 arrs.push(`${
      key}=${
      params[key]}`) 
 	}
 	script.src = `${
      url}?${
      arrs.join('&')}` 
 	document.body.appendChild(script) 
 })
}
jsonp({
     
	url: 'http://localhost:3000/say', 
	params: {
     wd: 'Iloveyou' }, 
	callback: 'show' 
}).then(data => {
     
	console.log(data) 
})

Le code ci - dessus est équivalent à http://localhost:3000/say?wd=Iloveyou&callback=show Nombre de demandes à cette adresse
Selon,Puis l'arrière - plan revient show(‘Je ne t'aime pas.’) ,Ça va finir par marcher.show()Cette fonction,Imprimer’Je ne t'aime pas.’

// server.js 
let express = require('express') 
let app = express() 
app.get('/say', function(req, res) {
    
	 let {
     wd, callback } = req.query 
	 console.log(wd) // Iloveyou 
	 console.log(callback) // show 
	 res.end(`${
      callback}('Je ne t'aime pas.')`) 
})
app.listen(3000)

4. jQueryDejsonpForme
   JSONPTous.GETEt asynchrone,Il n'y a pas d'autre méthode de demande et de demande de synchronisation,EtjQueryPar défaut.JSONPDemande de nettoyage du cache pour.

$.ajax({
     
	url:"http://crossdomain.com/jsonServerResponse",
	 dataType:"jsonp", 
	 type:"get",//Peut être omis 
	 jsonpCallback:"show",//->Personnaliser le nom de la fonction passée au serveur,Au lieu d'utiliserjQueryGénéré automatiquement,Peut être omis
	 jsonp:"callback",//->Le paramètre qui passe le nom de la fonctioncallback,Peut être omis 
	 success:function (data){
     
	 console.log(data);} 
});