Native JS implémente les requêtes inter-domaines ajax et ajax

Cet article partage principalement 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, j'espère que cela pourra aider tout le monde.

1. Implémenter ajax avec JS natif

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

La deuxième étape : définir la fonction d'écoute du statut

Le troisième étape : ouvrez une connexion, true est une requête asynchrone

Partie 4 : envoyez une requête, vous pouvez envoyer un objet et une chaîne, aucune donnée n'a besoin d'être transmise, envoyez null

Étape 5 : Dans la fonction d'écoute, jugez readyState=4&&status=200 signifie que la demande est réussie

Étape 6 : Utilisez ResponseText et ResponseXML pour accepter les données de réponse et utilisez JS natif pour faire fonctionner le DOM pour l'affichage

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

[Traitement des requêtes inter-domaines] En raison de la même politique d'origine dans 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 frontend. É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})";

3. Implémentation ajax de JQuery JSONP

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

① Lors d'une requête ajax, définissez le type de données sur "json"

② Lorsque le backend revient, il toujours Une fonction de rappel doit ê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})";

Recommandations associées :

Accès inter-domaines AJAX - introduction à deux solutions efficaces_Tutoriel PHP

Comment utiliser JS natif pour implémenter la requête Ajax GET POST

Méthode AngularJS pour implémenter la requête ajax

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!