XHRリクエスト

XMLHttpRequest オブジェクトは、サーバーとのデータ交換に使用されます。

サーバーにリクエストを送信する

リクエストをサーバーに送信するには、XMLHttpRequest オブジェクトの open() メソッドと send() メソッドを使用します:

xmlhttp.open("GET","ajax_info.txt) ",true) ;
xmlhttp.send();

はリクエストをサーバーに送信します。

メソッド

説明

open(メソッド,url,async)

を指定しますリクエストのタイプとURLそしてそれを非同期で処理するかどうかを尋ねます。 method

：リクエストのタイプ

url
：サーバー上のファイルの位置
async
：true（非同期）またはfalse（同期）
send(

)

string

: POSTリクエストのみ

取得しますか?投稿しますか?
POST と比較して、GET はより簡単かつ高速で、ほとんどの場合に機能します。
ただし、以下の場合はPOSTリクエストをご利用ください:
- キャッシュファイルが使用できない(サーバー上のファイルやデータベースを更新する)
- 大量のデータをサーバーに送信する(POSTにはデータサイズ制限がない) )
- POST は、不明な文字を含むユーザー入力を送信する場合、GET よりも安定していて信頼性があります
GET リクエスト
単純な GET リクエスト:
インスタンス
```
<html><!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/demo_get.php",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>

</body>
</html>
```
インスタンスの実行»
クリック「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
上の例では、キャッシュされた結果を取得している可能性があります。
これを回避するには、URL に一意の ID を追加します:
インスタンス
```
<html><!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/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<p>Click the button several times to see if the time changes, or if the file is cached.</p>
<div id="myDiv"></div>

</body>
</html>
```
インスタンスの実行»
必要に応じて、[インスタンスの実行] ボタンをクリックしてオンラインインスタンスを表示します
GET メソッド経由で情報を送信するには、次の URL に情報を追加してください:
インスタンス
```
<html><!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/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
 
</body>
</html>
```
インスタンスの実行»
オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください
POSTリクエスト

簡単な POST リクエスト:
例
```
<html><!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("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
 
</body>
</html>
```
サンプルの実行»
「サンプルの実行」ボタンをクリックしてオンラインサンプルを表示します
HTML フォームのようにデータを POST する必要がある場合は、setRequestHeader を使用してください() を使用して HTTP ヘッダーを追加します。次に、send() メソッドで送信するデータを指定します:
インスタンス
```
<html><!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("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
 
</body>
</html>
```
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
メソッド説明
setRequestHeader(header,value)
HTTP ヘッダーをリクエストに追加します。
header: ヘッダーの名前を指定します
value: ヘッダーの値を指定します
url - サーバー上のファイル
open() メソッドの url パラメーターは、サーバー上のファイルのアドレスです:
xmlhttp.open("GET","ajax_test.html",true);
ファイルには、.txt や .xml などの任意の種類のファイル、または .asp や .php などのサーバースクリプトファイル (応答を送り返す前にサーバー上でタスクを実行できます) を使用できます。
非同期 - 真か偽?
AJAX は、非同期 JavaScript および XML を指します。
XMLHttpRequest オブジェクトを AJAX に使用する場合は、その open() メソッドの async パラメーターを true に設定する必要があります:
xmlhttp.open("GET","ajax_test.html",true);

Web 開発の場合開発者にとって、非同期リクエストの送信は大きな改善です。サーバー上で実行されるタスクの多くは非常に時間がかかります。 AJAX が導入される前は、これによりアプリケーションがハングまたは停止する可能性がありました。
AJAX を使用すると、JavaScript はサーバーからの応答を待つ必要はありませんが:
- サーバーの応答を待っている間に他のスクリプトを実行します
- 準備ができたら応答を処理します
非同期=true
When async=trueを使用する場合、onreadystatechangeイベントでready状態に応じて実行する関数を指定してください:
Instance
```
<html><!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>
```
Run Instance»
「Run Instance」をクリックボタンをクリックしてオンラインインスタンスを表示します
あなた onreadystatechange については後の章で詳しく学びます。
Async = false
async=false を使用する必要がある場合は、open() メソッドの 3 番目のパラメーターを false に変更してください:
```
xmlhttp.open(&quot;GET&quot;,&quot;test1.txt&quot;,false);
```
async=false の使用はお勧めしませんが、一部の小規模なリクエストの場合は、もOKです。
JavaScript はサーバーの応答の準備ができるまで待機してから実行を続行することに注意してください。サーバーがビジーまたは遅い場合、アプリケーションはハングまたは停止します。
注: async=false を使用する場合は、onreadystatechange 関数を記述しないでください。send() ステートメントの後にコードを置くだけです:
Instance
```
<html><!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.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>
```
インスタンスを実行する»
「実行」をクリックします「例」ボタンをクリックしてオンライン例を表示します
← XHR オブジェクトの作成
XHR 応答 →
提出する
ホームページビデオに質問私の
PHP中国語ウェブサイト
ホームページコース記事に質問辞書マニュアルダウンロード検索 APPダウンロード

XHRリクエスト

サーバーにリクエストを送信する

取得しますか?投稿しますか?

GET リクエスト

インスタンス

インスタンス

インスタンス

POSTリクエスト

例

インスタンス

url - サーバー上のファイル

非同期 - 真か偽?

非同期=true

Instance

Async = false

Instance

PHP中国語ウェブサイト