How to reduce the amount of code written with ajax requests? And asynchronous file sending

So ajax requests, everything is simple, everyone is used to writing them, but how can you reduce the amount of written code?
jquery.async.js

Just an example:

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

the form is sent asynchronously

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

files boot asynchronously
')

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

data is sent asynchronously

And then many probably had a question, how to process the received data, if the form is not valid, why send it, and if I want to send additional parameters?

And we start with the question of how to process the data

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

Well, it's not interesting, so we will not reduce a lot of code. But sometimes useful.

And here the jquery.message.async.js script will help us, we just need to send data from the server in a certain format. And the jasync attribute = "message"

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

Sample data sent:

 { 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: '...' } } } 

or

 { url: '   ' } 

And so in most cases we can not write ajax requests.

Additionally, we can cancel the submission, for example, if the form is not valid:

 $( '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' //    } ); } ); 

The code in php will look something like this:

 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('') ) ) ) ); 

Let's try to improve it, for this we will write an additional class AsyncResponse

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

Be careful when the data is sent to you via an iframe, this happens in the following cases:

1. When you send requests to another domain.
   Since for security reasons we cannot read data from another domain loaded into an iframe,
   when you answer, you need to make a redirect to your domain, and there already form an answer.
   
2. When you load images in old browsers that don't have FormData support
   Also when sending via iframe, if you have tags in response (for example, div),
   If you have any problems, the browser will add extra closing tags and parse json will not work.
   In this case, send elementary responses without tags, or before sending and when receiving, replace the quotes
   

File upload

In the case of Drag and Drop will only work in browsers that support Drag and Drop.

Make a link when clicking on which a window will appear with a choice of files

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

or block where you need to drag the image

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

Subscribe to the download events of each image

 $( 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 ); } ); 

Download the scripts at http://jquery-async.com/download/
Or if the server is not available, which is quite possible, here