Ajax de DOM JavaScript programmation Art

Tags : comprendre la demande d’entrée enfant Qu'objet Eve XXX sortie ligne Submit

Ajax permet de généraliser les techniques de chargement de contenu de page asynchrone. Auparavant, web apps impliqués regardant d’actualisation de la page, rafraîchissant et recharger la page entière, même si une petite partie de la page change. Vous pouvez utiliser Ajax pour mettre à jour qu’une petite partie d’une page, avec l’avantage principal de requêtes de pages sont envoyés de façon asynchrone sur le serveur. Le serveur n’utilise pas la page entière à la demande, il traite les demandes dans le fond, tandis que l’utilisateur peut continuer à naviguer sur la page et d’interagir avec la page. Votre script peut charger et créer le contenu d’une page à la demande sans interrompre l’expérience de navigation de l’utilisateur. Avec Ajax, web apps, vous pouvez prendre aux fonctionnalités qui sont riche, interactive et comme les applications de bureau.

Au cœur d’Ajax, la technologie est l’objet XMLHttpRequest. Cet objet agit comme un intermédiaire entre le script (client) dans le navigateur et le côté serveur. Une simple compréhension de l’énoncé avec deux scripts JS de gestion des erreurs Ajaxtry-catch :

Try {//may cause code incorrect} catch (Error) {//How pour gérer des erreurs lorsqu’elles surviennent}

Tout d’abord, créez un document texte dans le répertoire en cours HTML Entrez une phrase d’agir comme la sortie du script côté serveur le premier script JS est utilisé pour obtenir les différents objets XMLHTTP utilisées dans différentes versions d’IE de l’objet XMLHttpRequest, et afin d’être compatible avec tous les serveurs, le premier script est la suivante

function getHTTPObject() {    if (typeof XMLHttpRequest == "undefined")        XMLHttpRequest = function () {            try {return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }                catch (e) {}            try {return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }                catch (e) {}            try {return new ActiveXObject("Msxml2.XMLHTTP"); }                catch (e) {}            return false;}    return new XMLHttpRequest();}

Le script ci-dessus retourne finalement un nouvel objet XMLHttpRequest ou XMLHTTP, ou retourne false XMLHttpRequest l’objet comporte plusieurs méthodes et la méthode Open est utilisée pour spécifier les fichiers accessibles sur le serveur en spécifiant le type de demande : Get, POST, envoi , Le troisième paramètre spécifie si la requête est envoyée et traitée de manière asynchrone. Request.Open (méthode, fichier, True) onReadyStateChange est un gestionnaire d’événements qui déclenche l’exécution lorsque le serveur envoie une réponse à l’objet XMLHttpRequest. Request.onreadystatechange = function () {//Processing réponse} navigateur mises à jour la valeur de la propriété readyState à différents stades : 0 1 non initialisée est chargement 2 charge complète 3 est 4 interaction complète les données renvoyées par le serveur d’accès Avec deux propriétés, vous pouvez accéder aux données que responseText utilise pour enregistrer la forme d’un texte chaîne responseXML les données utilisées pour sauver le Content-Type = text/xml, qui est en fait un objet DocumentFragment, Vous pouvez utiliser la méthode DOM pour traiter cet objet. Une fois que vous avez identifié comment gérer la réponse, vous pouvez envoyer la demande à l’aide de la méthode d’envoi : Request.send (NULL) ; Utilisation des paramètres de la méthode Send dans Ajax : en général, les paramètres présentés en utilisant Ajax sont pour la plupart des chaînes simples qui peuvent être écrites directement dans les paramètres d’URL de la méthode ouverte en utilisant les paramètres par la méthode Get, à quel point les paramètres de la méthode Send sont null. Par exemple :

var url = "login.jsp?user=XXX&pwd=XXX";xmlHttpRequest.open("GET",url,true);xmlHttpRequset.send(null);    

Alternativement, vous pouvez utiliser la méthode Send pour passer des paramètres. À l’aide de la méthode Send pour passer des paramètres à l’aide de la méthode POST, vous devez définir les informations d’en-tête Content-Type, simulant la méthode HTTP POST pour envoyer un formulaire afin que le serveur saura comment gérer le contenu téléchargé. Le format de présentation du paramètre est le même que celui de l’URL dans la méthode Get. Vous devez appeler la méthode Open avant de configurer les informations d’en-tête.

xmlHttpRequest.open("POST","login.jsp",true);xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");xmlHttpRequest.send("user="+username+"&pwd="+password);

Le second script est utilisé pour obtenir du contenu

function getNewContent() {    var request = getHTTPObject();    if (request) {        request.open("GET", "example.txt", true);        request.onreadystatechange = function () {            if (request.readyState == 4) {                var para = document.createElement("p");                var txt = document.createTextNode(request.responseText);                para.appendChild(txt);                document.getElementById(‘new‘).appendChild(para);            }        }；        request.send(null);    } else {        alert("Sorry, your browser doesn‘t support XMLHttpRequest");    }}addLoadEvent(getNewContent);

Où addLoadEvent est une fonction de charge écrite par lui-même

function addLoadEvent(func) {    var oldonload = window.onload;    if (typeof window.onload != ‘function‘){        window.onload = func;    }else {        window.onload = function () {            oldonload();            func();        }    }}

Cela permet d’insérer les ci-dessus deux scripts JS dans une page HTML avec un nœud de la DIV avec ID neuf

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Ajax</title></head><body>    <div id="new"></div>    <script src="script/addLoadEvent.js"></script>    <script src="script/getNewContent.js"></script>    <script src="script/getHTTPObject.js"></script></body></html>

Et complété d’une simple requête Ajax.

Il est important de noter que : 1. quand en utilisant Ajax, être au courant des homologues politiques, et les demandes envoyées à l’aide d’objets XMLHttpRequest peuvent accéder uniquement aux données dans le même domaine que le code HTML dans lequel ils résident. 2. une fois le script envoie la requête de XMLHttpRequest, il continuera à exécuter et n’attendra pas la réponse à retourner. Autrement dit, le script n’attend pas de réponse de l’envoi, mais continue à s’exécuter. Pour ce faire, si les autres scripts dépendent de la réponse du serveur, vous devez écrire le code de réponse à la fonction correspondant à la propriété onReadyStateChange, qui est asynchrone.

Ajax de DOM JavaScript programmation Art