Méthode d'implémentation inter-domaines Ajax

Cette fois, je vais vous présenter la méthode d'implémentation d'Ajax cross-domain. Quelles sont les précautions pour l'implémentation d'Ajax cross-domain. Voici des cas pratiques, jetons un coup d'œil.

Introduction à ajax

AJAX est "Asynchrone Javascript Et XML" (Javascript asynchrone et XML) fait référence à une technologie de développement Web permettant de créer des applications Web interactives.

AJAX = JavaScript asynchrone et XML (un sous-ensemble du langage de balisage universel standard).

AJAX est une technologie permettant de créer des pages Web rapides et dynamiques.

AJAX permet de mettre à jour les pages Web de manière asynchrone en échangeant une petite quantité de données avec le serveur en arrière-plan. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

Les pages Web traditionnelles (n'utilisant pas AJAX) doivent recharger la page Web entière si le contenu doit être mis à jour.

Passons aux choses sérieuses

Il y a deux jours, xz m'a demandé si je savais comment implémenter des appels inter-domaines avec ajax, car Je n'avais jamais entendu parler de ce concept, donc nous savons aussi comment le mettre en œuvre. xz a déclaré qu'il existe plusieurs façons d'appeler Ajax entre domaines. L'une est la méthode iframe, qui est obtenue en définissant document.domain, et l'autre est obtenue en définissant jsonp. J'ai vérifié les informations au cours des deux derniers jours et écrit quelques démos que je prendrai en note ci-dessous.

J'ai construit trois sites localement et configuré des fichiers hôtes pour simuler des sous-domaines et des domaines croisés

coolkissbh.com

blog.coolkissbh.com

coolkiss.com

1. Quels sont les problèmes avec les appels inter-domaines ajax

La page sous coolkissbh.com utilise le $ de jquery ? .recevoir des appels page blog.coolkissbh.com

requête interdomaine, IE 7 et 8 signalent une erreur d'accès refusé
IE 6.0 apparaît, cette page accède à des informations qui ne sont pas sous son contrôle, cela pose un problème. risque de sécurité.voulez-vous continuer?Boîte d'invite

firefox ne signale pas d'erreur, mais ne fera pas de demande

2. Méthode de mise en œuvre inter-domaines Ajax

1. Implémentez Ajax dans tous les sous-domaines

Exigences : implémentez la page de coolkissbh.com pour demander la page de manière asynchrone. sous blog.coolkissbh.com

Méthode d'implémentation : à l'aide d'iframe, en définissant l'attribut src de l'iframe, intégrez une page sous blog.coolkissbh.com, telle que AjaxProxy.aspx, puis utilisez le page pour demander Ajax

Demande AjaxProxy Une fois terminé, les données renvoyées sont renvoyées à la page principale de coolkissbh.com via l'objet parent. Par conséquent, la véritable requête asynchrone se produit toujours sous le nom de domaine de blog.coolkissbh.com

Remarque : la requête ajax inter-sous-domaines implémentée via cette méthode doit être sur la page de requête de coolkissbh.com et d'AjaxProxy. Page .aspx Définissez le même nom de domaine dans , c'est-à-dire
document.domain = "coolkissbh.com";

Remarque : concernant la question de la définition du domaine, s'il s'agit de l'ensemble du domaine, lorsque en utilisant la méthode ci-dessus, Firefox affichera le code
Illegal document.domain value" : "1009 error, donc seule la deuxième méthode

peut être utilisée pour traiter les données renvoyées sur l'ensemble du domaine :

AjaxProxy.aspx renverra les données d'ajax. Enregistrez-les dans une variable globale. coolkissbh.com utilise setInterval pour déterminer périodiquement si la page iframe est chargée. Si le chargement est terminé, obtenez la valeur de la variable globale d'AjaxProxy.aspx. Ensuite, effectuez un autre traitement.

Il y a un problème ici : j'avais initialement prévu d'appeler la méthode parent et de renvoyer les données une fois la requête ajax de AjaxProxy.aspx terminée, mais sous IE, "autorisation" apparaîtra la première fois que je clique sur refusé " erreur, cliquez à nouveau et ce sera normal. Il n'y a aucun problème dans Firefox, je ne sais pas pourquoi.

2, implémentez ajax sur l'ensemble du domaine

Exigences : implémentez la page de coolkissbh.com pour demander de manière asynchrone la page sous coolkiss.com

Méthode de mise en œuvre : ci-dessus Il est mentionné que le cross-domain ne peut pas être réalisé en définissant la méthode de domaine. Mais cela peut être réalisé en utilisant la balise script. En définissant l'attribut src de la balise script sur une page sous le nom de domaine coolkiss.com et en transmettant la fonction de rappel à la page, par exemple :

RequestAjax_CrossSite = function() {
var obj = $("#crossSitePage");
obj.attr("src", "http://coolkiss.com/CrossSite.aspx?callback=handleData3");
}
handleData3 = function(data) {
$("#ResponseData").html(data);
}

CrossSite.aspx renvoie une chaîne, transmet les données renvoyées au rappel, exécute la fonction de rappel et implémente ajax, par exemple :

Response.Clear();
Response.Write(string.Format("{0}('{1}')", Request["callback"], ResponseData));
Response.End( );

Remarque : Cette méthode peut également être utilisée pour traiter les problèmes ajax inter-sous-domaines, mais elle ne peut pas obtenir les différents statuts des appels ajax comme

3, via. jsonp de jquery Pour implémenter l'ajax inter-domaines, le principe est en fait le même que la deuxième méthode. Il prend en charge les domaines et sous-domaines

jquery 1.2 a ajouté un appel à ajax inter-domaines, qui est la fonction $.getJSON

La méthode d'appel est la suivante :

Ce qui suit est la page sous coolkissbh.com

//使用jsonp实现跨全域
RequestAjax_JSONP = function() {
var obj = $("#crossSitePage");
$.getJSON("http://coolkiss.com/CrossSite.aspx?callback=?&t=" + Math.random(), function(data) {
//alert(data);
$("#ResponseData").html(data.content);
});
}

code de traitement en arrière-plan coolkiss.com, passer un objet json au rappel :

public partial class CrossSite : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LoadData_JSONP();
}
}
protected void LoadData_JSONP()
{
string responseData = "{content:\"hello world from coolkiss.com\"}";
if (Request["callback"] != null && !string.IsNullOrEmpty(Request["callback"]))
{
Response.Clear();
Response.Write(string.Format("{0}({1})", Request["callback"], responseData));
Response.End();
}
}
}

callback=? Elle sera automatiquement remplacée par la fonction function(data).

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment JSONP gère l'accès inter-domaines Ajax

Redirection pour se connecter immédiatement après l'échec d'Ajax+Session Page

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!