Ajaxリクエストで記述されたコードの量を減らす方法は？ 非同期ファイルのアップロード

Ajaxリクエスト、すべてがシンプルで、誰もがすでにそれらを書くことに慣れていますが、それでも、どのように書くコードの量を減らすことができます。

jquery.async.js



すぐに例：

<form action="/" jasync> <input type="submit" /> </form>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フォームは非同期に送信されます

 <input type="file" href="/" multiple jasync /> <div type="file" href="/" multiple jasync> </div> <div href="/" jasync dropfile>      </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ファイルは非同期にロードされます

 <a href="/" jasync data="year=2013&month=5" class="send"> </a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

データは非同期に送信されます



そして、ここでは、おそらく、受信したデータを処理する方法、フォームが有効でない場合、なぜ送信するのか、追加のパラメーターを送信するのかという質問がありますか？



そして、受信したデータを処理する方法の質問から始めましょう

 $( '.send' ).bind( 'jasync.success', function( e, data ) { // data -   } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まあ、これは面白くないので、多くのコードを削減しません。 しかし、時には便利です。



ここで、 jquery.message.async.jsスクリプトが役立ちます。サーバーから特定の形式でデータを送信するだけです。 そして、jasync = "message"属性

 <form action="/" jasync="message"> <input type="submit" /> </form>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

送信されたデータの例：

 { messages: { { type: 'replace', elem: '#myElem', html: '  ' }, { type: 'append', elem: '.myClass', html: ' ' }, { type: 'delete', elem: '.delElems' }, { callback: 'alert', callback_params: [ '' ] }, { type: 'openPopap', //   jquery.message.ajax.js   ,       html: '...' } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または

 { url: '   ' }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのため、ほとんどの場合、ajaxリクエストを作成できません。



さらに、たとえばフォームが無効な場合、送信をキャンセルできます。

 $( 'form' ).bind( 'jasync.beforeSend', function( ) { var form = $( this ); if( !form.isValid() ) { form.jasync( 'stop', true ); //  } //           form.jasync( { 'addData': { count: 20, typesend: 'send jasync' }, 'dataType': 'json' //    } ); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

PHPコードは次のようになります。

 header( 'Content-type: text/json' ); echo json_encode( array( 'messages' => array( array( 'type' => 'replace', 'elem' => '#myElem', 'html' => '  ' ), array( 'type' => 'append', 'elem' => '.myClass', 'html' => ' ' ), array( 'type' => 'delete', 'elem' => '.delElems' ), array( 'callback' => 'alert', 'callback_params' => array('') ) ) ) );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それを改善してみましょう、これのために追加のクラスAsyncResponseを書きます

 $message = AsyncResponse::getInstance(); $message ->add( AsyncResponse::REPLACE, '#myElem', '  ' ) ->add( AsyncResponse::APPEND, '.myClass', ' ' ) ->add( AsyncResponse::DELETE, '.delElems' ) ->addCallback( 'console.log', '', '!!!' ); //->openPopup( '' ) $message->end();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

データがiframe経由で送信される場合は注意してください。これは次の場合に発生します。

1. 別のドメインにリクエストを送信するとき。
   
   セキュリティ上の理由から、iframeに読み込まれた別のドメインからデータを読み取ることはできないため、
   
   あなたが答えるとき、あなたはあなたのドメインにリダイレクトする必要があります、そして、すでに応答を形成します。
   
   
2. FormDataをサポートしていない古いブラウザーで画像をロードする場合
   
   また、iframe経由で送信する場合、応答にタグ（divなど）がある場合、
   
   問題がある場合、ブラウザーは余分な終了タグを追加し、jsonの解析は機能しません。
   
   この場合、タグなしで基本的な回答を送信するか、送受信する前に引用符を置き換えます
   
   

ファイルのアップロード

ドラッグアンドドロップの場合、ドラッグアンドドロップをサポートするブラウザでのみ機能します。



クリックすると、選択したファイルのウィンドウが表示されるリンクを作成します

 <a href="/image/save/" name="image" multiple jasync> </a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または画像をドラッグする必要がある場所をブロックします

 <div href="/image/save/" name="image" dropfile jasync> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

各画像の読み込みイベントにサブスクライブします

 $( document ).on( 'jasync.beforeSend', 'a[type=file]', function( e, imgs ) { //     $( this ).jasync( { 'addData': { count: 20 }, 'maxSize': 20000 //    } ); if( imgs.nosupport ) { $( '#answer' ).html( '   iframe,    ...' ); return; } for( var i = 0, l = imgs.length; i < l; i++ ) { imgs[ i ] //       .bind( 'jasync.load', function( e, file ) { // file -    base64 $( 'body' ).append( '<img src="' + file + '" />' ); $( this ) //      .bind( 'jasync.uploadProgress', function( e, percent, obj ) { // percent -   } ) //    .bind( 'jasync.success', function( e, data ) { //console.log( data ); } ) //   .bind( 'jasync.error', function() { } ); } ); } } ).on( 'jasync.success', 'a[type=file]', function( e, data ) { //      iframe $( '#answer' ).html( data ); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スクリプトはhttp://jquery-async.com/download/からダウンロードできます。

または、サーバーが利用できない場合は、かなり可能です。