) | サーバーにリクエストを送信します。 | string
: POSTリクエストにのみ使用されます
|
取得しますか?投稿しますか?
GET は POST よりも簡単かつ高速で、ほとんどの状況で使用できます。
ただし、次の場合は常に POST リクエストを使用してください:
キャッシュされたファイルがオプションではない (サーバー上のファイルまたはデータベースを更新する)
サーバーに送信されるデータの量が多い (POST にはサイズ制限)
ユーザー入力を送信します (不明な文字を含む可能性があります)。POST は GET より強力で安全です
URL - サーバー上のファイル
open() メソッドの url パラメーターはサーバー上の url パラメーター ファイルのアドレス:
xmlhttp.open("GET","xmlhttp_info.txt",true);
ファイルは、任意のタイプのファイル (.txt や .xml など) にすることができます。 )、またはサーバー スクリプト ファイル (応答を送り返す前にサーバー上でアクションを実行する .html や .php など)。
非同期 - True か False?
リクエストを非同期で送信する必要がある場合は、open() メソッドの async パラメータを true に設定する必要があります:
xmlhttp.open("GET","xmlhttp_info.txt) ",true);
非同期リクエストの送信は、Web 開発者にとって大きな改善です。サーバー上で実行されるタスクの多くは非常に時間がかかります。
非同期送信では、JavaScript はサーバーの応答を待つ必要はありませんが、次のように置き換えることができます:
Async=true
async=trueを使用する場合、onreadystatechangeイベントで準備時に実行する関数を指定します:
Instance
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
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","xmlhttp_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>「インスタンスの実行」をクリックオンライン インスタンスを表示するにはボタンをクリックしてください
Async=false
async=false を使用する必要がある場合は、open() メソッドの 3 番目のパラメータを false に変更してください:
xmlhttp.open("GET", "xmlhttp_info.txt",false);
async=false の使用は推奨されませんが、いくつかの小さなリクエストを処理する場合には可能です。
サーバーの応答の準備ができるまで、JavaScript は実行を続行しないことに注意してください。サーバーがビジーまたは遅い場合、アプリケーションはハングまたは停止します。
注: async=false を使用する場合は、onreadystatechange を書き込まないでください
関数 - send() ステートメントの後にコードを配置するだけです:
Instance
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.open("GET","xmlhttp_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
</script>
</head>
<body>
<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
サーバー応答
サーバーから応答を取得するには、XMLHttpRequest オブジェクトの responseText プロパティまたは responseXML プロパティを使用します。
| プロパティ | 説明 |
|---|
| responseText | 応答データを文字列として取得 |
| responseXML | 応答データをXMLデータとして取得 |
responseText プロパティ
サーバーからの場合応答は XML ではないため、responseText 属性を使用してください。
responseText プロパティは応答を文字列として返します。それに応じて使用できます:
Instance
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
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","xmlhttp_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html> [Run Instance] ボタンをクリックしてオンライン インスタンスを表示します
responseXML プロパティ
サーバーからの応答が XML ではなく、それを XML オブジェクトに解析したい場合は、responseXML 属性を使用します:
インスタンス
ファイル cd_catalog.xml をリクエストし、応答を解析します:
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
xmlhttp.open("GET","cd_catalog.xml",true);
xmlhttp.send();
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
</script>
</head>
<body>
<h2>My CD Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
</body>
</html>「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
onreadystatechangeイベント
リクエストがサーバーに送信されると、レスポンスに基づいて特定のアクションを実行する必要があります。
onreadystatechange イベントは、readyState が変更されるたびにトリガーされます。
readyState 属性は XMLHttpRequest の状態を保持します。 PXmlhttpRequest オブジェクトの 3 つの重要な属性:
属性 | 説明 | |
|---|
OnreadyStateChange | ストレージ関数 (または関数名) | XMLHttpRequest のステータスを格納します。 0 から 4 に変更します: |
0: リクエストは初期化されていません
1: サーバーが接続を確立します
2: リクエストを受け取りました|
3: リクエストを処理します |
4: リクエストが完了し、応答の準備ができました
ステータス
200: "OK" |
404: ページが見つかりません
| onreadystatechange イベントでは、サーバーの応答が処理の準備ができたときに何が起こるかを指定します。
readyState が 4 または status が 200 の場合、応答は準備完了です:
インスタンス
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
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","xmlhttp_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>Using the XMLHttpRequest object</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
注:変化するイベントは毎回発生します。readyState が変化するとトリガーされ、合計 4 回発生します。
その他の例
リソース (ファイル) のヘッダー情報を取得します。
インスタンス
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
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('p1').innerHTML=xmlhttp.getAllResponseHeaders();
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p id="p1">The getAllResponseHeaders() function returns the header information of a resource, like length, server-type, content-type, last-modified, etc.</p>
<button onclick="loadXMLDoc('xmlhttp_info.txt')">Get header information</button>
</body>
</html>インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
getResponseHeader() を通じて指定されたヘッダー情報を取得しますインスタンスの指定されたヘッダー情報を取得しますリソース（ファイル）。
インスタンス
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
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('p1').innerHTML="Last modified: " + xmlhttp.getResponseHeader('Last-Modified');
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p id="p1">The getResponseHeader() function is used to return specific header information from a resource, like length, server-type, content-type, last-modified, etc.</p>
<button onclick="loadXMLDoc('xmlhttp_info.txt')">Get "Last-Modified" information</button>
</body>
</html>インスタンスの実行»
オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください
ASPファイルのコンテンツを取得しますWebページがWebサーバーと対話する方法ユーザーが入力フィールドに文字を入力すると、通信が行われます。
インスタンス
<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Start typing a name in the input field below:</h3>
<form action="">
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>インスタンスの実行 »
オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください
データベースからコンテンツを取得しますWebページがどのようにデータベースから情報を抽出するかXMLHttpRequest オブジェクト。
例
<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="">
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>サンプルの実行»
オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください
XMLファイルのコンテンツを取得しますXMLからデータを取得するXMLHttpRequestを作成しますファイルを作成し、データを HTML テーブルに表示します。
インスタンス
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
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)
{
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="txtCDInfo">
<button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>
</div>
</body>
</html>インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
