ホームページ > 記事 > ウェブフロントエンド > Ajax の使用原則の分析
今回は、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 がパラメータ リストに入力されます。これは、毎回キャッシュを拒否し、サーバーに直接リクエストするためです。
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 サイトの他の関連記事を参照してください。