S53#44-1 Sync, ASync4-2 Image4-3 ajax4-4 script2012.11.07 20:30 ~ 22:30
Sync, OrderCycle                                            Asynca = 3;                    Order1                         ...
Sync        Order1          a = 3;                                  Order1   start - wait - end   while( a++ < 100);      ...
Synca = 3;                                                  Order1function loop(){                                        ...
Asynca = 3;                        a = 3;function loop(){              function loop( $end ){  if( a++ == 100 ){          ...
ImageCreate Image Element1. <img id="id"/> | var img = document.getElementById( id );2. var img = document.createElement( ...
Imageif( window[HTMLCanvasElement] ){   if( window[HTMLCanvasElement] ){                                         function ...
Imagefunction ImageLoader( $complete ){                      if( window[HTMLCanvasElement] ){  function loaded( $img ){   ...
ajaxCreate xhr                                  loadvar xhr;                                    function onload( $xhr, $co...
ajaxsync                                  asyncfunction loader( $url, $complete ){   function loader( $url, $complete ){  ...
scriptonload                                             scriptLoaderif( window[addEventListener] ){                  func...
scriptbulkScriptLoader                                        scriptLoaderfunction buldScriptLoader( $complete ){         ...
scriptsequenceScriptLoader                                    bulkScriptLoaderfunction sequenceScriptLoader( $complete ){ ...
Upcoming SlideShare
Loading in …5
×

javascript networking

519 views
420 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
519
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

javascript networking

  1. 1. S53#44-1 Sync, ASync4-2 Image4-3 ajax4-4 script2012.11.07 20:30 ~ 22:30
  2. 2. Sync, OrderCycle Asynca = 3; Order1 Order1while( a++ < 100); start - wait - end start - wait - endalert( a ); Order2 a = 3; Order2 start - wait - end run( end ); start - wait - end b = 3; Order3 function end(){ alert( a ); Order3 start - wait - end } start - wait - end Listener start - wait - end
  3. 3. Sync Order1 a = 3; Order1 start - wait - end while( a++ < 100); start - wait - end alert( a ); Order2 Order2 a = 3; start - wait - end loop - break while( 1 ){ if( a++ == 100 ) break; Order3 } Order3 start - wait - end alert( a ); start - wait - end
  4. 4. Synca = 3; Order1function loop(){ start - wait - end if( a++ == 100 ){ next(); }else{ setTimeout( loop, 1 ); } Order function2 a = 3;} timerloop(); while( 1 ){ if( a++ == 100 )function next(){ break; alert( a ); }} Order function3 alert( a );
  5. 5. Asynca = 3; a = 3;function loop(){ function loop( $end ){ if( a++ == 100 ){ if( a++ == 100 ){ next(); $end(); }else{ }else{ setTimeout( loop, 1 ); setTimeout( loop, 1 ); } }} }loop(); loop( next );function next(){ function next(){ alert( a ); alert( a );} }
  6. 6. ImageCreate Image Element1. <img id="id"/> | var img = document.getElementById( id );2. var img = document.createElement( img );3. var img = new Image;Start Networkingimg.src = urlOnLoadimg.onload = function(){..};completeimg.complete == true
  7. 7. Imageif( window[HTMLCanvasElement] ){ if( window[HTMLCanvasElement] ){ function onload( img, complete ){ //onload img.onload = function(){}else{ complete( img ); //img.complete }; }} }else{ function onload( img, complete ){ function check(){ if( img.complete ){ complete( img );var img = new Image; }else{ setTimeout( check, 10 );onload( img, function( $img ){ } alert( $img ); }} ); check(); } }
  8. 8. Imagefunction ImageLoader( $complete ){ if( window[HTMLCanvasElement] ){ function loaded( $img ){ function onload( img, complete ){ arg[arg.indexOf( $img.src )] = $img; img.onload = function(){ if( ++count == arg.length ){ complete( img ); $complete( arg ); }; } } } }else{ function onload( img, complete ){ var i, j, img, arg, count; function check(){ arg = Array.prototype.slice.call( arguments, 1 ); if( img.complete ){ count = 0; complete( img ); for( i = 1, j = arguments.length ; i < j ; i++ ){ }else{ img = new Image; setTimeout( check, 10 ); onload( img, loaded ); } img.src = arguments[i]; } } check();} } }ImageLoader( complete, a.jpg, b.jpg, c,jpg );function complete( $images ){ alert( $images.length );}
  9. 9. ajaxCreate xhr loadvar xhr; function onload( $xhr, $complete ){if( $w[XMLHttpRequest] ){ var timer; xhr = function(){ $xhr.onreadystatechange = function(){ return new XMLHttpRequest; if( $xhr.readyState != 4 ) return; }; if( timer < 0 ) return;}else{ clearTimeout( timer ), timer = -1; xhr = ( function(){ if( $xhr.status == 200 || $xhr.status == 0 ){ var temp, i, j; $complete( $xhr.responseText, $xhr ); temp = [ }else{ Microsoft.XMLHTTP, $complete( null, $xhr ); MSXML2.XMLHTTP, } MSXML2.XMLHTTP.3.0, }; MSXML2.XMLHTTP.4.0, timer = setTimeout( function(){ MSXML2.XMLHTTP.5.0 if( timer < 0 ) return; ]; timer = -1; i = temp.length; if( $ complete ) $complete( null, $xhr ); while( i-- ){ }, 10000 ); try{ } j = temp[i]; function loader( $url, $complete ){ new ActiveXObject( j ); var loader; }catch( $e ){ loader = xhr(); continue; onload( loader, $complete ); } loader.open( GET, $url, true ); break; loader.send(); } } return function(){ return new ActiveXObject( j ); loader( data.php, oncomplete ); }; function oncomplete( $data ){ } )(); alert( $data );} }
  10. 10. ajaxsync asyncfunction loader( $url, $complete ){ function loader( $url, $complete ){ var loader; var loader, timer; loader = xhr(); onload( loader, $complete ); timer = setTimeout( function(){ loader.open( GET, $url, true ); if( timer < 0 ) return; loader.send(); timer = -1;} if( $ complete ) $complete( null, $xhr ); }, 10000 ); loader = xhr(); loader.open( GET, $url, false ); loader.send(); if( $xhr.readyState == 4 && timer > -1 ){ clearTimeout( timer ), timer = -1; { if( $xhr.status == 200 || $xhr.status == 0 ){ $complete( $xhr.responseText, $xhr ); } } $complete( null, $xhr ); }
  11. 11. scriptonload scriptLoaderif( window[addEventListener] ){ function scriptLoader( $url, $complete ){ onload = function( $script, $complete ){ var scr, i; $script.onload = function(){ scr = document.createElement( script ); $script.onload = null; scr.type = text/javascript; $complete( $script.src ); scr.charset = utf-8; }; onload( scr, $complete ); }; document.getElementsByTagName( head )[0]}else{ .appendChild( scr ); onload = function( $script, $complete ){ scr.src = $url; $script.onreadystatechange = function(){ } switch( $script.readyState ){ caseloaded:casecomplete: scriptLoader( jq.js, oncomplete ); $complete(); function oncomplete( $url ){ } alert( loaded: + $url ); }; } }}
  12. 12. scriptbulkScriptLoader scriptLoaderfunction buldScriptLoader( $complete ){ function scriptLoader( $url, $complete ){ function loaded( $url ){ var scr, i; if( ++count == total ){ scr = document.createElement( script ); $complete(); scr.type = text/javascript; } scr.charset = utf-8; } onload( scr, $complete ); document.getElementsByTagName( head )[0] var i, j, img, count, total; .appendChild( scr ); count = 0; scr.src = $url; total = arguments.length - 1; } for( i = 1, j = arguments.length ; i < j ; i++ ){ scriptLoader( arguments[i], loaded ); } bulkScriptLoader( oncomplete, 1.js, 2.js );} function oncomplete(){ alert( loaded ); }
  13. 13. scriptsequenceScriptLoader bulkScriptLoaderfunction sequenceScriptLoader( $complete ){ function buldScriptLoader( $complete ){ function loaded( $url ){ function loaded( $url ){ if( ++count == total ){ if( ++count == total ){ $complete(); $complete(); }else{ } scriptLoader( arg[count], loaded ); } } } var i, j, img, count, total; count = 0; var i, j, img, count, arg; total = arguments.length - 1; count = 0; for( i = 1, j = arguments.length ; i < j ; i++ ){ arg = Array.prototype.slice.call( arguments, 1 ); scriptLoader( arguments[i], loaded ); scriptLoader( arg[0], loaded ); }} }sequenceScriptLoader( oncomplete, 1.js, 2.js );function oncomplete(){ alert( loaded );}

×