php下のオリジナルajaxリクエスト用法例分析

8160 ワード

本明細書の例では、phpにおけるオリジナルajaxリクエストの使用法について説明する.皆さんの参考にしてください.具体的には以下の通りです.
ブラウザには、HTTPリクエストを送信し、サービス側の応答を受け入れるのに役立つJSオブジェクトXMLHttpRequetが用意されています.
私たちのブラウザはコミットしないで、JSを通じてサーバーを要求することができることを意味します.
ajax(Asynchronous Javascript And XML)は、XHRオブジェクトを介してHTTPリクエストを実行します.
1、XHRオブジェクトの作成


var xhr = new XMLHttpRequest(); //

2、XHRのオブジェクト属性と方法


  ：
open("get/post", url, true/false);
//    k=v&k1=v1    
send(null);

  ：
//      ，    ， 4 ，    
readyState
//     
responseText
//      200，403，404
status
//    
statusText

  ：
// readyState         
onreadystatechange = function() {};

3、XHRオブジェクトによるget要求の送信




  
    ajax
    
    
  
  
    
      
    
  
  
    var ipt = document.getElementById("con");

    ipt.onblur = function () {
      var con = this.value;
      //  XHR  
      var xhr = new XMLHttpRequest();
      //    URL
      var url = "./ajax.php?con=" + con;
      //  XHR  readyState       
      xhr.onreadystatechange = function () {
        //readyState      ， 4      
        if (xhr.readyState == 4) {
          //responseText        
          alert("       ：" + this.responseText);
        }
      };
      //    
      xhr.open("get", url, true);
      //    
      xhr.send(null);
    }

ajax.phpは以下の通りです.

データを入力し、マウスのフォーカスがinputから離れると、リクエストがトリガーされ、応答内容がポップアップされます.
4、XHRオブジェクトによるpost要求の送信
(1)、open()第1パラメータはpost
(2)、POSTのパラメータをk=v&k 1=v 1&k 2=v 2の形でつなぎ合わせ、send()で送る
(3)、アプリケーション/x-www-form-urlencodedにContent-Typeを設定する必要があります




  
    ajax
    
    
  
  
    
      
      
      
    
  
  
    var sub = document.getElementById("sub");

    sub.onclick = function () {
      var name = document.getElementById("name").value;
      var pwd = document.getElementById("pwd").value;
      //  XHR  
      var xhr = new XMLHttpRequest();
      //    URL
      var url = "./ajax.php";
      //  XHR  readyState       
      xhr.onreadystatechange = function () {
        //readyState      ， 4      
        if (xhr.readyState == 4) {
          //responseText        
          alert("       ：" + this.responseText);
        }
      };
      //    
      xhr.open("post", url, true);
      //      
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      //    
      xhr.send("name=" + name + "&pwd=" + pwd);
    }

ajax.phpは以下の通りです.

submitをクリックしてpostリクエストを送信し、応答情報をポップアップします.
5、戻り値json,html,text,xml
戻り値はtextとxmlの2種類しかありません.ただしtextコンテンツにはhtmlまたはjson構造の文字列であってもよい.
(1)、json形式を返す




  
    ajax
    
    
  
  
    
      
    
  
  
    var get = document.getElementById("get");
    var city = document.getElementById("city");

    get.onclick = function () {
      //  XHR  
      var xhr = new XMLHttpRequest();
      //    URL
      var url = "./ajax.php";
      //  XHR  readyState       
      xhr.onreadystatechange = function () {
        //readyState      ， 4      
        if (xhr.readyState == 4) {
          //responseText        
          //  eval    json       
          var data = eval(this.responseText);
          var str = "";
          for(var ix in data) {
            str += "<option value='" + data[ix].id + "'>" + data[ix].name + "</option>";
          }
          city.innerHTML = str;
        }
      };
      //    
      xhr.open("get", url, true);
      //    
      xhr.send(null);
    }

ajax.phpは以下の通りです.


 1, 'name' => '  '),
  array('id' => 2, 'name' => '  '),
  array('id' => 3, 'name' => '  '),
);
echo json_encode($data);

(2)、xml形式を返す
xmlはresponseXMLで読み出され、responseXMLは文字列ではなくDOMオブジェクトです.




  
    ajax
    
    
  
  
    
      
      
    
  
  
    var get = document.getElementById("get");
    var news = document.getElementById("news");

    get.onclick = function () {
      //  XHR  
      var xhr = new XMLHttpRequest();
      //    URL
      var url = "./ajax.php";
      //  XHR  readyState       
      xhr.onreadystatechange = function () {
        //readyState      ， 4      
        if (xhr.readyState == 4) {
          //responseXML        
          var data = this.responseXML;
          var str = "";
          var title = data.getElementsByTagName("title");
          str += "<p>" + title[0].childNodes[0].nodeValue + "</p>";
          str += "<p>" + title[1].childNodes[0].nodeValue + "</p>";
          str += "<p>" + title[2].childNodes[0].nodeValue + "</p>";
          news.innerHTML = str;
        }
      };
      //    
      xhr.open("get", url, true);
      //    
      xhr.send(null);
    }

ajax.php如下：




  111
  222
  333

EOD;
echo $xml;

6、ajaxの同期と非同期
Open()の3番目のパラメータtrue/falseを設定することで、リクエストの効果を表示します.
同期要求:
要求の送信->結果の待機->操作の完了->後続コードの続行.後のコードを続行するには、結果の処理が完了するまで待たなければなりません.手順に従って一歩一歩実行します.
非同期リクエスト:
要求の送信->後続コードの続行->応答結果の受信完了->操作結果.非同期リクエストは、リクエストが送信された後、結果の戻りを待つのではなく、後のコードを実行し続ける.すなわち、結果が返される前にユーザは他のものを操作することができる.
PHPに関する詳細については、「PHP+ajaxテクニックと応用小結」、「PHPネットワークプログラミングテクニック総括」、「php文字列(string)用法総括」、「php+mysqlデータベース操作入門チュートリアル」、「phpよくあるデータベース操作テクニック要約」を参照してください.
ここで述べたことが皆さんのPHPプログラム設計に役立つことを願っています.

「Scrum Fest Osaka 2020」に参加してきたのでレポートする(Day1)

php protobuf 3の使い方