まだ少し怖い一見多くのパラメータので、ドキュメントを参照するための時間で学習jQueryのAJAXで、しかし、ネイティブのJSパッケージにAJAXの実現を理解することは、理解することは比較的簡単にすることができます
ネイティブJSパッケージAJAX
<スクリプト> 機能アヤックス(オプション){ // デフォルトのパラメータの設定 VAR _default = { タイプ: "GET" 、 URL: "" 、 データ:ヌル、 データ型: "テキスト" 、 ステータス:ヌルを、 成功:関数(){} 、 コンプリート:関数(){}は、 エラー:関数(){} } // デフォルトのデータをカバーする入力データ オプション=ASSIGN(_default、オプション); // 変換伝送データタイプ小文字 options.type = options.type.toLowerCase(); // コールバック関数は、これが結合先の尖っ; IF (ISOBJECT(options.context)){ VaRの callback_list = [ "成功"、 "完了"、 "エラー" ]; callback_list.forEach(関数(項目){ オプション[商品] = [オプション] [商品] .bind(options.context) }) } VAR XHR = NULL ; IF(typeof演算のXMLHttpRequest === "機能" ){ XHR =新しい新しいのXMLHttpRequest(); } 他{ XHR = 新しい新しい ActiveXObjectを(「Microsoft.XMLHTTP」); } // の送信データの種類を判別 // タイプは取得データの伝送を、URLに接合置くデータ IF(options.type === "GET" ){ options.url = toUrlData(options.data、options.url、options.type) } // 送信データがポストのタイプである場合、スプライスされたデータのデータを配置する IF(= options.type == "POST" ){ options.data = toUrlData(options.data、options.url、options.type) } xhr.open(options.url、options.type.toUpperCase()はtrue ); // 決定ポスト転送モード、設定要求ヘッダーか options.type === "ポスト" xhr.setRequestHeader( "コンテンツタイプ" ,? "アプリケーション/ X - WWW-form-urlencodedでは"): "" ; // 送信メソッド呼び出し ?GET "xhr.send(options.type ===" NULL ; options.data) xhr.onreadystatechange = 関数(){ IF(xhr.readyState === 4 ){ options.complete(); IF(/ ^ 2 \ {D} $ 2 / .TEST(xhr.status)){ // 転送データ、必要な変換は、JSONに変換される場合、それはリターンを必要としないので、 //JSONエラー、エラー関数ならば、我々は呼んで 試して{ 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の目標=引数[0 ]。 ため(VAR I 1 =; I <arguments.lengthを、I ++ ){ 用(VARの ATTR で引数[I]){ 標的[ATTR] = 引数[I] [ATTR]。 } } 戻り目標 } //拼接URL地址 機能toUrlData(OBJ、URL、メソッド){ IF (ISOBJECT(OBJ)){ VAR "STR =" ; のための(VARの ATTR でOBJ){ STR + = "&" + ATTR + "=" + OBJ [ATTR] } STR = str.slice(1 ); / / データ伝送方法は、POSTは、それがSTR直接その後、戻ってきた場合、 メソッドのメソッド|| = "" ; IF(method.toUpperCase()=== "POST" ){ 戻り列str; } URL + = "" +?STR; リターンURL; } 戻りURL; } //判断したか否かのオブジェクト 関数ISOBJECT(データ){ にconsole.log(data.constructor) リターン(typeof演算!データ=== "オブジェクト"データ== && ヌル && && data.constructor == data.constructor = オブジェクト) }
//設定された送信パラメータ VARのオプション= { URL: "./data.php" 、 データ:{ : 2 、 B: 4 }、 タイプ: "POST" 、 成功:関数(RES){ console.log(RES、この) }、 エラー:関数(RES){ にconsole.log( "失敗" 、RES) }、 コンプリート:機能(RES){ にconsole.log( "完全" ) }、 コンテキスト:{DDD : 1 }、 ステータス:{ 404:関数(){ にconsole.log( "私はページを見つけることができません" ) }、 200:関数(){ にconsole.log( "私のステータスコードは、非常に正常200です") ; } } }
//调用アヤックス アヤックス(オプション) </スクリプト>
上記の処女を読んだ後、次のような外観のjQueryのAJAXをAJAX JSパッケージを実装
jQueryのAJAX
jQueryのAJAXで書かれた3つがあります。
執筆: $ .getJSON $ .getScriptは 使いやすいですが、貧しいカスタマイズすることができます
$ .getJSON( "./ 06_data.php"、{データ: "Hello World"の}、機能(RES){ はconsole.log(RES) })
// JSの実行などの要求データバックにデフォルト
$ .getScript( "./ 06_data.js" 機能(RES){ にconsole.log(RES) })
2著:ロード$に.get $ .post:コンフィギュラある程度のがあります
$( "ヘッダ")負荷( "./ 06_data.html" ,. 関数(){ // 要素の操作は、コールバック関数の内部に配置されなければならない $( "ヘッダ" ).children()CSS({ 色: "#1 F99" }) }) $に.get( "./06_data.php"、{データ: "GET要求"}、関数(RES){ にconsole.log(RES) }、 "JSON")
3著:$ AJAX :.任意の構成もJSONPサポートすることができます
$アヤックス({ URL: "./06_data.php" 、 データ:{データ: "Hello World"の}、 データ型: "JSON" 、 成功:機能(RES){ はconsole.log(RES) } })
$アヤックス( "./ 06_data.php"、{
タイプは、「get」、
データ型: "HTML"、
成功:機能(RES){
console.log(RES)
}
})
//任意の設定パラメータ
$アヤックス({
URL: "./07_data.php"、
データ:{:10、B:20}、
タイプ: "GET"、
データ型: "JSON"、
コンテキスト:{名前: "私の文脈"}、
状態 : {
404:関数(){
}、
500:関数(){
}
}
});
これらを読んだ後、それのようなjQueryとJS 3ネイティブパッケージに書かれたが見つからない場合、ネイティブJSパッケージを読んで、あなたは簡単にAJAXで使用されるパラメータをJQ理解することができます
〜これでさあ