Explication détaillée du cross-domain ajax et jsonp (avec code)

Cette fois, je vais vous apporter une explication détaillée du cross-domain ajax et jsonp (avec code). Quelles sont les précautions pour la mise en œuvre du cross-domain ajax et jsonp. Voici des cas réels, prenons. un regard.

Pourquoi y a-t-il des problèmes inter-domaines ? - Parce qu'il existe une politique de même origine

La politique de même origine est une politique de sécurité du navigateur. La soi-disant même origine fait référence au protocole, au nom de domaine et au port. dans l'adresse URL de la demande, tant que l'une des différences est inter-domaines

La politique de même origine vise principalement à assurer la sécurité du navigateur

Sous la politique de même origine , le navigateur ne permet pas à Ajax d'obtenir des données de serveur sur plusieurs domaines

http://www.example.com/detail.html

Demande inter-domaines :

• http://api.example.com/detail.html Le nom de domaine est différent

• http://www.example.com :8080/detail.html Le port est différent

• http://api.example.com:8080/detail.html Le nom de domaine et le port sont différents

• https://api.example.com/detail.html Le protocole et le nom de domaine sont différents

• https://www.example.com:8080/ detail.html Différents ports et protocoles

ajaxConcepts de base

Pour comprendre ce concept , vous devez d'abord connaître l'interaction synchrone et l'interaction asynchrone

• Interaction synchrone : navigation client Le serveur envoie une requête au serveur, et le serveur renvoie une page La page renvoyée écrasera la précédente. page. Nous appelons cette méthode d'interaction interaction synchrone

• Interaction asynchrone : elle peut Le navigateur enverra une requête au serveur, et le serveur renverra les données renvoyées. la page précédente. Nous appelons cette méthode d'interaction interaction asynchrone

ajax Principaux scénarios d'application : L'interaction dynamique des données avec le serveur peut être effectuée sans actualiser la page

Principe d'interaction

• Principe d'interaction synchrone : Comment envoyer une requête au serveur dans le navigateur ? Vous pouvez cliquer sur un lien hypertexte, soumettre un formulaire et saisir une adresse dans la barre d'adresse du navigateur, le tout envoyant des requêtes au serveur. En fait, le navigateur nous aide à envoyer des requêtes au serveur

<.>
• Le principe de l'interaction asynchrone : JavaScript nous fournit une nouvelle interface API pour nous aider à envoyer des requêtes http L'objet XMLHttpRequest nous aide à envoyer des requêtes

Toutes nos opérations interactives peuvent. se faire via cet objet. Complétez, envoyez la demande et acceptez les données du serveur

Scénarios d'application spécifiques d'ajax

• La réception peut transmettre XMLHttpRequest au serveur. Envoyer une requête, puis accepter les données renvoyées par le serveur via l'objet XMLHttpRequest, et enfin écrire les données sur la page via des opérations dom

• ajax : peut être utilisé pour la vérification des spécifications d'entrée du formulaire

• ajax : il peut également être utilisé pour

  l'optimisation des performances Par exemple, si une page est très. grand et il est impossible de tout charger d'un coup, un chargement roulant peut être implémenté

Quatre étapes d'interaction XMLHttpRequest

1. Instanciez l'objet XMLHttpRequest

2. Si vous souhaitez interagir avec le serveur, vous devez interagir avec Le serveur ouvre une connexion

3. Envoyer des données au serveur et paramètre données au serveur

4. Acceptez les données renvoyées par le serveur. Le serveur renverra un certain statut lors du retour au client. Vous pouvez transmettre les modifications de l'état du serveur pour mieux contrôler l'ensemble du processus d'interaction

<.>

cross-domaine ajaxCross-domaine : Supposons que je visite un site, l'arrière-plan me renvoie une page, puis je souhaite accéder aux ressources de site B sur cette page du site A. Il s'agit d'un effet inter-domaines. Les navigateurs inter-domaines ont des restrictions de sécurité

.

Solution inter-domaines : méthode jsonp

Le nom complet de JSONP est JSON with Padding, qui est basé sur le format JSON et est généré pour résoudre des problèmes croisés. solution aux demandes de ressources de domaine. Le principe de base de sa mise en œuvre est d'utiliser la balise d'élément <script></script> en HTML pour appeler à distance le fichier JSON afin de réaliser le transfert de données. Si vous souhaitez récupérer les données JSON (getUsers.JSON) qui existent dans b.com sous le domaine a.com :

Le principe essentiel de jsonp pour résoudre les problèmes inter-domaines : Parce que les navigateurs ont des restrictions de même origine , différents sites ne peuvent pas communiquer entre eux, mais parfois nous souhaitons simplement obtenir des données d'autres sites, par exemple en ajoutant des données Prévisions météorologiques là où nous voulons obtenir des données rapides. alors que devons-nous faire ?

Principe : il s'agit de créer dynamiquement la balise

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript