AJAX - Créer un objet XMLHttpRequest

Objet XMLHttpRequest

L'objet XMLHttpRequest est le cœur de la technologie Ajax.

L'objet XMLHttpRequest est pris en charge par tous les navigateurs modernes (IE5 et IE6 utilisent ActiveXObject).

Interagir avec le serveur sans actualiser la page est la plus grande fonctionnalité d'Ajax. Cette fonctionnalité importante est principalement due à l'objet XMLHttpRequest. L'utilisation de l'objet XMLHttpRequest permet aux applications Web, telles que les applications Windows, de répondre rapidement aux interactions entre les utilisateurs et les serveurs sans avoir à actualiser ou à sauter la page, et à effectuer une série de traitements de données. Ces fonctions peuvent réduire le temps d'attente de l'utilisateur. , et réduit également la charge côté serveur.

Créer un objet XMLHttpRequest

Les navigateurs modernes (IE7+, Firefox, Chrome, Safari et Opera) ont tous des objets XMLHttpRequest intégrés.

Syntaxe de création d'objets XMLHttpRequest :

variable=new XMLHttpRequest();

Les anciennes versions d'Internet Explorer (IE5 et IE6) utilisent des objets ActiveX :

variable=new ActiveXObject("Microsoft.XMLHTTP");

Pour gérer tous les navigateurs modernes, y compris IE5 et IE6, veuillez vérifier si le navigateur le prend en charge XMLHttpRequest objet. Si pris en charge, crée un objet XMLHttpRequest. S'il n'est pas pris en charge, créez ActiveXObject : :

<!DOCTYPE html>
<html>
<head>
<script>
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
        xmlhttp.send();
    }
</script>
</head>
<body>
    <div id="myDiv"><h2>使用AJAX</h2></div>
    <button type="button" onclick="loadXMLDoc()">点击修改</button>
</body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function ajaxFunction() { var xmlHttp; try { // Firefox,Opera 8.0+,Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器不支持AJAX！"); return false; } } } } </script> </head> <body> <form name="myForm"> 　　用户： <input type="text" name="username" /> <br> 　　时间： <input type="text" name="time" /> </form> </body> </html>

soumettre Réinitialiser le code

Opération automatique

AJAX - Créer un objet XMLHttpRequest

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]