Partagez des tutoriels sur des exemples Ajax et jsonp

1.ajax

JavaScript et XML asynchrones (Ajax) sont à l'origine du nouveau génération Une technologie clé pour les sites Web (communément appelés sites Web 2.0). Ajax permet la récupération de données en arrière-plan sans interférer avec l'affichage et le comportement de l'application Web. Obtenez des données à l'aide de la fonction XMLHttpRequest, une API qui permet à JavaScript côté client de se connecter à un serveur distant via HTTP. Ajax est également la force motrice derrière de nombreux mashups, qui intègrent du contenu provenant de plusieurs endroits dans une seule application Web.

Cependant, en raison des restrictions du navigateur, cette méthode ne permet pas la communication entre domaines. Si vous essayez de demander des données à un autre domaine, une erreur de sécurité se produira. Ces erreurs de sécurité peuvent être évitées si vous pouvez contrôler le serveur distant sur lequel résident les données et si chaque requête est adressée au même domaine. Mais à quoi sert une application Web si elle reste simplement sur son propre serveur ? Que se passe-t-il si vous devez collecter des données à partir de plusieurs serveurs tiers ? A, ajax consiste à charger des données via un site Web, ce processus est généralement invisible pour l'utilisateur.

B. Pour les pages Web traditionnelles (ajax n'est pas applicable), si le contenu doit être mis à jour, la page Web entière doit être rechargée.

3. À propos de la synchronisation et de l'asynchronisme

La synchronisation nécessite d'attendre le retour du résultat avant de continuer, en mode asynchrone. Il n'est généralement pas nécessaire d'attendre. Écoutez les résultats asynchrones.

La synchronisation est une file d'attente en ligne droite, l'asynchrone n'est pas dans une file d'attente, chacun suit son propre chemin

Par exemple : 　Ajouter une question au panier. En utilisant la méthode synchrone, chaque fois que vous ajoutez un article au panier, vous devez attendre que la page se recharge avant d'effectuer d'autres opérations.

Avec la méthode asynchrone, il vous suffit d'écouter et d'effectuer d'autres opérations sans attendre. Relativement parlant, le chargement asynchrone présente de plus grands avantages, et les avantages d'ajax en ressortent.

4. Créer un objet ajax (et compatible)

　

(1)Créer un objet XMLHttpRequest

　(2) Ouvrir le lien avec le serveur

　open(method,url,asyn)

Paramètres :

Méthode : string, le type demandé get ou post

url : string, l'emplacement du fichier sur le serveur

asyn : booléen, vrai (asynchrone) ou faux (synchrone)

La synchronisation doit attendre le résultat de retour avant de continuer, asynchrone n'a pas besoin d'attendre

　(3) Envoyer au serveur

　 xhr.send() envoie la requête au serveur (get request )

xhr. send(string) n'est utilisé que pour les demandes de publication

(4) Détecter l'état de la demande du serveur

événement onreadystatechange (correspondant ready status )

Les attributs readyState et status stockent le statut de XMLHttpRequest

Lorsque readyState change, l'événement onreadystatechange sera déclenché

Le readyState passe de 0 à 4

0 : La requête n'est pas initialisée

1 : Le serveur la connexion a été établie

2 : La demande a été reçue

3. La demande est en cours de traitement

4. La demande a été complétée

Le statut est égal à 200 : « OK »

Égal à 404 : Page non trouvé

Lorsque readyStatus est à 4 Et lorsque le statut est à 200, cela signifie que la réponse est prête.

5. L'importance de l'objet XMLHttpRequest

Pour obtenir une réponse du serveur, veuillez utiliser XMLHttpRequest Objet：

ResponseText ou ResponseXML Propriétés

ResponseText obtient les données de réponse sous forme de chaîne

réponseText Obtenez les données de réponse au format XML

Si la réponse du serveur n'est pas XML, utilisez l'attribut ResponseText ResponseText pour renvoyer la réponse sous la forme d'une chaîne que vous pouvez utiliser. comme ceci : Div.innerHTML = xhr.responseText;

6 Concernant la différence entre la méthode de requête ajax get et post :

　GET : plus couramment utilisé, plus pratique ; performances Bonne ; l'envoi de données en texte clair n'est pas aussi sécurisé que le POST ; la taille de la transmission des données est limitée et les données sont transmises via l'URL, mais l'URL a un certaine limite de longueur. ,

POST : relativement rarement utilisé ; les performances ne sont que d'environ 1/3 de get ; aucune limite de taille de données ; >7. À propos du cross-domain

　

Le cross-domain peut être simplement compris comme l'accès à un autre nom de domaine à partir de un nom de domaine Nom de domaine, pour des raisons de sécurité, les navigateurs ne le permettent pas Remarque : L'attribut src de img, script, iframe et d'autres éléments peuvent demander directement des ressources à travers les domaines.

8. Ajax cross-domain

1. Vous pouvez laisser le serveur accéder à d'autres sites Web pour obtenir le contenu et le renvoyer Page

2. Donnez une URL à l'ajax de la page, et ajax transmettra l'URL au serveur, et le serveur accédera à l'adresse.

9. jsonp inter-domaines

jsonp utilise la capacité inter-domaines des balises de script pour demander des ressources. Évidemment, le but est toujours json, et il s'agit d'une acquisition inter-domaines. Utilisez js pour construire une balise de script, attribuez l'url de json à l'attribut src du script, insérez le script dans le dom et laissez le navigateur l'obtenir. .callback({"name":"jack "}), le callback est une méthode de rappel qui existe sur la page. Le paramètre consiste à obtenir le json souhaité. La méthode de rappel doit être conforme aux instructions du serveur. Généralement, callback ou cb.

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!