Simulate image ajaxPrefilter and ajaxTransport processing in JQuery

Simulate image ajaxPrefilter and ajaxTransport processing in JQuery

This article mainly introduces how to simulate image ajaxPrefilter and ajaxTransport processing in JQuery. This article provides the Simulated Implementation Code directly. The Code contains detailed annotations. For more information, see

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90

//////////////////////////////////////// ////////////////////////// // Options is the request option // // The originalOptions value is used as the option provided to the Ajax method without modification. Therefore, the default value in the ajaxSettings setting does not exist // // JqXHR is the requested jqXHR object // //////////////////////////////////////// ////////////////////////// $. AjaxPrefilter ("image", function (options, originalOptions, jqXHR ){ // Convert the Data Type through the pre-processor If (options. test ){ Options. type = 'get' } // Add a prefix Options. url = "http://img.mukewang.com/" + options. url });     /////////////////////// // Request distributor transports // /////////////////////// $. AjaxTransport ("image", function (s ){ If (s. type = "GET" & s. async ){ Var image; Return { Send: function (_, callback ){ Image = new Image (); Function done (status ){ If (image ){ Var statusText = (status = 200 )? "Success": "error ", Tmp = image; Image = image. onreadystatechange = image. onerror = image. onload = null; Callback (status, statusText ,{ Image: tmp }); } } Image. onreadystatechange = image. onload = function (){ Done (200 ); }; Image. onerror = function (){ Done (404 ); }; Show (s. url) Image. src = s. url; }, Abort: function (){ If (image ){ Image = image. onreadystatechange = image. onerror = image. onload = null; } } }; } });     $ ("# Test"). click (function (){   // Execute an asynchronous HTTP (Ajax) request. Var ajax = $. ajax ({ Test: true, // test Url: '547d5a45000156f406000338-590-330.jpg ', DataType: 'image ', Type: 'post ', Data :{ Foo: ["bar1", "bar2"] }, // This object is used to set the context of Ajax-related callback Functions Context: document. body, // The callback function before the request is sent to modify jqXHR before the request is sent BeforeSend: function (xhr ){ Xhr. overrideMimeType ("text/plain; charset = x-user-defined "); Show ('partial event beforesend ') }, // Callback function after the request is complete (called after success and error) Complete: function (){ Show ('partial event complete ') }, Error: function (){ Show ('call this function when a local event error request fails ') }, Success: function (){ Show ('local event success ') } })   Ajax. done (function (){ Show ('done ') }). Fail (function (){ Show ('fail ') }). Always (function (){ Show ('alway ') })