Ajaxの原則と梱包

Ajaxの原則

ステップ1：XMLHTTPRequestをオブジェクトの作成

VaRの XHR = 新しい XMLHttpRequestを（）;

ステップ2：設定オブジェクトXHR

xhr.open（「要求メソッド」、「要求アドレス」）。

 

第三段階：要求を送信します

xhr.send（NULL）。

 

第四ステップ：受信に応答して、

= xhr.onreadystatechangeの関数（）{
 // はconsole.log（1）; 
// 長い状態が正常に決定することができ、成功ステータスコード4 
IF（xhr.readyState === 4 ）{ 
にconsole.log（「データ要求成功" ）;
 //は、対応するデータをフェッチ; 
にconsole.log（xhr.responseText）
} 
}

 

GETリクエスト

データは、アドレスバーのスプライスに送信され、

VaRの XHR = 新しいXMLHttpRequestを（）; 
xhr.open（ "GET"、 "./03_data.php" ）; 
xhr.send（NULL ）。
xhr.onreadystatechange = 関数（）{
 場合（xhr.readyState === 4 ）{ 
にconsole.log（xhr.responseText）
}

 

データ交換のためのPHPコード

<？PHP 

$ユーザ名 = $ _REQUEST [ "ユーザー名" ];
 $パスワード = $ _REQUEST [ "パスワード" ];
 エコー "ユーザー名は次のとおりです。$ユーザ名、パスワード：$パスワード " ;
？>

 

POSTリクエスト

**データはどこへ行く後端に体内に配置されたリクエストを送信し、送信の間に配置されています。**

VaRのデータ= { 
： 10 、
B： 20 
} 
VARの XHR = 新規のXMLHttpRequest（）; 
xhr.open（ "POST"、 "./ 02_data.php" ）; 
xhr.setRequestHeader（ 'コンテンツタイプ'、 'アプリケーション/ x-www-form-urlencodedで' ）。
xhr.send（ "= 10＆B = 20" ）。
xhr.onload = 関数（）{ 
にconsole.log（xhr.responseText）。
}

 

 データ交換のためのPHPコード

<？PHP
 $ A = $ _POST [ "" ];
$ B = $ _POST [ "B" ]; 

エコー " $、$ B " ;
？>

 

カプセル化のためのjQueryのは、Ajaxをモデル化

完全なコード

関数アヤックス（オプション）{
 VAR _default = { 
タイプ： "GET" 、
URL： "" 、
データ：ヌル、
データ型： "テキスト" 、
ステータス：ヌル、
：成功の関数（）{}、
完全な：関数（）{} 、
エラー：関数（）{} 
} 
オプション = 割り当て（_default、オプション）。
options.type = options.type.toLowerCase（）。
もし（ISOBJECT（options.context））{
 VAR= callback_list [ "成功"、 "完了"、 "エラー" ]; 
callback_list.forEach（関数（項目）{
 // はconsole.log（オプション[商品]）; 
オプション[商品] = [オプション] [商品] .bind（オプション.context）; 
}）
} 

// 1. SHRを作成し、
VAR XHR = NULL ;
 IF（typeof演算のXMLHttpRequest === "機能" ）{ 
XHR = 新しい新規のXMLHttpRequest（）; 
} 他{ 
XHR = 新しい新しい ActiveXObjectを（「Microsoft.XMLHTTP " ）; 
} 
// 要求されたモードが取得された場合は1、我々はデータのURLにスプライシングされました。
？ヌル：options.data）。



// コールバック関数、 
xhr.onreadystatechange = 関数（）{
 IF（xhr.readyState === 4 ）{ 
options.complete（）; 
IF（/ ^ 2 \ {D} $ 2 / .TEST（XHR。ステータス））{
 // 6.データを転送する
試み{
 VAR RES = options.dataType === "JSON"？JSON.parse（xhr.responseText）：xhr.responseText; 
options.success（RES）; 
} キャッチ（E）を{ 
options.error（E、xhr.status）; 
} 
} 他{ 
options.error（ "エラー" 、xhr.status）; 
} 
// ポリシーRECALL：
IF （ISOBJECT（options.status））{
typeofを options.status [xhr.status] === "機能"？options.status [xhr.status]（）： "" 。
} 
} 
} 
} 
VARのオプション= { 
URL： "./02_data.php" 、
 // データ型： "JSON" 
データ：{ 
： 1 、
B： 2 
}、
タイプ： "POST" 、
成功：関数（RES） { 
にconsole.log（RES、これを）。
}、
エラー：関数（RES）{ 
にconsole.log（ "失败" 、RES）。
}、
完全な：機能（）{ 
にconsole.log（ "完全" ）; 
} 
コンテキスト：{C： 1 }、
ステータス：{
 200：関数（）{ 
にconsole.log（ "マイステータスコード200、非常に正常" ）; 
}
 404：関数（）{ 
にconsole.log（ "私はページを見つけることができません" ）
} 
} 
} 
のAjax（オプション）
関数ASSIGN（）{
 VARの目標=引数[0 ];
 のための（VAR I = 1; I <引数。長さ; I ++ ）{
 // はconsole.log（引数[I]）; 
のための（VARの ATTRで引数[I]）{ 
標的[ATTR] = 引数[I] [ATTR]。
} 
} 
戻りターゲット; 
} 

関数toUrlData（OBJ、URL、メソッド）{
 場合（ISOBJECT（OBJ））{
 VAR STR = "" ;
用（VARの ATTR でOBJ）{ 
STR + = "＆" + ATTR + "=" + OBJ [ATTR] 
} 
STR = str.slice（1 ）。
方法 = ||方法 "" ;
もし（method.toUpperCase（）=== "POST" ）{
 戻りSTR。
} 
URL + = "？"STR;
リターンURL; 
} 
戻りURL; 
} 
関数{ISOBJECT（データ）
 のリターン（typeof演算データ=== "オブジェクト" &&データ！== NULL && data.constructor && data.constructor === オブジェクト）
}