Comment implémenter des requêtes inter-domaines ajax et ajax dans JS

L'éditeur ci-dessous partagera avec vous un exemple de JS natif implémentant des requêtes inter-domaines ajax et ajax. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur pour y jeter un œil

1 Implémentation d'ajax avec du JS natif

La première étape consiste à obtenir l'objet XMLHttpRequest

Étape 2 : Configurer la fonction d'écoute des statuts

Étape 3 : Ouvrir une connexion, true est une requête asynchrone

Étape 4 : Envoyer une requête, vous pouvez envoyer un objet et une chaîne, pas besoin Transmettez les données et envoyez null

Étape 5 : Dans la fonction d'écoute, jugez readyState=4&&status=200 pour indiquer que la requête est réussie

Étape 6 : Utilisez ResponseText et ResponseXML pour accepter les données de réponse et utiliser JS natif Manipulate DOM pour afficher

var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){
 console.log(ajax.readyState);
 console.log(ajax.status);
 if(ajax.readyState==4 && ajax.status==200){
  console.log(ajax.responseText);
  console.log(ajax.responseXML);//返回不是XML，显示null
  console.log(JSON.parse(ajax.responseText));
  console.log(eval("("+ajax.responseText+")"));
  }
}
ajax.open("GET","h51701.json",true);
ajax.send(null);

2. Requête inter-domaines Ajax

[Cross -traitement des requêtes de domaine] En raison de l'existence de la même chose dans la politique source JS. Lorsque vous demandez des fichiers avec des noms de protocole différents, des numéros de port différents et des noms d'hôte différents, cela violera la même politique d'origine et la demande ne pourra pas aboutir ! Un traitement inter-domaines est requis !

1. Paramètres PHP en arrière-plan :

Aucun paramètre n'est requis dans le front-end. Écrivez un en-tête dans le fichier PHP demandé en arrière-plan.

header("Access-Control-Allow-Origin:*");//表示允许哪些域名请求这个PHP文件，*表示所有域名都允许

2. Utilisez l'attribut src + JSONP pour obtenir des résultats inter-domaines

① Les balises avec l'attribut src sont dotées de fonctionnalités inter-domaines ! Par conséquent, vous pouvez utiliser l'attribut src de la balise de script pour demander des données d'arrière-plan

<scriptsrc="http://127.0.0.1/json.php"type="text/javascript"charset="utf-8"></script>

② Puisque src placera directement le contenu chargé dans la balise de script après avoir chargé avec succès les données

, donc l'arrière-plan renvoyant directement une chaîne JSON ne sera pas analysé dans la balise de script

Par conséquent, le backend doit renvoyer un nom de fonction de retour au frontend et transmettre la chaîne JSON en tant que paramètre dans le fichier PHP du backend et retournez-le :

③Le frontend reçoit la fonction renvoyée et l'appellera directement dans la balise script. Par conséquent, il est nécessaire de déclarer une telle fonction de rappel comme rappel en cas de requête réussie.

echo"callBack({$str})";

function callBack(data){
  alert("请求成功");
  console.log(data);
 }

3. Implémentation ajax de JQuery JSONP

① Lorsque vous effectuez une requête ajax, définissez le type de données sur "json"

② Lorsque le backend revient, la fonction de rappel doit encore être renvoyée. Cependant, lorsque ajax envoie une requête, il utilisera la requête get par défaut pour envoyer le nom de la fonction de retour à l'arrière-plan. L'arrière-plan peut utiliser $_GET['callback'] pour obtenir le nom de la fonction de rappel :

.

③Après le retour de l'arrière-plan, Ajax peut toujours utiliser success comme fonction de rappel réussie :

echo"{$_GET['callback']}({$str})";

Bien sûr, l'arrière-plan peut également renvoyer un nom de fonction de rappel à volonté.

success:function(data){}

Tant que la demande aboutit, la réception appellera automatiquement cette fonction. Semblable aux étapes ②③ du point 2

echo"callBack({$str})";

, j'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter le téléchargement d'images asynchrones en javascript

Comment implémenter la fonction d'élément caché dans jquery

Comment assurer la cohérence des mots de passe dans les formulaires de vérification dans jQuery

Comment utiliser les fonctions de tableau dans JS

À propos de la façon d'utiliser le composant sélecteur dans le mini-programme WeChat

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!