अजाक्स अनुरोधों के साथ लिखे गए कोड की मात्रा को कैसे कम करें? और एसिंक्रोनस फाइल अपलोड

तो अजाक्स अनुरोध, सब कुछ सरल है, हर कोई उन्हें पहले से ही लिखने के लिए उपयोग किया जाता है, लेकिन फिर भी आप लिखित कोड की मात्रा को कैसे कम कर सकते हैं।
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 = "संदेश" विशेषता

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

और इसलिए ज्यादातर मामलों में हम अजाक्स अनुरोध नहीं लिख सकते हैं।

इसके अतिरिक्त, हम सबमिशन को रद्द कर सकते हैं, उदाहरण के लिए, यदि फॉर्म मान्य नहीं है:

 $( '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),
   यदि आपको समस्याएं हैं, तो ब्राउज़र अतिरिक्त समापन टैग जोड़ देगा और पार्स जोंस काम नहीं करेगा।
   इस स्थिति में, टैग के बिना प्राथमिक उत्तर भेजें, या भेजने और प्राप्त करने से पहले उद्धरण चिह्नों को बदलें
   

फ़ाइल अपलोड करें

ड्रैग एंड ड्रॉप के मामले में, यह केवल उन ब्राउज़रों में काम करेगा जो ड्रैग एंड ड्रॉप का समर्थन करते हैं।

जब आप क्लिक करते हैं तो एक लिंक बनाएं जिस पर फ़ाइलों के चयन के साथ एक विंडो दिखाई देगी

 <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/ पर डाउनलोड किया जा सकता है
या यदि सर्वर उपलब्ध नहीं है, जो काफी संभव है, तो यहां