Ajax の使用原則の分析-jsチュートリアル-php.cn

Ajax の使用原則の分析

php中世界最好的语言

リリース： 2018-04-18 11:34:19

オリジナル

1477 人が閲覧しました

今回は、Ajax の使用原理の分析と、Ajax を使用する際の注意事項について説明します。以下は実際のケースです。見てみましょう。

実際、AJAX の内部実装は面倒ではありません。主に XMLHttpRequest と呼ばれるオブジェクトが使用されており、このオブジェクトは既存のすべてのブラウザーでサポートされています。

これは AJAX 実装全体の基礎であり、ブラウザがバックグラウンドでサーバーとデータを交換するために使用されるオブジェクトであり、AJAX と部分的なページ更新の技術が存在します。

この記事では主に Ajax の原則とコードのカプセル化に関する関連内容を紹介し、参考と学習のために共有します。以下では多くを述べませんが、詳細な紹介を見てみましょう。

サンプルコード

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){
  // to do...
 }
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

ログイン後にコピー

手順:

1.作成します。

XMLHttpRequest オブジェクトを作成するための構文:

var = new XMLHttpRequest();

ログイン後にコピー

Internet Explorer の古いバージョン (IE5 および IE6) は ActiveX オブジェクトを使用します:

var = new ActiveXObject("Microsoft.XMLHTTP");

ログイン後にコピー

2. 接続して送信します。

2.1. open() 関数の 3 つのパラメーター: リクエストメソッド、リクエストアドレス、非同期リクエストするかどうか

2.2. GET リクエストメソッドは URL パラメーターを通じてサーバーにデータを送信しますが、POST は送信パラメーターとしてサーバーにデータを送信します

2.3. POSTリクエストでは、データを送信する前にフォーム送信のコンテンツタイプを設定する必要があります

2.3. サーバーに送信されるパラメーターは、

メソッドを通じてエンコードされる必要があります。実際、パラメーターリストの key=value 形式では、キーと値の両方に encodeURIComponent() 特殊文字が含まれるため、エンコードする必要があります。リクエストが行われるたびに、v=xx の string がパラメータリストに入力されます。これは、毎回キャッシュを拒否し、サーバーに直接リクエストするためです。

3. 受け取ります。

3.1. 応答を受信すると、応答データは自動的に XHR オブジェクトに入力されます。 responseText: 応答によって返される本文の内容 (文字列型)

responseXML: 応答のコンテンツタイプが「text/xml」または「application/xml」の場合、この属性には、XML に対応するドキュメントタイプである対応する XML データが格納されます。ステータス: 応答

HTTP ステータスコード

; statusText: HTTP ステータスの説明

3.2. XHRオブジェクトのreadyState属性は、リクエスト/レスポンスプロセスの現在のアクティブな段階を表します。この属性の値は次のとおりです。 0 --> 初期化されていないため、

メソッドが呼び出されていません。 1 -->

メソッドが呼び出され、

メソッドが呼び出されませんでした。 2 --> 送信、

メソッドが呼び出されましたが、応答は受信されませんでした。 3 --> 応答データの一部を受信しました。 4 --> 完了、すべての応答データが受信されました。 readyState の値が変化する限り、readystatechange イベントが呼び出されます (実際には、送信時にサーバーへの要求によりネットワーク通信が発生し、時間がかかるため、論理的にスムーズにするために、readystatechange を送信の後に配置できます。readystatechangeopen() を指定します)。送信後のイベント処理

プログラムも可能です。私は通常このように使用しますが、標準化とブラウザ間の互換性のために、開く前に指定することをお勧めします)。

open()方法，未调用send() 3.3.readystatechange イベントでは、最初に応答が受信されたかどうかを判断し、次に 2 で始まるステータスコードがキャッシュから取得されたことを意味します。コードは毎回使用されます。リクエスト時に乱数が加算されるため、キャッシュから値が取得されることはなく、このステータスを判断する必要はありません。

Ajax カプセル化方法: send()

 ajax({  
  url: "./test.php",
  type: "POST",      
  data: { name: "abc", age: 18 },   
  dataType: "json",  
  success: function (response, xml) {   
   // 执行成功回调  
  },  
  fail: function (status) {   
   // 执行失败回调  
  }
 });
  
  function ajax(options) { 
   options = options || {}; 
   options.type = (options.type || "GET").toUpperCase();  
   options.dataType = options.dataType || "json";  
   var params = formatParams(options.data);    
   
   // 创建对象  
   if (window.XMLHttpRequest) {   
    var xhr = new XMLHttpRequest(); 
   } else {   
    var xhr = new ActiveXObject('Microsoft.XMLHTTP');  
   } 
   
   //接收 - 第三步
   xhr.onreadystatechange = function () {   
    if (xhr.readyState == 4) {    
     var status = xhr.status;    
     if (status >= 200 && status < 300) {     
      options.success && options.success(xhr.responseText,xhr.responseXML);    
     } else {     
      options.fail && options.fail(status);    
     }   
    }
   }  
    
   //连接 和 发送 - 第二步 
   if (options.type == "GET") {   
    xhr.open("GET", options.url + "?" + params, true);   
    xhr.send(null);  
   } else if (options.type == "POST") {   
    xhr.open("POST", options.url, true);   
    //设置表单提交时的内容类型   
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(params);  
   }  
   
   //格式化参数 
   function formatParams(data) { 
    var arr = [];  
    for (var name in data) {   
     arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name])); 
    }  
    arr.push(("v=" + Math.random()).replace(".",""));  
    return arr.join("&"); 
   }

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

xhr.status

以上がAjax の使用原則の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。