Dom-xmlhttprequest-object

提供：Dev Guides
移動先:案内、検索

DOM-XMLHttpRequestオブジェクト

XMLHttpRequestオブジェクトは、Webページのクライアント側とサーバー側の間の媒体を確立します。これは、JavaScript、JScript、VBScript、およびその他のWebブラウザーなどの多くのスクリプト言語がXMLデータを転送および操作するために使用できます。

XMLHttpRequestオブジェクトを使用すると、ページ全体をリロードせずにWebページの一部を更新し、ページのロード後にサーバーにデータを要求および受信し、データをサーバーに送信できます。

構文

XMLHttpRequestオブジェクトは次のようにインスタンス化することができます- 

xmlhttp = new XMLHttpRequest();

IE5およびIE6を含むすべてのブラウザを処理するには、ブラウザが以下のようにXMLHttpRequestオブジェクトをサポートしているかどうかを確認してください- 

if(window.XMLHttpRequest)//for Firefox, IE7+, Opera, Safari, ... {
   xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject)//for Internet Explorer 5 or 6 {
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequestオブジェクトを使用してXMLファイルをロードする例は、リンクを参照できます：/dom/xml_dom_loading [ここ]

方法

次の表は、XMLHttpRequestオブジェクトのメソッドを示しています-

S.No. Method & Description
1

abort()

行われた現在の要求を終了します。

2

getAllResponseHeaders()

すべての応答ヘッダーを文字列として返します。応答が受信されていない場合はnullを返します。

3

getResponseHeader()

指定されたヘッダーのテキストを含む文字列を返します。応答がまだ受信されていない場合、または応答にヘッダーが存在しない場合はnullを返します。

4

open(method,url,async,uname,pswd)

サーバーに要求を送信するために、Sendメソッドと組み合わせて使用​​されます。 オープンメソッドは、次のパラメータを指定します-

  • method -リクエストのタイプ、つまり 取得または投稿。
  • url -ファイルの場所です。
  • async -要求の処理方法を示します。 ブール値です。 どこで、
  • 「true」は、HTTP応答を待たずに要求が非同期的に処理されることを意味します。
  • 「false」は、Http応答を受信した後、要求が同期的に処理されることを意味します。
  • uname -ユーザー名です。
  • pswd -パスワードです。
5

send(string)

Openメソッドと組み合わせて機能するリクエストを送信するために使用されます。

6

setRequestHeader()

ヘッダーには、リクエストの送信先のラベル/値のペアが含まれます。

属性

次の表は、XMLHttpRequestオブジェクトの属性を示しています-

S.No. Attribute & Description
1

onreadystatechange

これは、状態が変化するたびに設定されるイベントベースのプロパティです。

2

readyState

これは、XMLHttpRequestオブジェクトの現在の状態を説明しています。 readyStateプロパティの5つの可能な状態があります-

  • readyState = 0 -要求がまだ初期化されていないことを意味します。
  • readyState = 1 -要求が設定されています。
  • readyState = 2 -要求が送信されます。
  • readyState = 3 -要求は処理中です。
  • readyState = 4 -要求は完了しました。
3

responseText

このプロパティは、サーバーからの応答がテキストファイルである場合に使用されます。

4

responseXML

このプロパティは、サーバーからの応答がXMLファイルである場合に使用されます。

5

status

Httpリクエストオブジェクトのステータスを数値で示します。 たとえば、「404」または「200」。

6

statusText

Http要求オブジェクトのステータスを文字列として提供します。 たとえば、「見つかりません」または「OK」。

例

_node.xml_の内容は以下のとおりです- 

<?xml version = "1.0"?>
<Company>
   <Employee category = "Technical">
      <FirstName>Tanmay</FirstName>
      <LastName>Patil</LastName>
      <ContactNo>1234567890</ContactNo>
      <Email>tanmaypatil@xyz.com</Email>
   </Employee>

   <Employee category = "Non-Technical">
      <FirstName>Taniya</FirstName>
      <LastName>Mishra</LastName>
      <ContactNo>1234667898</ContactNo>
      <Email>taniyamishra@xyz.com</Email>
   </Employee>

   <Employee category = "Management">
      <FirstName>Tanisha</FirstName>
      <LastName>Sharma</LastName>
      <ContactNo>1234562350</ContactNo>
      <Email>tanishasharma@xyz.com</Email>
   </Employee>
</Company>

リソースファイルの特定の情報を取得する

次の例は、メソッド_getResponseHeader（）_およびプロパティ_readState_を使用して、リソースファイルの特定の情報を取得する方法を示しています。 

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv = "content-type" content = "text/html; charset = iso-8859-2"/>
         <script>
            function loadXMLDoc() {
               var xmlHttp = null;
               if(window.XMLHttpRequest)//for Firefox, IE7+, Opera, Safari, ... {
                  xmlHttp = new XMLHttpRequest();
               }
               else if(window.ActiveXObject)//for Internet Explorer 5 or 6 {
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
               }

               return xmlHttp;
            }

            function makerequest(serverPage, myDiv) {
               var request =  loadXMLDoc();
               request.open("GET", serverPage);
               request.send(null);

               request.onreadystatechange = function() {
                  if (request.readyState == 4) {
                     document.getElementById(myDiv).innerHTML = request.getResponseHeader("Content-length");
                  }
               }
            }
      </script>
   </head>
   <body>
      <button type = "button" onclick="makerequest('/dom/node.xml', 'ID')">Click me to get the specific ResponseHeader</button>
      <div id = "ID">Specific header information is returned.</div>
   </body>
</html>

実行

このファイルを_elementattribute_removeAttributeNS_としてサーバーパスに保存します（このファイルとnode_ns.xmlはサーバーの同じパスにある必要があります）。 次のように出力を取得します- 

Before removing the attributeNS: en
After removing the attributeNS: null

リソースファイルのヘッダー情報を取得する

次の例は、プロパティ readyState を使用するメソッド getAllResponseHeaders（） を使用して、リソースファイルのヘッダー情報を取得する方法を示しています。 

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"/>
      <script>
         function loadXMLDoc() {
            var xmlHttp = null;

            if(window.XMLHttpRequest)//for Firefox, IE7+, Opera, Safari, ... {
               xmlHttp = new XMLHttpRequest();
            } else if(window.ActiveXObject)// for Internet Explorer 5 or 6 {
               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            return xmlHttp;
         }

         function makerequest(serverPage, myDiv) {
            var request =  loadXMLDoc();
            request.open("GET", serverPage);
            request.send(null);
            request.onreadystatechange = function() {
               if (request.readyState == 4) {
                  document.getElementById(myDiv).innerHTML = request.getAllResponseHeaders();
               }
            }
         }
      </script>
   </head>
   <body>
      <button type = "button" onclick = "makerequest('/dom/node.xml', 'ID')">
         Click me to load the AllResponseHeaders</button>
      <div id = "ID"></div>
   </body>
</html>

実行

このファイルを_http_allheaderl_としてサーバーパスに保存します（このファイルとnode.xmlはサーバーの同じパスにある必要があります）。 次のように出力を取得します（ブラウザによって異なります）- 

Date: Sat, 27 Sep 2014 07:48:07 GMT Server: Apache Last-Modified:
      Wed, 03 Sep 2014 06:35:30 GMT Etag: "464bf9-2af-50223713b8a60" Accept-Ranges: bytes Vary: Accept-Encoding,User-Agent
      Content-Encoding: gzip Content-Length: 256 Content-Type: text/xml
「https://www.finddevguides.com/index.php?title=Dom-xmlhttprequest-object&oldid=29678」から取得
Powered by MediaWiki