Maison >interface Web >js tutoriel >Comment puis-je effectuer des requêtes AJAX JSONP inter-domaines avec jQuery ?

Comment puis-je effectuer des requêtes AJAX JSONP inter-domaines avec jQuery ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-25 15:21:13474parcourir

How Can I Make Cross-Domain AJAX JSONP Requests with jQuery?

Faire des requêtes AJAX JSONP inter-domaines avec jQuery

Dans votre extrait de code, vous essayez d'analyser les données JSON à partir d'un service hébergé sur un domaine différent à l'aide de la fonctionnalité AJAX de jQuery. Toutefois, les requêtes AJAX inter-domaines nécessitent des considérations supplémentaires pour fonctionner correctement.

AJAX inter-domaines

Par défaut, les navigateurs limitent les requêtes AJAX aux URL de même origine. en raison de problèmes de sécurité. Pour surmonter ce problème, vous devez implémenter JSONP (JSON with Padding), qui vous permet d'effectuer des requêtes inter-domaines à l'aide d'un <script> tag.</p> <p><h3>Method Injection</h3></p> <p>Dans votre code côté serveur, vous devez prendre en charge l'injection de méthode. Lorsque vous utilisez jQuery avec « dataType : « jsonp », il ajoute un paramètre de requête à l'URL avec un nom de méthode généré aléatoirement. Votre serveur doit ensuite envelopper la réponse JSON avec ce nom de méthode en tant qu'appel de fonction.</p> <p><h3>Code corrigé</h3></p> <p>Assurez-vous que votre serveur encapsule correctement la réponse JSON avec le nom de la méthode transmis dans la chaîne de requête. Par exemple, si votre chaîne de requête inclut ?callback=my_callback_method, votre serveur doit répondre avec :</p> <p>my_callback_method({your json sérialisé data});</p> <p>Une fois cela implémenté, votre code jQuery devrait analyser les données JSON avec succès :</p> <p><br><script type="text/javascript"><br>var result;<br>function jsonparser1() {</p> <pre class="brush:php;toolbar:false">$.ajax({ type: &quot;GET&quot;, url: &quot;http://10.211.2.219:8080/SampleWebService/sample.do&quot;, dataType: &quot;jsonp&quot;, success: function (xml) { alert(xml.data[0].city); result = xml.code; document.myform.result1.value = result; }, });</pre> <p>} <br></script>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en 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