Maison > Article > interface Web > Requêtes inter-domaines : solution d'utilisation ajax jsonp de jQuery

Requêtes inter-domaines : solution d'utilisation ajax jsonp de jQuery

高洛峰original: 2017-01-12 09:45:32857parcourir

L'exécution directe de la méthode d'erreur a provoqué une erreur - ajax jsonp n'a pas été utilisé auparavant, et sa compréhension est similaire à celle des requêtes ajax ordinaires, et je n'en ai aucune compréhension approfondie, cette erreur s'est produite après ; le débogage plusieurs fois (vérifiez le code d'arrière-plan et la partie js des paramètres de propriété) ne fonctionne toujours pas, ce qui me rend très surpris et perplexe. Par conséquent, j'ai décidé d'étudier attentivement l'utilisation d'ajax jsonp et de partager l'expérience d'apprentissage du test final réussi avec tout le monde
Tout d'abord, publiez le code qui peut être exécuté avec succès :
(partie page)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Untitled Page</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
$.ajax({ 
type : "get", 
async:false, 
url : "ajax.ashx", 
dataType : "jsonp", 
jsonp: "callbackparam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback) 
jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名 
success : function(json){ 
alert(json); 
alert(json[0].name); 
}, 
error:function(){ 
alert(&#39;fail&#39;); 
} 
}); 
var a="firstName Brett"; 
alert(a); 
}); 
</script> 
</head> 
<body> 
</body> 
</html>

(Partie gestionnaire)

<%@ WebHandler Language="C#" Class="ajax" %> 
using System; 
using System.Web; 
public class ajax : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/plain"; 
string callbackFunName = context.Request["callbackparam"]; 
context.Response.Write(callbackFunName + "([ { name:\"John\"} ] )"); 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

Description du paramètre de requête ajax :
dataType String
Le type de données qui devrait être renvoyé par le serveur. S'il n'est pas spécifié, jQuery effectuera automatiquement des jugements intelligents basés sur les informations MIME du package HTTP. Par exemple, le type XML MIME est reconnu comme XML. Dans la version 1.4, JSON générera un objet JavaScript et le script exécutera le script. Les données renvoyées par le serveur seront ensuite analysées en fonction de cette valeur et transmises à la fonction de rappel. Valeurs disponibles :
"xml" : renvoie un document XML pouvant être traité avec jQuery.
"html" : renvoie les informations HTML en texte brut ; la balise de script incluse sera exécutée une fois insérée dans le dom.
"script" : renvoie le code JavaScript en texte brut. Les résultats ne sont pas automatiquement mis en cache. Sauf si le paramètre "cache" est défini. '''Remarque : '''Lors de requêtes distantes (pas sous le même domaine), toutes les requêtes POST seront converties en requêtes GET. (Car la balise du script DOM sera utilisée pour le chargement)
"json" : renvoie les données JSON.
"jsonp" : format JSONP. Lors de l'appel d'une fonction au format JSONP, telle que "myurl?callback=?", jQuery remplacera automatiquement ? par le nom de fonction correct pour exécuter la fonction de rappel.
"text": Renvoie une chaîne de texte brut
jsonp String
Réécrit le nom de la fonction de rappel dans une requête jsonp. Cette valeur est utilisée pour remplacer la partie "callback" du paramètre URL dans une requête GET ou POST telle que "callback=?". Par exemple, {jsonp:'onJsonPLoad'} entraînera la transmission de "onJsonPLoad=?". le serveur.
jsonpCallback String
Spécifiez un nom de fonction de rappel pour la requête jsonp. Cette valeur sera utilisée à la place du nom de fonction aléatoire généré automatiquement par jQuery. Ceci est principalement utilisé pour permettre à jQuery de générer des noms de fonctions uniques afin de faciliter la gestion des requêtes et de fournir des fonctions de rappel et de gestion des erreurs. Vous pouvez également spécifier ce nom de fonction de rappel lorsque vous souhaitez que le navigateur mette en cache les requêtes GET.
La principale différence entre les requêtes ajax jsonp et les requêtes ajax ordinaires est le traitement des résultats de la réponse à la requête. Le résultat de la réponse affiché dans le code ci-dessus est :
success_jsonpCallback([ { name: "John"} ] ); ——En fait, il s'agit d'appeler la fonction de rappel jsonp success_jsonpCallback et de transmettre la chaîne ou le json auquel il faut répondre. ici Méthode (comme valeur de paramètre), son implémentation sous-jacente, une estimation approximative devrait être :

function success_jsonpCallback(data) 
{ 
success(data); 
}

Pour plus de requêtes inter-domaines sur l'utilisation de l'ajax jsonp de jQuery et des articles associés, veuillez faire attention au PHP Site chinois !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée du traitement asynchrone jQuery Ajax des données JsonArticle suivant：Explication détaillée du traitement asynchrone jQuery Ajax des données Json

Articles Liés

Voir plus