jQueryofAjax Events 5

This time, ajaxStart which from midst of Ajax Events has the chart 4th in is introduced.

Please refer to the below-mentioned link concerning the acquisition and the like of jQuery.

• jQuery
  • The download of jquey.js
• jQuery document API/1.x/Ajax
• The download and installation of jQuery

ajaxStart method

As for ajaxStart which this time is picked up, Ajax request starts, it becomes active (XHR object it is formed,) before, it is the event which is executed.

If one time it sets this, while all Ajax requesting being in common, it is the global event which can occur, as for operation with individual request, it can control with the global property.

In other words, cutting vertically the individual element and request, it is the event which can operate.

So, it tries trying.

Clicking whichever button, before the transmitting “transmission started”, when transmitting (send) “transmitted”, when completing the reception (completes) “received” letter hueidoin [hueidoauto] does.

that is, each element alsonot limited to the request of, each event has been set in the global.

the request itself, buttona string of$.getinmsg.phpsent to, is that just as it is back.

test1
<div>please try to press the button. <button class=”test1″>click that1</button> <button class=”test1″>click that2</button> <button class=”test1″>click that3</button> <p id=”my1″>here is overwritten</p> <p id=”indist” style=”display:none”>transmission has started</p> <p id=”indise” style=”display:none”>has been sent</p> <p id=”indic” style=”display:none”>was received</p> </div> <script type=”text/javascript”> jQuery(function($){ /Ajax Events $(document.body) /event at the start .ajaxStart( function(){ $(“#indist”).fadeIn(); $(“#indist”).fadeOut(); } ) /when sending event.ajaxSend(function(){ $(“#indise”).fadeIn(); $(“#indise”).fadeOut(); }) /event when it receives.ajaxComplete(function(){ $(“#indic”).fadeIn(); $(“#indic”).fadeOut(); }) /Ajaxrequest execution $(“.test1″).click(function () { $.get( “./msg.php”,{ data1:$(this).text() }, function(data){ $(“#my1″).html(data); } ); }); }); </script> (file you want to request) ./msg.php <?php /data1theGETreceived at the $Data1 = $_GET['data1']; /invalidation tag $Data1=htmlspecialchars($Data1); /bound to return echo($Data1.”i clicked on a”); ?>
in this way, ajaxStartis, against which requestsajaxStartthat it is running at you can see in common.

the way, in the sample above, ajaxStartthedocument.bodythey seem to be tied to, in fact, for example,, <p id=”dmy”></p>prepare it the elements such as, $(“#dmy”).ajaxStart(function(){…}also wrote, such as, as wellajaxStartwill be executed in the global.

next page in, ajaxStartalsobindtry to set a.

bindis set

ajaxStartbut, jQueryevents set the standard methodbindusing theajaxStarttry to set a.

in, let’s try.

previous page as well, when you click a button which, before sending transmission has started , when sending(send)is has been sent , on completion of reception(completes)to the was received character will fade in-fade out.

test2
<div>please try to press the button. <button class=”test1″>click that1</button> <button class=”test1″>click that2</button> <button class=”test1″>click that3</button> <p id=”my1″>here is overwritten</p> <p id=”indist” style=”display:none”>transmission has started</p> <p id=”indise” style=”display:none”>has been sent</p> <p id=”indic” style=”display:none”>was received</p> </div> <script type=”text/javascript”> jQuery(function($){ /Ajax Events $(document.body) /event at the start .bind(“ajaxStart” ,function(){ $(“#indis”).fadeIn(); $(“#indis”).fadeOut(); } ) /when sending event.bind(“ajaxSend”,function(){ $(“#indise”).fadeIn(); $(“#indise”).fadeOut(); }) /event when it receives.bind(“ajaxComplete”,function(){ $(“#indic”).fadeIn(); $(“#indic”).fadeOut(); }) /Ajaxrequest execution $(“.test1″).click(function () { $.get( “./msg.php”,{ data1:$(this).text() }, function(data){ $(“#my1″).html(data); } ); }); }); </script> operation, is exactly the same as previous page.

next page in, bindinstead ofonetry to set a.

jQueryofAjax Events 4

1: ajaxStartmethod
2: bindis set
3: oneis set

oneis set

previous page ofbindis, can occur many times each time a request is executed, in turn, bindinstead ofoneusing the method, will be executed only once the first.

in the following sample, previous page as well, when you click a button which, , before sending transmission has started , when sending(send)is has been sent , on completion of reception(completes)to the was received will fade in-fade out of character, of processing before sending, ajaxStarttheonesince the set is, will be only once.

but, i request will be executed many times, ajaxStartother than, bindbecause it is set, the fade-in fade out again and again.

in, let’s try.

test3