Dom-xmlhttprequest-object
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メソッドと組み合わせて使用されます。 オープンメソッドは、次のパラメータを指定します-
|
5 |
send(string) Openメソッドと組み合わせて機能するリクエストを送信するために使用されます。 |
6 |
setRequestHeader() ヘッダーには、リクエストの送信先のラベル/値のペアが含まれます。 |
属性
次の表は、XMLHttpRequestオブジェクトの属性を示しています-
S.No. | Attribute & Description |
---|---|
1 |
onreadystatechange これは、状態が変化するたびに設定されるイベントベースのプロパティです。 |
2 |
readyState これは、XMLHttpRequestオブジェクトの現在の状態を説明しています。 readyStateプロパティの5つの可能な状態があります-
|
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>[email protected]</Email>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Management">
<FirstName>Tanisha</FirstName>
<LastName>Sharma</LastName>
<ContactNo>1234562350</ContactNo>
<Email>[email protected]</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