コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語

基本的な PHP 開発チュートリアル: サーバーへのリクエストの送信

1. サーバーにリクエストを送信します

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

2. サーバーにリクエストを送信します

  • リクエストをサーバーに送信する必要がある場合は、XMLHttpRequest オブジェクト

xmlhttp の open() メソッドと send() メソッドを使用します。 open("GET"," test1.txt",true);

xmlhttp.send();

5.png

3. GET または POST を使用します

  • POST と比較して、GET はより簡単で高速です。ほとんどの場合、どこでも使用できます。

  • ただし、次の状況では POST リクエストを使用してください:

  • キャッシュ ファイル (サーバー上のファイルやデータベースの更新) が使用できない

  • 大量のデータをサーバーに送信する (POST はデータ サイズ制限なし)

  • 不明な文字を含むユーザー入力を送信する場合、POST は GET よりも安定していて信頼性があります

次に、実際の例を通してこれら 2 つのリクエストを理解しましょう

4. 簡単な GET リクエスト:

  • Source2_1.php 

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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","2_2.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>
    • Source2_2.php
<?php
echo "使用GET方法请求得到的<br/>";
echo date("Y-m-d h:i:s",time());
?>

GET メソッド経由で情報を送信したい場合は、URL に情報を追加してください:

  • Source2_5。 

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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","2_6.php?name=小明",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>
    • ソースコード 2_6.php
<?php
$name=$_GET['name'];
echo "使用GET方法请求得到的<br/>";
echo "你好".$name."同学";
?>

5、POSTリクエスト

ソースコード 2_3.php

  • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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","2_4.php?",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>

    2_4.php

    <?php
echo "使用POST方法请求得到的<br/>";
echo date("Y-m-d h:i:s",time());
?>

HTMLフォームのようにデータをPOSTする必要がある場合は、setRequestHeを使用してくださいader() を使用して HTTP ヘッダーを追加します。次に、send() メソッドで送信したいデータを指定します。

  • ソースコード 2_7.php 

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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","2_8.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=小明&age=22");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>
    • 2_8.php
<?php
$name=$_POST['name'];
$age=$_POST['age'];
echo "使用POST方法请求得到的<br/>";
echo "大家好，我叫".$name."今年".$age."岁";
?>

6. 用語の説明 6.png

(1) URL - サーバー上のファイル

open() メソッドの url パラメーターは、サーバー上のファイルのアドレスです:

  • xmlhttp.open("GET","ajax_test.php",true) ;

    • ファイルには、.txt や .xml などの任意の種類のファイル、または .asp や .php などのサーバー スクリプト ファイル (応答を送り返す前にサーバー上でタスクを実行できます) を使用できます。

    (2) Asynchronous-true/false

    AJAX は、Asynchronous JavaScript and XML (非同期 JavaScript および XML) を指します。

    XMLHttpRequest オブジェクトを AJAX に使用する場合は、その open() メソッドの async パラメーターを true に設定する必要があります:

    xmlhttp.open("GET","ajax_test.php",true);

    • Web 開発の場合 開発者にとって、非同期リクエストの送信は大きな改善です。サーバー上で実行されるタスクの多くは非常に時間がかかります。 AJAX が導入される前は、これによりアプリケーションがハングまたは停止する可能性がありました。

    • AJAX を使用すると、JavaScript はサーバーからの応答を待つ必要はありませんが、次のようになります:

    • サーバーの応答を待っている間に他のスクリプトを実行します

    • 準備ができたら応答を処理します

    (3 ) Async=true

    async=trueを使用する場合、onreadystatechangeイベントでready状態に応じて実行する関数を指定してください:

    ソースコード: 2_9.php

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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","2_10.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">通过AJAX改变内容</button>
<div id="myDiv"></div>
</body>
</html>

    2_10.txt 

    这是通过AJAX得到的内容！！！

    ( 4) Async=false

    async=false を使用する必要がある場合は、open() メソッドの 3 番目のパラメーターを false に変更してください:

    xmlhttp.open("GET","test1 .txt",false);

    async=false の使用はお勧めしませんが、小規模なリクエストの場合は使用することも可能です。

    JavaScript はサーバーの応答の準備ができるまで待機してから実行を続行することに注意してください。サーバーがビジーまたは遅い場合、アプリケーションはハングまたは停止します。

    注: async=false を使用する場合は、onreadystatechange 関数を記述しないでください。send() ステートメントの後にコードを置くだけです:

    ソース コード: 2_11.php 

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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","2_10.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>

    2_10.txt

    这是通过AJAX得到的内容！！！


学び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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","2_2.php",true); xmlhttp.send(); } </script> </head> <body> <h2>AJAX</h2> <button type="button" onclick="loadXMLDoc()">请求数据</button> <div id="myDiv"></div> </body> </html>
提出するリセットコード
前のセクション 次のセクション
チュートリアルリスト
ヘルプの取得
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜

このコースを視聴した生徒はこちらも学んでいます

最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)  492426 回再生