අසමමුහුර්ත, අජැක්ස් ඉල්ලීමට වඩා සමමුහුර්ත කිරීමක් කිරීමට jQuery ලබා ගන්නේ කෙසේද?

මා සතුව ජාවාස්ක්‍රිප්ට් විජට් එකක් ඇත, එය සම්මත දිගු ලකුණු සපයයි. ඒවායින් එකක් වන්නේ beforecreateකාර්යයයි. falseඅයිතමයක් නිර්මාණය වීම වැළැක්වීම සඳහා එය නැවත පැමිණිය යුතුය .

මම jQuery භාවිතා කරමින් මෙම ශ්‍රිතයට අජැක්ස් ඇමතුමක් එක් කළෙමි:

beforecreate: function (node, targetNode, type, to) {
  jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),

  function (result) {
    if (result.isOk == false) 
        alert(result.message);
  });
}

නමුත් මගේ විජට් අයිතමය නිර්මාණය කිරීමෙන් වලක්වා ගැනීමට මට අවශ්‍යය, එබැවින් මම ආපසු යා යුත්තේ falseමවගේ ක්‍රියාකාරිත්වයට මිස ඇමතුමට නොවේ. JQuery හෝ වෙනත් බ්‍රව්සර් API භාවිතා කර සමමුහුර්ත AJAX ඉල්ලීමක් කිරීමට ක්‍රමයක් තිබේද?

සිට jQuery ප්රලේඛනය : ඔබ නියම අසමමිතික බව විකල්පය බොරු වූ සම මුහුර්තක Ajax ඉල්ලීම ලබා ගැනීමට. එවිට ඔබේ මවගේ ක්‍රියාකාරිත්වය ඉදිරියට යාමට පෙර ඔබගේ ඇමතුමට දත්ත කිහිපයක් සැකසිය හැකිය.

යෝජිත පරිදි වෙනස් කළහොත් ඔබේ කේතය කෙබඳු වේදැයි මෙන්න:

beforecreate: function (node, targetNode, type, to) {
    jQuery.ajax({
        url: 'http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),
        success: function (result) {
            if (result.isOk == false) alert(result.message);
        },
        async: false
    });
}

ඇමතීමෙන් ඔබට jQuery හි අජැක්ස් සැකසුම සමමුහුර්ත ප්‍රකාරයට දැමිය හැකිය

jQuery.ajaxSetup({async:false});

ඉන්පසු ඔබේ අජැක්ස් ඇමතුම් භාවිතා කරන්න jQuery.get( ... );

ඉන්පසු එය නැවත වරක් සක්‍රිය කරන්න

jQuery.ajaxSetup({async:true});

මම හිතන්නේ එය ඇඩම් විසින් යෝජනා කළ ආකාරයටම ක්‍රියාත්මක වන නමුත් ඔවුන්ගේ jQuery.get()හෝ jQuery.post()වඩාත් සවිස්තරාත්මක jQuery.ajax()වාක්‍ය ඛණ්ඩය නැවත සකස් කිරීමට අවශ්‍ය කෙනෙකුට එය ප්‍රයෝජනවත් විය හැකිය .

විශිෂ්ට විසඳුමක්! මම එය ක්‍රියාවට නැංවීමට උත්සාහ කළ විට සාර්ථක වගන්තියේ වටිනාකමක් ආපසු ලබා දුන්නොත් එය නැවත නිර්වචනය කර නැති බව මම දුටුවෙමි. මට එය විචල්‍යයක ගබඩා කර එම විචල්‍යය නැවත ලබා දීමට සිදු විය. මා ඉදිරිපත් කළ ක්‍රමය මෙයයි:

function getWhatever() {
  // strUrl is whatever URL you need to call
  var strUrl = "", strReturn = "";

  jQuery.ajax({
    url: strUrl,
    success: function(html) {
      strReturn = html;
    },
    async:false
  });

  return strReturn;
}

අසින්ක්: අසත්‍යය සමඟ අජැක්ස් ඇමතුමක් කිරීමෙන් අජැක්ස් ඉල්ලීම සම්පූර්ණ වන තෙක් බ්‍රව්සරය ක්‍රියාත්මක වීමට ඉඩ ඇති බව මෙම සියලු පිළිතුරු මග හැරී ඇත. ප්‍රවාහ පාලන පුස්තකාලයක් භාවිතා කිරීමෙන් බ්‍රව්සරය එල්ලා නොගෙන මෙම ගැටළුව විසඳනු ඇත. Frame.js සමඟ උදාහරණයක් මෙන්න :

beforecreate: function(node,targetNode,type,to) {

    Frame(function(next)){

        jQuery.get('http://example.com/catalog/create/', next);
    });

    Frame(function(next, response)){

        alert(response);
        next();
    });

    Frame.init();
}

function getURL(url){
    return $.ajax({
        type: "GET",
        url: url,
        cache: false,
        async: false
    }).responseText;
}


//example use
var msg=getURL("message.php");
alert(msg);

සටහන: async: falseමෙම අනතුරු ඇඟවීමේ පණිවිඩ නිසා ඔබ භාවිතා නොකළ යුතුය :

Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27) සමඟ ආරම්භ කරමින්, පරිශීලක අත්දැකීමට ඇති අහිතකර බලපෑම් හේතුවෙන් ප්‍රධාන ත්‍රෙඩ් එකේ සමමුහුර්ත ඉල්ලීම් අවලංගු කර ඇත.

ක්‍රෝම් කොන්සෝලය තුළ පවා මේ ගැන අනතුරු අඟවයි:

ප්‍රධාන පරිශීලකයාගේ සමමුහුර්ත XMLHttpRequest අවසන් පරිශීලකයාගේ අත්දැකීමට අහිතකර බලපෑම් නිසා ඉවත් කරනු ලැබේ. වැඩි විස්තර සඳහා, https://xhr.spec.whatwg.org/ පරීක්ෂා කරන්න .

ඕනෑම දිනක වැඩ කිරීම නැවැත්විය හැකි බැවින් ඔබ මේ වගේ දෙයක් කරන්නේ නම් මෙය ඔබගේ පිටුව බිඳ දැමිය හැකිය.

ඔබට එය සමමුහුර්ත යැයි හැඟෙන නමුත් එය අවහිර නොකරන්නේ නම් එය කිරීමට ඔබට අවශ්‍ය නම්, ඔබ අසමමුහුර්ත / බලා සිටීම භාවිතා කළ යුතු අතර නව වැනි පොරොන්දු මත පදනම් වූ සමහර අජැක්ස් ද භාවිතා කළ යුතුය. ෆෙච් ඒපීඅයි

async function foo() {
  var res = await fetch(url)
  console.log(res.ok)
  var json = await res.json()
  console.log(json)
}

සංස්කරණය කරන්නපිටුව ඉවත් කිරීමේදී XHR සමමුහුර්ත කිරීම තහනම් කිරීම සඳහා ක්‍රෝම්පරිශීලකයා විසින් විට හෝ වසා දැමූ විට කිරීමේදී . මෙයට පෙර පැටවීම, බෑම, පිටු හයිඩ් සහ දෘශ්‍යතා හුවමාරුව ඇතුළත් වේ.

මෙය ඔබගේ භාවිත අවස්ථාව නම් ඔබට navigator.sendBeacon දෙස බැලීමට අවශ්‍ය විය හැකිය ඒ වෙනුවට

Http ශීර්ෂයන් හෝ iframe හි අවසර ලක්ෂණය සමඟ සමමුහුර්ත කිරීම අක්‍රීය කිරීමටද පිටුවට හැකිය

ඔබ හරස් ඩොමේන් අජැක්ස් ඇමතුමක් කරන්නේ නම් ( JSONP භාවිතා කිරීමෙන් ) - ඔබට එය සමමුහුර්තව කළ නොහැකි බව මතක තබා ගන්න , asyncධජය jQuery විසින් නොසලකා හරිනු ඇත.

$.ajax({
    url: "testserver.php",
    dataType: 'jsonp', // jsonp
    async: false //IGNORED!!
});

JSONP- ඇමතුම් සඳහා ඔබට භාවිතා කළ හැකිය:

1. ඔබේම වසමට අජැක්ස්-ඇමතුම - සහ හරස් ඩොමේන් ඇමතුම් සේවාදායකය කරන්න
2. අසමමුහුර්තව වැඩ කිරීමට ඔබේ කේතය වෙනස් කරන්න
3. Frame.js වැනි "ශ්‍රිත අනුක්‍රමික" පුස්තකාලයක් භාවිතා කරන්න (මෙම පිළිතුර )
4. ක්‍රියාත්මක කිරීම අවහිර කරනවා වෙනුවට UI අවහිර කරන්න (මෙම පිළිතුර ) (මගේ ප්‍රියතම ක්‍රමය)

සමඟ async: false ඔබ අවහිර බ්රවුසරය ලබා ගන්න. අවහිර නොකරන සමමුහුර්ත විසඳුමක් සඳහා ඔබට පහත සඳහන් දෑ භාවිතා කළ හැකිය:

ES6 / ECMAScript2015

ES6 සමඟ ඔබට ජනක යන්ත්‍රයක් සහ සම පුස්තකාලය භාවිතා කළ හැකිය :

beforecreate: function (node, targetNode, type, to) {
    co(function*(){  
        let result = yield jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
        //Just use the result here
    });
}

ES7

ES7 සමඟ ඔබට asyc wait භාවිතා කළ හැකිය:

beforecreate: function (node, targetNode, type, to) {
    (async function(){
        let result = await jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
        //Just use the result here
    })(); 
}

මම Carcione දුන් පිළිතුර භාවිතා කර JSON භාවිතා කිරීමට එය වෙනස් කළෙමි.

 function getUrlJsonSync(url){

    var jqxhr = $.ajax({
        type: "GET",
        url: url,
        dataType: 'json',
        cache: false,
        async: false
    });

    // 'async' has to be 'false' for this to work
    var response = {valid: jqxhr.statusText,  data: jqxhr.responseJSON};

    return response;
}    

function testGetUrlJsonSync()
{
    var reply = getUrlJsonSync("myurl");

    if (reply.valid == 'OK')
    {
        console.dir(reply.data);
    }
    else
    {
        alert('not valid');
    }    
}

මම එකතු dataType ක 'JSON' හා වෙනස් .responseText කිරීමට responseJSON .

ආපසු ලබා දුන් වස්තුවෙහි තත්ව ටෙක්ස්ට් දේපල භාවිතා කරමින් මම තත්වය ලබා ගතිමි . සටහන, මෙය අජැක්ස් ප්‍රතිචාරයේ තත්වය මිස JSON වලංගු ද යන්න නොවේ.

පසුපස කෙළවරට ප්‍රතිචාරය නිවැරදි (හොඳින් සැකසූ) JSON මගින් ආපසු ලබා දිය යුතුය, එසේ නොමැතිනම් ආපසු ලබා දුන් වස්තුව නිර්වචනය නොකෙරේ.

මුල් ප්‍රශ්නයට පිළිතුරු සැපයීමේදී සලකා බැලිය යුතු කරුණු දෙකක් තිබේ. එකක් නම් අජැක්ස් හට සමකාලීනව ක්‍රියා කරන ලෙසයි ( අසමමුහුර්ත: අසත්‍යය සැකසීමෙනි ) සහ අනෙක ඇමතුම ශ්‍රිතයක් වෙනුවට ඇමතුම් ශ්‍රිතයේ ප්‍රතිලාභ ප්‍රකාශය හරහා ප්‍රතිචාර දැක්වීම ය.

මම එය POST සමඟ අත්හදා බැලූ අතර එය ක්‍රියාත්මක විය.

මම GET POST ලෙස වෙනස් කර දත්ත එකතු කළෙමි: postdata

function postUrlJsonSync(url, postdata){

    var jqxhr = $.ajax({
        type: "POST",
        url: url,
        data: postdata,
        dataType: 'json',
        cache: false,
        async: false
    });

    // 'async' has to be 'false' for this to work
    var response = {valid: jqxhr.statusText,  data: jqxhr.responseJSON};

    return response;
}

ඉහත කේතය පමණක් එහිදී මෙම නඩුවේ ක්රියා කරන සටහන අසමකාලීක වේ බොරු . ඔබ අසමමුහුර්ත ලෙස සකසන්නේ නම් : සත්‍ය ආපසු ලබා දුන් වස්තුව jqxhr වලංගු නොවන්නේ AJAX ඇමතුම ආපසු එන අවස්ථාවේදීය, පසුව අසමමුහුර්ත ඇමතුම අවසන් වූ පසුව පමණි, නමුත් ප්‍රතිචාර විචල්‍යය සැකසීමට එය ප්‍රමාද වැඩිය .

මෙය උදාහරණයකි:

$.ajax({
  url: "test.html",
  async: false
}).done(function(data) {
   // Todo something..
}).fail(function(xhr)  {
   // Todo something..
});

පළමුවෙන්ම අප තේරුම් ගත යුත්තේ අප $ .ජැක්ස් භාවිතා කරන විට සහ $ .get / $

ඉල්ලීම් ශීර්ෂ සැකසුම්, හැඹිලි සැකසුම්, සමමුහුර්ත සැකසුම් වැනි අජැක්ස් ඉල්ලීම මත අපට අඩු මට්ටමේ පාලනයක් අවශ්‍ය වූ විට අපි $ .ajax සඳහා යා යුතුය.

post .get / $. post: අපට අජැක්ස් ඉල්ලීම මත අඩු මට්ටමේ පාලනයක් අවශ්‍ය නොවන විට. සරලවම දත්ත සේවාදායකයට ලබා ගන්න / පළ කරන්න. එය කෙටියෙන් දැක්විය හැකිය

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

එබැවින් අපට features .get / $. පෝස්ට් සමඟ වෙනත් විශේෂාංග (සමමුහුර්තකරණය, හැඹිලි ආදිය) භාවිතා කළ නොහැක.

එබැවින් අජැක්ස් ඉල්ලීම මත පහත් මට්ටමේ පාලනය සඳහා (සමමුහුර්ත කිරීම, හැඹිලි ආදිය) අපි $ .ajax සඳහා යා යුතුය

 $.ajax({
     type: 'GET',
      url: url,
      data: data,
      success: success,
      dataType: dataType,
      async:false
    });

jQuery සමඟ ASYNC ඉල්ලීම් සඳහා මෙය මගේ සරල ක්‍රියාත්මක කිරීමකි. මෙය ඕනෑම කෙනෙකුට උපකාර කරනු ඇතැයි මම බලාපොරොත්තු වෙමි.

var queueUrlsForRemove = [
    'http://dev-myurl.com/image/1', 
    'http://dev-myurl.com/image/2',
    'http://dev-myurl.com/image/3',
];

var queueImagesDelete = function(){

    deleteImage( queueUrlsForRemove.splice(0,1), function(){
        if (queueUrlsForRemove.length > 0) {
            queueImagesDelete();
        }
    });

}

var deleteImage = function(url, callback) {
    $.ajax({
        url: url,
        method: 'DELETE'
    }).done(function(response){
        typeof(callback) == 'function' ? callback(response) : null;
    });
}

queueImagesDelete();

නිසා XMLHttpReponseසමමුහුර්ත කියාකාරීත්වය ප්රතික්ෂේප කරයි මම ආධාරක බව පහත සඳහන් විසඳුමක් සමග පැමිණි XMLHttpRequest. මෙය ඇණවුම් කරන ලද AJAX විමසීම් වලට ඉඩ දෙන අතර ස්වභාවධර්මයේ අසමමුහුර්තව සිටින අතර එය තනි භාවිතය සඳහා CSRF ටෝකන සඳහා ඉතා ප්‍රයෝජනවත් වේ.

එය ද විනිවිද පෙනෙන බැවින් jQuery වැනි පුස්තකාල බාධාවකින් තොරව ක්‍රියාත්මක වේ.

/* wrap XMLHttpRequest for synchronous operation */
var XHRQueue = [];
var _XMLHttpRequest = XMLHttpRequest;
XMLHttpRequest = function()
{
  var xhr   = new _XMLHttpRequest();
  var _send = xhr.send;

  xhr.send = function()
  {
    /* queue the request, and if it's the first, process it */
    XHRQueue.push([this, arguments]);
    if (XHRQueue.length == 1)
      this.processQueue();
  };

  xhr.processQueue = function()
  {
    var call = XHRQueue[0];
    var xhr  = call[0];
    var args = call[1];

    /* you could also set a CSRF token header here */

    /* send the request */
    _send.apply(xhr, args);
  };

  xhr.addEventListener('load', function(e)
  {
    /* you could also retrieve a CSRF token header here */

    /* remove the completed request and if there is more, trigger the next */
    XHRQueue.shift();
    if (XHRQueue.length)
      this.processQueue();
  });

  return xhr;
};

මුල් ප්රශ්නය ගැන නිසා jQuery.get, එය (සඳහන් කළ පරිදි ඒ මෙතන සඳහන් කරනු වටී මෙතන ) එක් විය හැකි භාවිතා async: falseදී $.get()නමුත් ඉතා මැනවින් වළක්වා අසමමිතික සිට එය XMLHTTPRequestප්රතික්ෂේප කරයි (සහ බ්රව්සරය අනතුරු ඇඟවීමක් දිය හැක):

$.get({
  url: url,// mandatory
  data: data,
  success: success,
  dataType: dataType,
  async:false // to make it synchronous
});

asyn:falseඑය සමමුහුර්ත කිරීමට අජැක්ස් ඉල්ලීම සකසන්න .

කේත නියැදිය මෙන්න:

 $.ajax({
    url: 'some_url',
    type: "GET",
    async: false,
    cache: false,
    dataType: "JSON",
    data: { 
      "p1": v1, 
      "p2": v2
    },
    success: function(result) {
    }  
  }
});

මෙමඟින් තිරය ප්‍රතිචාර නොදක්වයි.