Mise en route avec ajax

Video: Petit exemple de mise à jour avec ajax et laravel (ajouter, modifier, suprimer)

Ce guide fournit quelques informations de base sur Ajax, puis saute à droite et vous permet de démarrer avec des exemples.

javascript a été la principale utilisation des objets XMLHttpRequest pour un bon nombre d`années, mais seulement récemment at-il commencé à acquérir une certaine « renommée ». Une grande partie du chahut a à voir avec les nombreuses applications Web avancées ayant les développeurs web qui voient, bave et qui veulent leur propre site pour avoir les mêmes exactes applications / fonctionnalités avancées. Mais certains de celui-ci a aussi à voir avec le groupe de personnes à AdaptivePath qui ont nommé cette application Ajax

Ajax débutants: Ce qui dans le monde est Ajax?

En un mot? Eh bien Ajax est une solution aux interfaces web.

Généralement, l`utilisateur entre des données ou fait un choix simple, et clique sur un bouton finaliser cette entrée de choix ou de données et envoie les données vers le serveur. Le serveur observe à la hâte les données et renvoie toute une nouvelle page Web. Le fait de devoir recharger une page chaque fois que vous voulez faire quelque chose est très ennuyeux, disjonctive et énormément de temps pour l`utilisateur. XMLHttpRequest refait surface l`interaction navigateur-serveur dans les coulisses, afin que l`utilisateur peut simplement continuer à jouer avec la même page, alors même que des éléments sur la page parlent au serveur!

Avec javascript, nous avons toujours été en mesure de script côté serveur sans rien qui se passe dans le navigateur en utilisant quelques trucs classiques retrousser nos manches.

données de formulaire Caching un fichier avec javascript sur un serveur est bonne, mais cela ne reviennent généralement pas d`informations utiles au javascript qu`il appelle, de sorte que son efficacité est très limitée. Cependant, Ajax, peut obtenir une parcelle complète de données à partir du script appelle. D`où la « XML » partie du nom - qui est vraiment juste là pour les regards de toutes sortes, un peu comme la partie « Java » de javascript, parce que les données renvoyées peuvent être le texte brut ou tout ce que vous voulez, si XML est pas votre le choix préféré.

Video: mise en route semoir Kuhn Maxima 10 rangs RXL avec trémie frontale TF 1500

Cette seule ouvre tant de possibilités intéressantes. Chaque soumission de formulaire, chaque événement javascript, et quelle que soit l`application d`autre, peuvent désormais interagir avec des bases de données côté serveur et la puissance de traitement! Récupération de données, l`authentification par mot de passe, génération d`images - vous le nom juste, Ajax peut l`activer.

La mise en pratique Ajax

La seule chose qui limite l`application Web Ajax améliorée est votre imagination et par le soutien du navigateur. les navigateurs basés sur Mozilla peuvent le faire, Safari, et les versions plus récentes d`Internet Explorer et Opera 8 mais pas Opera 7. Il est préférable à la fente d`une autre manière de faire les choses pour les utilisateurs qui ne sont pas aussi plein d`esprit que vous souhaiteriez pour qu`ils soient. En outre, Internet Explorer fait des choses un peu différemment (certainement) de tous les autres navigateurs, il est assez essentiel de travailler le code pour tenir compte du 80% de gênant la population qui comptent sur Explorer.

Passons maintenant à la partie passionnante! Produisons une application simple qui peut accepter une entrée de l`utilisateur, il passe à un peu de PHP sur le serveur qui vérifie contre une base de données, et renvoie le résultat au navigateur utilisé. Nous assimilons en trois parties.

Tout d`abord, nous avons besoin d`un formulaire HTML. Comme vous » pouvez voir ci-dessous:

Remarque: Pour les utilisateurs sans soutien approprié pour notre script (nommé xhr.js), Le formulaire simplement soumettre simplement à la page de repli à fallbackpage.php. Ok, c`est là le javascript arrive, nous allons le prendre lent.

qualité de fonction (essai) {

La première chose que nous devons faire est d`initialiser l`objet. Il y a deux façons dont nous devons le faire, pour les différents navigateurs.

// Mozilla versionif (window.XMLHttpRequest) {XHR = new XMLHttpRequest () -} // IE versionelse si (window.ActiveXObject) {XHR = new ActiveXObject ("Microsoft.XMLHTTP") -}

Nous échappons alors l`entrée d`utilisateur pour le rendre URL en toute sécurité:

 essai = encodeURIComponent (essai) -

et utiliser la ouvrir méthode de l`objet pour ouvrir une nouvelle connexion au script PHP:

 xhr.open ("POSTER","grade.php") -

La méthode nécessite deux arguments: premièrement, la Méthode HTTP (GET ou POST)- D`autre part, l`URL du script. Un en-tête HTTP rapide affirme le script pour ce qu`il devient, puis la envoyer Procédé transmet la demande actuelle:

xhr.setRequestHeader ( `Content-Type`, `application / x-www-form-urlencoded- charset = UTF-8`) - xhr.send (essai) -

Cette dernière étape n`est pas nécessaire pour les requêtes GET, dans laquelle toutes les données peuvent être contenues dans la chaîne de requête de l`URL.

Obtenir des résultats finaux

Nous sommes enfin prêts à voir si la requête HTTP nous avons fait travaillé. le readyState propriété compte à partir de zéro lors de la demande, et montre 4 lorsque la page du serveur a été chargé avec succès.

 xhr.onreadystatechange = function () {if (xhr.readyState == 4) {

En effet, si la demande réelle a fonctionné, alors nous pouvons obtenir la sortie du script côté serveur en interrogeant la responseText propriété, qui contient une chaîne. Pour plus d`une sortie de script serveur complexe, un responseXML la propriété, qui peut contenir un objet complet de documents de données XML, est une option aussi accessible.

 qualité = xhr.responseText alerte ("essai Nice. Votre grade est " + Grade) -} return} faux-

En conclusion, la troisième composante se composent de PHP script, qui vit essentiellement sur le serveur et attend patiemment le javascript afin de le transmettre des données juteuses pour qu`il puisse se développer. Cet exemple utilise un peu de PHP, mais la langue que vous aimez - Ruby, Perl, C, ASP - peut répondre à vos besoins aussi bien. Le noyau de ce script exemple est une fonction de langage naturel appelé grade_essay () que les notes des essais d`étudiants de 1 à 100, mais j`expurger cette partie pour économiser de l`espace.

? Lt; phpfunction grade_essay (essai de $) {return strlen (essai $) -} essai $ = urldecode (implode (fichier ( `php: // input`))) - classe $ = grade_essay (essai de $) -echo grade $ - gt?;

le php: // input saisit les données POST, qui obtient mis dans une chaîne, décodés et transmis à l`algorithme de classement intelligent. L`algorithme retourne une note numérique. Enfin, nous venons de sortie la note avec écho - D`ordinaire, cela affiche dans le navigateur, mais étant donné que le script PHP est en cours d`exécution « dans les coulisses », la sortie de chaîne est simplement retourné au javascript qui l`a appelé. Si vous avez besoin des données structurées, un document XML serait sortie avec un écho déclaration de la même manière, mais le type de contenu de la page de sortie doit en principe être mis à text / xml.

Ce que l`utilisateur voit est le suivant: Elle / types He leur essai dans la zone de texte dans le navigateur, clique sur Envoyer, et dans une zone d`instants d`alerte apparaît lui / lui donner une note finale sur l`essai. Invisiblement, l`essai a été envoyé au serveur, lu et évalué par une équipe d`elfes PHP, et inévitablement de retour avec une note, sans jamais avoir à recharger la page. L`utilisateur peut modifier son essai et le soumettre à nouveau en continu.

Et c`est la substance générale de l`objet XMLHttpRequest presque magique! L`exemple est assez simple et avant droit, mais les utilisations de l`objet peut être très, multi intelligent.

Pour plus d`inspiration et de grands exemples d`applications ingénieuses Ajax vous pouvez momentanément détourner de SimpleHelp.Net et visiter iGoogle, Pageflakes, Netflix et Netvibes.

Toutefois, les données et les fonctions que l`Ajax envoie et agit sur est tout simplement à vous.