jQueryソース分析の$.get/$.post/serialize/serializeArrayメソッドの詳細
7584 ワード
get/postソースコードは以下の通りです.
(1)get/postメソッドの下位レベルで呼び出されるのはajaxメソッドである.入力された4番目のパラメータは、dataType、すなわちサーバ側から取得したデータ型を指定するために使用されます.
(2)Getメソッドはデータ量の大きいデータを転送するのに適していないとともに,要求された履歴情報もブラウザのキャッシュに保存され,一定のリスクがあるがpostには存在しない!ではgetリクエストはなぜajaxリクエストでキャッシュされるのか:(ajaxメソッドのコードクリップを参照)
typeStringタイプ
既定値:GET.要求タイプは、「POST」または「GET」であってもよい.注意:ここでは、「PUT」、「DELETE」などの他のリクエストタイプを使用することもできますが、すべてのブラウザでサポートされていません.これはcodeplayerの上の説明です.ではajaxメソッドはどのようにデフォルトを「GET」にするのか、次のセグメントを見てください.
note:デフォルトのtypeは「GET」であり、デフォルトではグローバルイベントが実行されます.同時にプロセスデータもtrueである.同時にayncはtrueで、デフォルトが非同期であることを示します!
プロセスデータBooleanタイプ
デフォルト:
getJSONソース:
getScriptソース:
実際には$("
ajaxリクエストまたはget/postリクエストの場合、フォームをシーケンス化する必要があり、serializeメソッドを導入しました.
コード1:
jQuery.each( [ "get", "post" ], function( i, method ) {
// ， !
jQuery[ method ] = function( url, data, callback, type ) {
// shift arguments if data argument was omitted
if ( jQuery.isFunction( data ) ) {
type = type || callback;
callback = data;
data = undefined;
}
// get type get。 post type post!
return jQuery.ajax({
url: url,
type: method,
dataType: type,
data: data,
success: callback
});
};
});(1)get/postメソッドの下位レベルで呼び出されるのはajaxメソッドである.入力された4番目のパラメータは、dataType、すなわちサーバ側から取得したデータ型を指定するために使用されます.
(2)Getメソッドはデータ量の大きいデータを転送するのに適していないとともに,要求された履歴情報もブラウザのキャッシュに保存され,一定のリスクがあるがpostには存在しない!ではgetリクエストはなぜajaxリクエストでキャッシュされるのか:(ajaxメソッドのコードクリップを参照)
var rnoContent = /^(?:GET|HEAD)$/
s.hasContent = !rnoContent.test( s.type );
// Save the URL in case we're toying with the If-Modified-Since
// and/or If-None-Match header later on
cacheURL = s.url;
// get/head ， if ， get/post cache， s.cache===false ! !
// URL ， ， GET ! post !
// More options handling for requests with no content
if ( !s.hasContent ) {//post ， !
// If data is available, append data to url
if ( s.data ) {
cacheURL = ( s.url += ( rquery.test( cacheURL ) ? "&" : "?" ) + s.data );
// #9682: remove data so that it's not used in an eventual retry
delete s.data;
}
// Add anti-cache in url if needed $.post/$.get cache
if ( s.cache === false ) {
s.url = rts.test( cacheURL ) ?
// If there is already a '_' parameter, set its value
cacheURL.replace( rts, "$1_=" + nonce++ ) :
// Otherwise add one to the end
cacheURL + ( rquery.test( cacheURL ) ? "&" : "?" ) + "_=" + nonce++;
}
}typeStringタイプ
既定値:GET.要求タイプは、「POST」または「GET」であってもよい.注意:ここでは、「PUT」、「DELETE」などの他のリクエストタイプを使用することもできますが、すべてのブラウザでサポートされていません.これはcodeplayerの上の説明です.ではajaxメソッドはどのようにデフォルトを「GET」にするのか、次のセグメントを見てください.
ajaxSettings: {
url: ajaxLocation,
type: "GET",
isLocal: rlocalProtocol.test( ajaxLocParts[ 1 ] ),
global: true,
processData: true,
async: true,
contentType: "application/x-www-form-urlencoded; charset=UTF-8"}note:デフォルトのtypeは「GET」であり、デフォルトではグローバルイベントが実行されます.同時にプロセスデータもtrueである.同時にayncはtrueで、デフォルトが非同期であることを示します!
プロセスデータBooleanタイプ
デフォルト:
true.デフォルトでは、data属性で渡されたデータは、オブジェクト(技術的には文字列でない限り)の場合、デフォルトのコンテンツタイプ「アプリケーション/x-www-form-urlencoded」に合わせてクエリー文字列に変換されます.DOMツリー情報または変換したくない他の情報を送信する場合は、falseに設定します.次に、get/postメソッドに基づくgetJSON、getScriptメソッドを見てみましょう.getJSONソース:
getJSON: function( url, data, callback ) {
return jQuery.get( url, data, callback, "json" );
}getScriptソース:
getScript: function( url, callback ) {
return jQuery.get( url, undefined, callback, "script" );
}実際には$("
ajaxリクエストまたはget/postリクエストの場合、フォームをシーケンス化する必要があり、serializeメソッドを導入しました.
コード1:
var obj={
name:"xxx",
sex:"female"
}
var result1=encodeURIComponent(obj);
var result2=decodeURIComponent(result1);
alert(result1+"->"+result2);// encodeURIComponent ， decodeURIComponent !var rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,
var rsubmittable = /^(?:input|select|textarea|keygen)/i;
var rcheckableType = (/^(?:checkbox|radio)$/i);
var rCRLF = /\r?
/g
jQuery.fn.extend({
serialize: function() {
return jQuery.param( this.serializeArray() );
},
serializeArray: function() {
// elements elements， !
return this.map(function() {
// Can add propHook for "elements" to filter or add form elements
var elements = jQuery.prop( this, "elements" );
return elements ? jQuery.makeArray( elements ) : this;
})
.filter(function() {
var type = this.type;
//filter DOM
// Use .is(":disabled") so that fieldset[disabled] works
// name ， ， nodeName input/select/textarea/kengen
// type sumbit/button/image/reset/file ， checked
// checkded ， checkbox/radio
return this.name && !jQuery( this ).is( ":disabled" ) &&
rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
( this.checked || !rcheckableType.test( type ) );
})
.map(function( i, elem ) {
//
// ， null null
// ， ，
// ， ，name ， ， ！
var val = jQuery( this ).val();
return val == null ?
null :
jQuery.isArray( val ) ?
jQuery.map( val, function( val ) {
return { name: elem.name, value: val.replace( rCRLF, "\r
" ) };
}) :
{ name: elem.name, value: val.replace( rCRLF, "\r
" ) };
}).get();
}
});
serializeArray()関数は、フォーム要素のセットをシーケンス化し、フォームコンテンツをJavaScript配列に符号化するために使用されます.serializeArray()関数は、JSON形式で符号化される文字列を容易にするために、フォームの内容をJSONオブジェクトにシーケンス化するためによく使用される.この関数は、コミットに使用できる各フォームコントロールを、名前とvalueのプロパティ、フォームコントロールの名前とvalueのプロパティを持つObjectオブジェクトにカプセル化します.次に、これらのObjectオブジェクトを配列にカプセル化して返します.この関数は、コミットする必要のないフォームコントロールをシーケンス化しません.これは、通常のフォームコミット動作と一致します.たとえば、