Récemment, Ajax a rencontré des problèmes croisés lors de la visite de WebService. Rechercher des informations en ligne et les résumer comme suit (beaucoup d'entre eux pensent qu'ils les ont bien copiés)
<< Utilisez JSON pour transférer des données, comptez sur JSONP pour croix >>
Tout d'abord, j'ajouterai mon code implémenté:
Code frontal:
$ .ajax ({type: "get", URL: "http: //localhost/service1.asmx/getelevatorstatusjsondata? jsoncallback =?", DataType: "JSONP", jsonp: "json", data: "", la fonction (résultat) {var data = eval (résultat); pour (var i = 0; i ++) {alert (data [i] .id + "-" + data [i] .name);}}, erreur: fonction (a, b, c) {alert (c);}});Code du serveur:
/// <summary> /// Obtenir des informations sur les données d'état ///// </ résumé> /// <retourne> </preminds> [webMethod] public void getElevatorStatusjSondata () {list <list <deviceInfo>> elevatordatas = new List <list <listInfo>> (); List <enddicDate> searchList = xmlSerializehelper.xmldeSerializefromfile <list <enddicDate> (@ configutil.servicepath + configUtil.getConfigbykey ("xmlpath") + "Query Directive Information.xml", Encoding.Utf8); foreach (élément SenddicDate dans searchList) {String key = item.portno + "-" + item.bordrate + "-" + item.sendType; List <deviceInfo> deviceInfolist = (list <deviceInfo>) context.cache.get (key); elevatordatas.add (DeviceInfolist); } String result = ""; DataContractJSonSerializer JSON = new DataContractJSonSerializer (elevatordatas.getType ()); Utilisation (MemoryStream Stream = new MemoryStream ()) {JSON.WriteObject (Stream, Elevatordatas); result = coding.utf8.getString (stream.toArray ()); } String jsonCallback = httpcontext.current.request ["JSONCallback"]; result = jsonCallback + '(' + result + ')'; HttpContext.current.Response.Write (résultat); HttpContext.current.Response.end (); }C #
Ce qui précède est le code d'implémentation qui appelle le serveur C #, et ce qui suit est le côté Java. Les paramètres peuvent être différents, mais les principes sont les mêmes
Java:
String callbackFunName = context.Request ["callbackParam"]; context.Response.write (callbackfunname + "([{/" name / ": /" John / "}])");PS: Le paramètre JSONP du client est utilisé pour transmettre les paramètres via URL et passer le nom du paramètre du paramètre JSONPCallback. Il est difficile de prononcer et en termes simples:
JSONP: ""
JSONPCallback: ""
Soit dit en passant: dans le navigateur Chrome, vous pouvez également définir le contexte d'information de l'en-tête.Response.addheader ("Access-Control-Allow-Origin", "*"); sur le serveur pour atteindre l'objectif des demandes de domaine transversal, et il n'est pas nécessaire de définir les paramètres suivants de l'AJAX
DataType: "JSONP", JSONP: "callbackParam", JSONPCallback: "JSONPCallback1"
Les données peuvent être obtenues en mode de demande AJAX normal.
Ce qui suit est le principe. Cela semble très raisonnable lorsque vous lisez ce que les autres ont expliqué:
1. Un problème bien connu. AJAX demande directement les fichiers ordinaires sans permission d'accéder à des domaines. Peu importe si vous êtes une page statique, une page Web dynamique, un service Web ou un WCF, tant qu'il s'agit d'une demande de domaine croisé, ce ne sera pas correct;
2. Cependant, nous avons constaté que lorsque vous appelez des fichiers JS sur la page Web, ils ne sont pas affectés par le fait qu'ils soient du domaine transversal (non seulement cela, nous avons également constaté que toutes les balises avec l'attribut "SRC" ont des capacités de domaine croisé, telles que
3. Ainsi, il peut être jugé qu'à ce stade, si vous souhaitez accéder aux données sur des domaines via Pure Web (Controls ActiveX, proxy de serveur, futurs websocket HTML5, etc., il s'agit d'essayer de charger les données dans un fichier de format JS sur le serveur distant pour l'appel du client et un traitement plus approfondi;
4. Nous savons qu'il existe un format de données de caractère pur appelé JSON qui peut décrire de manière concise des données complexes. Ce qui est encore mieux, c'est que JSON est soutenu nativement par JS, afin que le client puisse traiter les données dans ce format presque comme vous le souhaitez;
5. Cette solution sort. Le client Web appelle le fichier de format JS (généralement avec JSON en tant que suffixe) généré dynamiquement sur le serveur de domaine croisé de la même manière que le script d'appel. Il est évident que la raison pour laquelle le serveur souhaite générer dynamiquement des fichiers JSON est de charger les données nécessaires au client.
6. Après que le client ait réussi le fichier JSON, il obtient les données dont il a besoin. Le reste est de le traiter et de l'afficher en fonction de ses propres besoins. Cette façon d'obtenir des données distantes ressemble à Ajax, mais elle est en fait différente.
7. Afin de faciliter le client pour utiliser des données, un protocole de transmission informel a été progressivement formé. Les gens l'appellent JSONP. L'un des points clés de ce protocole est de permettre aux utilisateurs de transmettre un paramètre de rappel au serveur. Lorsque le serveur renvoie les données, il utilisera ce paramètre de rappel comme nom de fonction pour envelopper les données JSON, afin que le client puisse personnaliser ses propres fonctions pour traiter automatiquement les données de retour.
Il est facile pour les développeurs intelligents de penser que tant que le script JS fourni par le serveur est généré dynamiquement, l'appelant peut transmettre un paramètre et dire au serveur "Je veux un code JS qui appelle la fonction XXX, veuillez me le retourner", afin que le serveur puisse générer le script JS et répondre en fonction des besoins du client.
<! 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"> <éadf> <t titre> </ title> <script type = "text / javascrip piao '+ data.tickets +' zhang. '); }; // Fournit l'adresse URL du service JSONP (quel que soit le type d'adresse, la valeur de retour finale est un morceau de code javascript) var url = "http://flightquery.com/jsonp/flightresult.aspx?code=ca1998&callback=flightthandler"; // Créer une balise de script et définir ses attributs var script = document.createElement ('script'); script.setAttribute ('src', url); // Ajouter la balise de script à la tête, et l'appel démarre //Document.getElementsByTagname('head') )0.APPENDCHILD(Script); </cript> </ head> <body> </ body> </html> <! 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"> <éad- head> <Title> Page Untitled </ title> <script = "Text / javascrip "Get", async: false, URL: "http://flightquery.com/jsonp/flightresult.aspx?code=ca1998", type de données: "JSONP", JSONP: "rappel", // transmis au gestionnaire de requête ou à la page) pour obtenir le nom de paramètre du nom de la fonction de rappel JSONP est: Rappel) JSONPCallback: "Flighthandler", // Nom de la fonction de rappel JSONP personnalisé, par défaut est le nom de fonction aléatoire généré automatiquement par jQuery, ou vous pouvez écrire "?", jQuery traitera automatiquement les données pour votre succès: fonction (JSON) {alert ('You Query Informations de vol: Piao Price:' + JSON.Price + 'Yuan et Piao:' + json.Tickets. Zhang. ');}, Erreur: FonctionN'est-ce pas un peu étrange? Pourquoi n'ai-je pas écrit la fonction que la fonction cette fois? Et cela a fonctionné avec succès! Haha, c'est le crédit de jQuery. Lorsque JQuery gère JSONP Type Ajax (je ne peux pas m'empêcher de me plaindre. Bien que JQuery classe également JSONP en Ajax, ils ne sont en fait pas la même chose), il générera automatiquement une fonction de rappel et supprimera les données pour la méthode d'attribut de réussite pour l'appeler. N'est-ce pas très bon?