AJAX - XMLHttpRequest オブジェクトの作成

XMLHttpRequest オブジェクト

XMLHttpRequest オブジェクトは、Ajax テクノロジーの中核です。

最新のブラウザはすべて XMLHttpRequest オブジェクトをサポートしています (IE5 と IE6 は ActiveXObject を使用します)。

ページを更新せずにサーバーと対話できるのが Ajax の最大の特徴です。この重要な機能は主に XMLHttpRequest オブジェクトによるものです。 XMLHttpRequest オブジェクトを使用すると、Windows アプリケーションなどの Web アプリケーションは、ページを更新したりジャンプしたりすることなく、ユーザーとサーバー間の対話にタイムリーに応答し、一連のデータ処理を実行できるようになり、ユーザーの待ち時間を短縮できます。 . サーバー側の負荷も軽減されます。

XMLHttpRequest オブジェクトを作成する

最新のブラウザ (IE7 以降、Firefox、Chrome、Safari、Opera) にはすべて XMLHttpRequest オブジェクトが組み込まれています。

XMLHttpRequest オブジェクトを作成する構文:

variable=new XMLHttpRequest();

古いバージョンの Internet Explorer (IE5 および IE6) は ActiveX オブジェクトを使用します:

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

IE5 や IE6 を含むすべての最新ブラウザで動作するには、ブラウザが XMLHttpRequest オブジェクトをサポートしているかどうかを確認してください。サポートされている場合は、XMLHttpRequest オブジェクトを作成します。サポートされていない場合は、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>

学び続ける

新しいファイル

<!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>

提出するリセットコード

自動運転