അജാക്സുമായി പ്രവർത്തിക്കുന്നതിനുള്ള jQuery-യുടെ നേരിട്ടുള്ള രീതികളെക്കുറിച്ച് ഞങ്ങൾ പഠിച്ചു (ഉദാഹരണത്തിന്, get(), post(), load()). ഈ ലേഖനം താഴ്ന്ന നിലയിലുള്ള jQuery Ajax API വിവരിക്കുന്നു.

ലോ-ലെവൽ എന്ന പദം നിങ്ങൾ ആക്‌സസ് ചെയ്യുകയാണെന്ന് സൂചിപ്പിക്കുന്നു മറഞ്ഞിരിക്കുന്ന സാധ്യതകൾഅന്വേഷണ സംവിധാനം, പക്ഷേ ഇത് പൂർണ്ണമായും ശരിയല്ല. ഇവിടെ വിവരിച്ചിരിക്കുന്ന രീതികൾ നേരത്തെ ചർച്ച ചെയ്തവയുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ സൗകര്യപ്രദമല്ല, പക്ഷേ ചെറിയ ചിലവിൽ അധിക പരിശ്രമംനിങ്ങളുടെ ആവശ്യങ്ങളുമായി കൃത്യമായി പൊരുത്തപ്പെടുന്ന തരത്തിൽ അന്വേഷണം കോൺഫിഗർ ചെയ്യാവുന്നതാണ്, നേരിട്ടുള്ള അല്ലെങ്കിൽ സഹായ രീതികൾ ഉപയോഗിച്ച് ഇത് എല്ലായ്പ്പോഴും സാധ്യമല്ല.

ലളിതമായ അജാക്സ് അഭ്യർത്ഥനകൾ

നേരിട്ടുള്ള അല്ലെങ്കിൽ സഹായ രീതികൾ ഉപയോഗിക്കുന്നതിനേക്കാൾ താഴ്ന്ന നിലയിലുള്ള API ഉപയോഗിച്ച് ചോദ്യങ്ങൾ സൃഷ്ടിക്കുന്നത് വളരെ ബുദ്ധിമുട്ടുള്ള കാര്യമല്ല. അഭ്യർത്ഥനയുടെ മറ്റ് പല വശങ്ങളും നിയന്ത്രിക്കാനും അഭ്യർത്ഥന നടപ്പിലാക്കുന്നതിനെക്കുറിച്ചുള്ള കൂടുതൽ വിവരങ്ങൾ നേടാനും ഈ സമീപനം നിങ്ങളെ അനുവദിക്കുന്നു എന്നതാണ് വ്യത്യാസം. ലോ-ലെവൽ API-യുടെ കേന്ദ്രമാണ് അജാക്സ്() രീതി, അതിന്റെ ഉപയോഗത്തിന്റെ ഒരു ലളിതമായ ഉദാഹരണം ചുവടെ നൽകിയിരിക്കുന്നു (ഇവിടെ ഉപയോഗിക്കുന്നത് യഥാർത്ഥ ഫയൽമുമ്പത്തെ ലേഖനത്തിൽ വിവരിച്ച mydata.json ഫയലും):

$(function() ($.ajax("mydata.json", (വിജയം: ഫംഗ്‌ഷൻ(ഡാറ്റ)) (var ടെംപ്ലേറ്റ് = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo ("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ) );));

അജാക്സ്() രീതിയിലേക്കുള്ള ആർഗ്യുമെന്റുകൾ അഭ്യർത്ഥിച്ച URL ഉം ഒരു ഡാറ്റ ഡിസ്പ്ലേ ഒബ്ജക്റ്റും ആണ്, അതിന്റെ പ്രോപ്പർട്ടികൾ ഒരു കൂട്ടം കീ-വാല്യൂ ജോഡികളെ നിർവചിക്കുന്നു, അവയിൽ ഓരോന്നും ഒരു അഭ്യർത്ഥന പാരാമീറ്റർ നിർവചിക്കുന്നു. ഇവിടെ, ajax() രീതിയിലേക്ക് കൈമാറിയ ഒബ്‌ജക്‌റ്റിൽ ഒരു പാരാമീറ്റർ മാത്രമേ അടങ്ങിയിട്ടുള്ളൂ, വിജയം, അത് അഭ്യർത്ഥന വിജയകരമാണെങ്കിൽ വിളിക്കപ്പെടുന്ന ഫംഗ്‌ഷൻ വ്യക്തമാക്കുന്നു.

IN ഈ ഉദാഹരണത്തിൽഞങ്ങൾ സെർവറിൽ നിന്ന് mydata.json ഫയൽ അഭ്യർത്ഥിക്കുകയും ഡാറ്റ ടെംപ്ലേറ്റിനൊപ്പം ഘടകങ്ങൾ സൃഷ്ടിക്കാനും അവ പ്രമാണത്തിലേക്ക് തിരുകാനും ഉപയോഗിക്കുന്നു, മുമ്പത്തെ ലേഖനത്തിൽ നേരിട്ടുള്ള രീതികൾ ഉപയോഗിച്ചത് പോലെ. സ്ഥിരസ്ഥിതിയായി, ajax() രീതി ഒരു HTTP GET അഭ്യർത്ഥന സൃഷ്ടിക്കുന്നു, അതായത്. ഈ ഉദാഹരണം get() and getJSON() രീതികൾ ഉപയോഗിക്കുന്നതിന് തുല്യമാണ്.

jqXHR വസ്തു

ajax() രീതി ഒരു jqXHR ഒബ്‌ജക്റ്റ് നൽകുന്നു, അത് ലഭിക്കാൻ ഉപയോഗിക്കാം പൂർണമായ വിവരംഅഭ്യർത്ഥനയെ കുറിച്ചും നിങ്ങൾക്ക് ആരുമായി ആശയവിനിമയം നടത്താമെന്നും. jqXHR ഒബ്‌ജക്റ്റ്, XMLHttpRequest ഒബ്‌ജക്‌റ്റിന് ചുറ്റുമുള്ള ഒരു റാപ്പറാണ്, അത് ബ്രൗസർ അജാക്‌സ് പിന്തുണയുടെ അടിത്തറയാണ്.

മിക്ക അജാക്സ് പ്രവർത്തനങ്ങൾക്കും, jqXHR ഒബ്ജക്റ്റ് അവഗണിക്കാം, അതാണ് ഞാൻ ശുപാർശ ചെയ്യുന്നത്. സെർവറിന്റെ പ്രതികരണത്തെക്കുറിച്ച് മറ്റ് മാർഗങ്ങളിലൂടെ ലഭിക്കുന്നതിനേക്കാൾ കൂടുതൽ പൂർണ്ണമായ വിവരങ്ങൾ ലഭിക്കേണ്ട സന്ദർഭങ്ങളിൽ ഈ ഒബ്ജക്റ്റ് ഉപയോഗിക്കുന്നു. ഒരു അജാക്സ് അഭ്യർത്ഥനയുടെ പാരാമീറ്ററുകൾ കോൺഫിഗർ ചെയ്യുന്നതിനും ഇത് ഉപയോഗിക്കാവുന്നതാണ്, എന്നാൽ ajax() രീതിക്ക് ലഭ്യമായ ക്രമീകരണങ്ങൾ ഉപയോഗിച്ച് ഇത് ചെയ്യാൻ എളുപ്പമാണ്. jqXHR ഒബ്‌ജക്റ്റിന്റെ ഗുണങ്ങളും രീതികളും ചുവടെയുള്ള പട്ടികയിൽ വിവരിച്ചിരിക്കുന്നു:

jqXHR ഒബ്ജക്റ്റിന്റെ ഗുണങ്ങളും രീതികളും പ്രോപ്പർട്ടി/രീതി വിവരണം

റെഡിസ്റ്റേറ്റ്	0 (അഭ്യർത്ഥന അയച്ചിട്ടില്ല) മുതൽ 4 (അഭ്യർത്ഥന പൂർത്തിയായി) വരെയുള്ള അഭ്യർത്ഥനയുടെ ജീവിതചക്രത്തിലുടനീളം പുരോഗതിയുടെ ഒരു സൂചകം നൽകുന്നു
പദവി	സെർവർ അയച്ച HTTP സ്റ്റാറ്റസ് കോഡ് നൽകുന്നു
സ്റ്റാറ്റസ് ടെക്സ്റ്റ്	സ്റ്റാറ്റസ് കോഡിന്റെ ഒരു വാചക വിവരണം നൽകുന്നു
പ്രതികരണംXML	പ്രതികരണം XML ആയി നൽകുന്നു (ഇത് ഒരു XML പ്രമാണമാണെങ്കിൽ)
പ്രതികരണ വാചകം	പ്രതികരണം ഒരു സ്ട്രിംഗ് ആയി നൽകുന്നു
setRequest(പേര്, മൂല്യം)	അഭ്യർത്ഥന തലക്കെട്ട് നൽകുന്നു (തലക്കെട്ട് പാരാമീറ്റർ ഉപയോഗിച്ച് ഇത് എളുപ്പമാക്കാം)
getAllResponseHeaders()	പ്രതികരണത്തിൽ അടങ്ങിയിരിക്കുന്ന എല്ലാ തലക്കെട്ടുകളും ഒരു സ്ട്രിംഗ് ആയി നൽകുന്നു
getResponseHeaders(പേര്)	നിർദ്ദിഷ്‌ട പ്രതികരണ തലക്കെട്ടിന്റെ മൂല്യം നൽകുന്നു
ഉപേക്ഷിക്കുക()	അഭ്യർത്ഥന നിർത്തലാക്കുന്നു

jqXHR ഒബ്‌ജക്റ്റ് കോഡിൽ പലയിടത്തും ദൃശ്യമാകുന്നു. ചുവടെയുള്ള ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ, ajax() രീതി നൽകിയ ഫലം സംരക്ഷിക്കാൻ ഇത് ആദ്യം ഉപയോഗിക്കുന്നു:

$(function() ( var jqxhr = $.ajax("mydata.json", (വിജയം: ഫംഗ്ഷൻ(ഡാറ്റ) (var ടെംപ്ലേറ്റ് = $("#flowerTmpl"); template.tmpl(data.slice(0, 3) ).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ) ); var timerID = setInterval(function() ( console.log("Status: " + jqxhr.status + "" + jqxhr.statusText); എങ്കിൽ (jqxhr.readyState == 4) (console.log("അഭ്യർത്ഥന പൂർത്തിയായി: " + jqxhr.responseText); clearInterval(timerID); ) ), 100); ));

ഈ ഉദാഹരണത്തിൽ, ഞങ്ങൾ ajax() രീതി നൽകിയ ഫലം സംഭരിക്കുകയും ഓരോ 100ms അഭ്യർത്ഥന വിവരങ്ങൾ ഔട്ട്‌പുട്ട് ചെയ്യുന്നതിന് setInterval() രീതി ഉപയോഗിക്കുകയും ചെയ്യുന്നു. ajax() രീതി നൽകുന്ന ഫലം ഉപയോഗിക്കുന്നത് അഭ്യർത്ഥന അസമന്വിതമായി നടപ്പിലാക്കുന്നു എന്ന വസ്തുതയെ മാറ്റില്ല, അതിനാൽ jqXHR ഒബ്‌ജക്റ്റുമായി പ്രവർത്തിക്കുമ്പോൾ മുൻകരുതലുകൾ എടുക്കേണ്ടതാണ്. അഭ്യർത്ഥനയുടെ നില പരിശോധിക്കാൻ, ഞങ്ങൾ റെഡിസ്റ്റേറ്റ് പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു (4 ന്റെ മൂല്യം അഭ്യർത്ഥന പൂർത്തിയാക്കുന്നതിന് തുല്യമാണ്) കൂടാതെ കൺസോളിലേക്ക് സെർവർ പ്രതികരണം പ്രദർശിപ്പിക്കുന്നു.

ഈ സാഹചര്യത്തിൽ, കൺസോൾ ഔട്ട്പുട്ട് ഇതുപോലെ കാണപ്പെടുന്നു (ഇത് നിങ്ങളുടെ ബ്രൗസറിൽ അല്പം വ്യത്യസ്തമായി കാണപ്പെടാം):

ഞാൻ അപൂർവ സന്ദർഭങ്ങളിൽ മാത്രമേ jqXHR ഒബ്‌ജക്‌റ്റ് ഉപയോഗിക്കുന്നുള്ളൂ, അജാക്‌സ്() രീതി നൽകുന്ന ഫലമാണെങ്കിൽ അത് ചെയ്യില്ല. ajax() രീതിയിലേക്ക് വിളിക്കുമ്പോൾ jQuery ഒരു അജാക്സ് അഭ്യർത്ഥന സ്വയമേവ ഫയർ ചെയ്യുന്നു, അതിനാൽ അഭ്യർത്ഥന പാരാമീറ്ററുകൾ ഇഷ്ടാനുസൃതമാക്കാനുള്ള കഴിവ് വളരെ ഉപയോഗപ്രദമാണെന്ന് ഞാൻ കണ്ടെത്തിയില്ല. എനിക്ക് jqXHR ഒബ്‌ജക്‌റ്റുമായി പ്രവർത്തിക്കണമെങ്കിൽ (സാധാരണയായി സെർവർ പ്രതികരണത്തെക്കുറിച്ചുള്ള കൂടുതൽ വിവരങ്ങൾ ലഭിക്കുന്നതിന്), ഞാൻ സാധാരണയായി ഇത് ഇവന്റ് ഹാൻഡ്‌ലർ പാരാമീറ്ററുകളിലൂടെയാണ് ചെയ്യുന്നത്, അത് ഞങ്ങൾ അടുത്തതായി സംസാരിക്കും. അഭ്യർത്ഥനയുടെ നിലയെക്കുറിച്ചുള്ള വിവരങ്ങൾ അവർ എനിക്ക് നൽകുന്നു, അത് കണ്ടെത്തേണ്ടതിന്റെ ആവശ്യകത ഇല്ലാതാക്കുന്നു.

അഭ്യർത്ഥന URL സജ്ജീകരിക്കുന്നു

ലഭ്യമായ ഏറ്റവും പ്രധാനപ്പെട്ട ഓപ്ഷനുകളിലൊന്നാണ് url പാരാമീറ്റർ, അഭ്യർത്ഥനയ്ക്കായി ഒരു URL വ്യക്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ചുവടെയുള്ള ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ, ajax() രീതിയിലേക്കുള്ള ഒരു ആർഗ്യുമെന്റായി ഒരു URL കൈമാറുന്നതിന് പകരമായി നിങ്ങൾക്ക് ഈ ഓപ്ഷൻ ഉപയോഗിക്കാം:

$(function() ($.ajax(( url: "mydata.json", വിജയം: ഫംഗ്‌ഷൻ(ഡാറ്റ) (var ടെംപ്ലേറ്റ് = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ) );));

ഒരു POST അഭ്യർത്ഥന സൃഷ്ടിക്കുന്നു

എക്സിക്യൂട്ട് ചെയ്യേണ്ട ആവശ്യമായ തരം അന്വേഷണങ്ങൾ വ്യക്തമാക്കാൻ, ഉപയോഗിക്കുക തരം പരാമീറ്റർ. സ്ഥിരസ്ഥിതിയായി, മുമ്പത്തെ ഉദാഹരണത്തിലെന്നപോലെ, GET അഭ്യർത്ഥനകൾ നടത്തുന്നു. ഒരു POST അഭ്യർത്ഥന സൃഷ്ടിക്കുന്നതിനും സെർവറിലേക്ക് ഫോം ഡാറ്റ സമർപ്പിക്കുന്നതിനും ajax() രീതി ഉപയോഗിക്കുന്നതിന്റെ ഒരു ഉദാഹരണം ചുവടെ നൽകിയിരിക്കുന്നു:

$(function() ($.ajax(( url: "mydata.json", വിജയം: ഫംഗ്‌ഷൻ(ഡാറ്റ) (var ടെംപ്ലേറ്റ് = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ) )); // "ഓർഡർ" ബട്ടണിലെ ഹാൻഡ്‌ലറിൽ ക്ലിക്ക് ചെയ്യുക $("ബട്ടൺ"). ക്ലിക്ക് (function(e) ($.ajax(( url: "phphandler.php", ടൈപ്പ്: "പോസ്റ്റ്", ഡാറ്റ: $("ഫോം").serialize(), വിജയം: processServerResponse, dataType: "json" )) ; e.preventDefault() );ഫംഗ്ഷൻ processServerResponse(data) ( // തുടക്കത്തിൽ എല്ലാ ഉൽപ്പന്നങ്ങളും മറയ്ക്കുക var inputElems = $("div.dcell").hide(); (ഡാറ്റയിലെ var prop) ( // അവ മാത്രം പ്രദർശിപ്പിക്കുക ഉൽപ്പന്നങ്ങൾ , അതിന്റെ ക്രമം 0 // (സെർവറിൽ നിന്നുള്ള പ്രതികരണത്തിൽ അത്തരം ഉൽപ്പന്നങ്ങൾ മാത്രമേ അടങ്ങിയിട്ടുള്ളൂ) var ഫിൽറ്റർ ചെയ്ത = inputElems.has("ഇൻപുട്ട്") .appendTo("#row1").show(); ) // മറയ്ക്കുക അടിസ്ഥാന ഘടകങ്ങൾഫോമുകൾ $("#buttonDiv, #totalDiv").remove(); // ടെംപ്ലേറ്റിൽ നിന്ന് പുതിയ ഘടകങ്ങൾ പ്രദർശിപ്പിക്കുക totalTmpl $("#totalTmpl").tmpl(data).appendTo("body"); ))); ആകെ ഓർഡറുകൾ: $(ആകെ) ഓർഡർ .png"/> $(പേര്):

ഈ ഉദാഹരണം ഞാൻ ഇവിടെ വിശദമായി വിവരിക്കുന്നില്ല, കാരണം... മുമ്പത്തെ ലേഖനത്തിൽ ഞങ്ങൾ ഇത് വിശദമായി പരിശോധിച്ചു (പോസ്റ്റ്() രീതി ഉപയോഗിച്ച് മാത്രം). ഇവിടെ, ടൈപ്പിന് പുറമേ, ഞങ്ങൾ നിരവധി പാരാമീറ്ററുകൾ കൂടി ഉപയോഗിച്ചുവെന്ന് ഞാൻ ശ്രദ്ധിക്കും. POST അഭ്യർത്ഥനയുടെ ലക്ഷ്യം വ്യക്തമാക്കുന്നതിന്, മുമ്പ് വിവരിച്ച url പാരാമീറ്റർ ഉപയോഗിക്കുന്നു. അയയ്‌ക്കേണ്ട ഡാറ്റ ഡാറ്റ പാരാമീറ്റർ ഉപയോഗിച്ചാണ് വ്യക്തമാക്കിയിരിക്കുന്നത്, അതിന്റെ മൂല്യം മുൻ ലേഖനത്തിൽ വിവരിച്ച സീരിയലൈസ് () രീതി ഉപയോഗിച്ച് സജ്ജീകരിച്ചിരിക്കുന്നു. സെർവറിൽ നിന്ന് ലഭിച്ച ഡാറ്റയുടെ തരം ഡാറ്റ ടൈപ്പ് പാരാമീറ്ററിൽ വ്യക്തമാക്കിയിട്ടുണ്ട്.

അജാക്സ് ഇവന്റുകൾക്കൊപ്പം പ്രവർത്തിക്കുന്നു

ഒരു അജാക്സ് അഭ്യർത്ഥനയുടെ ജീവിതചക്രത്തിലുടനീളം ഫയർ ചെയ്യാൻ കഴിയുന്ന ഇവന്റുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ഫംഗ്ഷനുകൾ വ്യക്തമാക്കാൻ നിരവധി പാരാമീറ്ററുകൾ നിങ്ങളെ അനുവദിക്കുന്നു. അജാക്സ് അഭ്യർത്ഥനകളിൽ വളരെ പ്രധാനപ്പെട്ട പങ്ക് വഹിക്കുന്ന കോൾബാക്ക് ഫംഗ്ഷനുകൾ നിങ്ങൾ വ്യക്തമാക്കുന്നത് ഇങ്ങനെയാണ്. മുമ്പത്തെ ഉദാഹരണത്തിലെ വിജയ പാരാമീറ്റർ പരിഗണിക്കുമ്പോൾ അവയിലൊന്ന് നിങ്ങൾക്ക് ഇതിനകം പരിചിതമായിക്കഴിഞ്ഞു. ഇവന്റുകളുമായി ബന്ധപ്പെട്ട പാരാമീറ്ററുകളുടെ പട്ടിക, അവയുടെ സംക്ഷിപ്ത വിവരണങ്ങൾ, ചുവടെയുള്ള പട്ടികയിൽ കാണിച്ചിരിക്കുന്നു:

വിജയകരമായ അഭ്യർത്ഥനകൾ കൈകാര്യം ചെയ്യുന്നു

മുകളിലുള്ള ഉദാഹരണങ്ങളിൽ, വിജയ പാരാമീറ്റർ ഉപയോഗിക്കുമ്പോൾ, ഫംഗ്ഷൻ കോളിൽ നിന്ന് രണ്ട് ആർഗ്യുമെന്റുകൾ ഒഴിവാക്കി - അഭ്യർത്ഥനയുടെ ഫലവും ഒരു jqXHR ഒബ്ജക്റ്റും വിവരിക്കുന്ന ഒരു സന്ദേശവും. ഈ ആർഗ്യുമെന്റുകൾ എടുക്കുന്ന ഒരു ഫംഗ്ഷൻ ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം ചുവടെയുണ്ട്:

$(function() ( $.ajax(( url: "mydata.json", success: function(data, നില, jqxhr) ( console.log("Status: " + status); console.log("jqXHR സ്റ്റാറ്റസ്: " + jqxhr.status + "" + jqxhr.statusText); console.log(jqxhr.getAllResponseHeaders()); var ടെംപ്ലേറ്റ് = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ))); ));

അഭ്യർത്ഥനയുടെ ഫലം വിവരിക്കുന്ന ഒരു സ്ട്രിംഗ് ആണ് സ്റ്റാറ്റസ് ആർഗ്യുമെന്റ്. വിജയ പാരാമീറ്റർ ഉപയോഗിച്ച് ഞങ്ങൾ വ്യക്തമാക്കുന്ന കോൾബാക്ക് ഫംഗ്ഷൻ വിജയകരമായ അഭ്യർത്ഥനകൾക്കായി മാത്രമേ നടപ്പിലാക്കുകയുള്ളൂ, അതിനാൽ ഈ ആർഗ്യുമെന്റിന്റെ മൂല്യം സാധാരണയായി വിജയിക്കും. നിങ്ങൾ ifModified പരാമീറ്റർ ഉപയോഗിക്കുമ്പോൾ, അടുത്തതായി വിവരിച്ചിരിക്കുന്നതാണ് ഒഴിവാക്കൽ.

എല്ലാ അജാക്സ് ഇവന്റുകളുടെയും കോൾബാക്ക് ഫംഗ്‌ഷനുകൾ ഒരേ പാറ്റേൺ പിന്തുടരുന്നു, എന്നാൽ ഈ വാദം മറ്റ് നിരവധി ഇവന്റുകൾക്ക് ഏറ്റവും ഉപയോഗപ്രദമാണ്.

അവസാന വാദം jqXHR ഒബ്ജക്റ്റ് ആണ്. ഈ ഒബ്‌ജക്‌റ്റ് ഉപയോഗിച്ച് പ്രവർത്തിക്കാൻ തുടങ്ങുന്നതിനുമുമ്പ് അഭ്യർത്ഥനയുടെ നില നിങ്ങൾ കണ്ടെത്തേണ്ടതില്ല, കാരണം അഭ്യർത്ഥന വിജയിക്കുമ്പോൾ മാത്രമേ ഫംഗ്‌ഷൻ എക്‌സിക്യൂട്ട് ചെയ്യപ്പെടുകയുള്ളൂ എന്ന് നിങ്ങൾക്കറിയാം. അഭ്യർത്ഥനയുടെ അവസ്ഥയെക്കുറിച്ചും പ്രതികരണത്തിൽ സെർവർ ഉൾപ്പെടുത്തിയിരിക്കുന്ന തലക്കെട്ടുകളെക്കുറിച്ചും വിവരങ്ങൾ നേടുന്നതിനും ഈ വിവരങ്ങൾ കൺസോളിലേക്ക് പ്രിന്റ് ചെയ്യുന്നതിനും ഈ ഉദാഹരണം jqXHR ഒബ്‌ജക്റ്റ് ഉപയോഗിക്കുന്നു.

IN ഈ സാഹചര്യത്തിൽഫലം ഇതുപോലെ കാണപ്പെടുന്നു (നിങ്ങൾ ഏത് സെർവറാണ് ഉപയോഗിക്കുന്നത് എന്നതിനെ ആശ്രയിച്ച്, നിങ്ങൾക്ക് വ്യത്യസ്ത തലക്കെട്ടുകൾ ഉണ്ടായിരിക്കാം):

പ്രോസസ്സ് ചെയ്യുന്നതിൽ പിശക്

അഭ്യർത്ഥന പരാജയപ്പെടുമ്പോൾ വിളിക്കേണ്ട ഒരു ഫംഗ്ഷൻ വ്യക്തമാക്കുന്നതിന് പിശക് പരാമീറ്റർ ഉപയോഗിക്കുന്നു. അനുബന്ധ ഉദാഹരണം ചുവടെ നൽകിയിരിക്കുന്നു:

പിശക് (നിറം: ചുവപ്പ്; ബോർഡർ: ഇടത്തരം കടും ചുവപ്പ്; പാഡിംഗ്: 4px; മാർജിൻ: സ്വയമേവ; വീതി: 200px; ടെക്സ്റ്റ്-അലൈൻ: മധ്യഭാഗം)

$(function() ($.ajax(( url: "NoSuchFile.json", വിജയം: ഫംഗ്‌ഷൻ(ഡാറ്റ) (var ടെംപ്ലേറ്റ് = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ), പിശക്: പ്രവർത്തനം(jqxhr, status, errorMsg) ( $("") .text( "സ്റ്റാറ്റസ്: " + സ്റ്റാറ്റസ് + " പിശക്: " + errorMsg) .insertAfter("h1"); ) );));

ഇവിടെ, NoSuchFile.json ഫയൽ അഭ്യർത്ഥിച്ചു, അത് സെർവറിൽ ഇല്ല, അതിനാൽ അഭ്യർത്ഥന പൂർത്തിയാക്കാൻ കഴിയില്ല, അതിന്റെ ഫലമായി പിശക് പാരാമീറ്റർ ഉപയോഗിച്ച് വ്യക്തമാക്കിയ ഫംഗ്ഷൻ വിളിക്കപ്പെടും. ഈ ഫംഗ്‌ഷന്റെ ആർഗ്യുമെന്റുകൾ jqXHR ഒബ്‌ജക്റ്റ്, പിശക് സ്റ്റാറ്റസ് സന്ദേശം, സെർവർ പ്രതികരണത്തിൽ ലഭിച്ച പിശക് സന്ദേശം എന്നിവയാണ്. ഈ ഫംഗ്‌ഷനുള്ളിൽ, ഇത് ഡോക്യുമെന്റിലേക്ക് ചേർക്കുന്നു div ഘടകം, ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ സ്റ്റാറ്റസിന്റെയും എറർഎംഎസ്ജി ആർഗ്യുമെന്റുകളുടെയും മൂല്യങ്ങൾ പ്രദർശിപ്പിക്കുന്നു:

അഭ്യർത്ഥന പരാമീറ്ററുകൾ അയയ്‌ക്കുന്നതിന് മുമ്പ് കോൺഫിഗർ ചെയ്യുന്നു

അഭ്യർത്ഥനകൾ അയയ്‌ക്കുന്നതിന് മുമ്പ് വിളിക്കപ്പെടുന്ന ഒരു ഫംഗ്‌ഷൻ വ്യക്തമാക്കാൻ ബിഫോർസെൻഡ് പാരാമീറ്റർ നിങ്ങളെ അനുവദിക്കുന്നു. അജാക്സ്() രീതിയിലേക്ക് പാസാക്കിയ പാരാമീറ്ററുകൾ ചേർത്തോ മാറ്റിസ്ഥാപിച്ചോ അവസാന നിമിഷത്തിൽ അഭ്യർത്ഥന കോൺഫിഗർ ചെയ്യാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു (ഒന്നിലധികം അഭ്യർത്ഥനകൾ ആവശ്യമായ പാരാമീറ്റർ മൂല്യങ്ങൾ അടങ്ങിയ ഒരേ ഒബ്ജക്റ്റ് ഉപയോഗിക്കുന്നുണ്ടെങ്കിൽ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാകും). ഈ സമീപനം ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം ചുവടെ അവതരിപ്പിച്ചിരിക്കുന്നു:

$(function() ($.ajax((വിജയം: പ്രവർത്തനം(ഡാറ്റ)) (var ടെംപ്ലേറ്റ് = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1") ; template.tmpl(data.slice(3)).appendTo("#row2"); ), പിശക്: പ്രവർത്തനം(jqxhr, status, errorMsg) ( $("") .text("Status: " + status + " പിശക്: " + errorMsg) .insertAfter("h1"); ), അയയ്‌ക്കുന്നതിന് മുമ്പ്: ഫംഗ്‌ഷൻ(jqxhr, ക്രമീകരണങ്ങൾ) ( settings.url = "mydata.json"; ) );));

വാദങ്ങൾ നിർദ്ദിഷ്ട പ്രവർത്തനംഒരു jqXHR ഒബ്‌ജക്‌റ്റ് (അഭ്യർത്ഥന തലക്കെട്ടുകൾ ഇഷ്‌ടാനുസൃതമാക്കുന്നതിനോ അയയ്‌ക്കുന്നതിന് മുമ്പ് ഒരു അഭ്യർത്ഥന റദ്ദാക്കുന്നതിനോ ഇത് ഉപയോഗപ്രദമാകും) കൂടാതെ ajax() രീതിയിലേക്ക് കൈമാറിയ പാരാമീറ്ററുകൾ അടങ്ങിയ ഒബ്‌ജക്‌റ്റും. ഈ ഉദാഹരണത്തിൽ, അജാക്സ് അഭ്യർത്ഥനയ്ക്കുള്ള URL, beforeSend പാരാമീറ്റർ ഉപയോഗിച്ച് സജ്ജീകരിച്ചിരിക്കുന്നു.

ഒന്നിലധികം ഇവന്റ് ഹാൻഡ്‌ലറുകൾ സജ്ജീകരിക്കുന്നു

മുമ്പത്തെ ഉദാഹരണങ്ങളിൽ, അജാക്സ് അഭ്യർത്ഥനകളുമായി ബന്ധപ്പെട്ട ഇവന്റുകൾ ഒരു ഫംഗ്ഷൻ വിളിച്ച് ഞങ്ങൾ പ്രതികരിച്ചു, എന്നാൽ വിജയം, പിശക്, പൂർണ്ണം, അയയ്‌ക്കുന്നതിന് മുമ്പുള്ള പരാമീറ്ററുകൾ എന്നിവയിൽ നിങ്ങൾക്ക് ഫംഗ്‌ഷനുകളുടെ ഒരു ശ്രേണി വ്യക്തമാക്കാൻ കഴിയും, അവ ഓരോന്നും അനുബന്ധമായിരിക്കുമ്പോൾ എക്‌സിക്യൂട്ട് ചെയ്യപ്പെടും. സംഭവം ട്രിഗർ ചെയ്തു. ഇതിന്റെ ഒരു ലളിതമായ ഉദാഹരണം ചുവടെ നൽകിയിരിക്കുന്നു:

$(function() ($.ajax((വിജയം:, മുമ്പ് അയയ്‌ക്കുക: ഫംഗ്‌ഷൻ(jqxhr, ക്രമീകരണങ്ങൾ)) ( settings.url = "mydata.json"; ) )); ഫംഗ്‌ഷൻ പ്രോസസ്ഡാറ്റ(ഡാറ്റ, സ്റ്റാറ്റസ്, jqxhr) (var ടെംപ്ലേറ്റ് = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ) ഫംഗ്ഷൻ റിപ്പോർട്ട് സ്റ്റാറ്റസ്(ഡാറ്റ, സ്റ്റാറ്റസ്, jqxhr) ( console.log("സ്റ്റാറ്റസ്: " + സ്റ്റാറ്റസ് + " ഫല കോഡ്: " + jqxhr.status); ) );

ഈ ഉദാഹരണത്തിൽ, രണ്ട് ഫംഗ്ഷനുകൾ അടങ്ങുന്ന ഒരു അറേയിലേക്ക് സക്സസ് പാരാമീറ്റർ സജ്ജീകരിച്ചിരിക്കുന്നു, അതിലൊന്ന് പ്രമാണത്തിലേക്ക് ഘടകങ്ങൾ ചേർക്കുന്നതിന് ഡാറ്റ ഉപയോഗിക്കുന്നു, രണ്ടാമത്തേത് കൺസോളിലേക്ക് വിവരങ്ങൾ പ്രിന്റ് ചെയ്യുന്നു.

ഇവന്റുകളുടെ സന്ദർഭം സജ്ജീകരിക്കുന്നു

ഇവന്റ് ഹാൻഡ്‌ലർ വിളിക്കുമ്പോൾ ഈ വേരിയബിളിലേക്ക് അസൈൻ ചെയ്യുന്ന ഘടകം വ്യക്തമാക്കാൻ സന്ദർഭ പാരാമീറ്റർ നിങ്ങളെ അനുവദിക്കുന്നു. ഒരു ഹാൻഡ്‌ലർ ഫംഗ്‌ഷനിൽ തിരഞ്ഞെടുക്കാതെ തന്നെ ഒരു ഡോക്യുമെന്റിലെ ടാർഗെറ്റ് ഘടകങ്ങൾ ആക്‌സസ് ചെയ്യാൻ ഇത് ഉപയോഗിക്കാം. അനുബന്ധ ഉദാഹരണം ചുവടെ നൽകിയിരിക്കുന്നു:

$(function() ($.ajax((വിജയം: പ്രവർത്തനം(ഡാറ്റ)) (var ടെംപ്ലേറ്റ് = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1") ; template.tmpl(data.slice(3)).appendTo("#row2"); ), മുമ്പ് അയയ്‌ക്കുക: ഫംഗ്‌ഷൻ(jqxhr, ക്രമീകരണങ്ങൾ) ( settings.url = "mydata.json"; ), സന്ദർഭം: $("h1 "), പൂർണ്ണം: ഫംഗ്‌ഷൻ(jqxhr, സ്റ്റാറ്റസ്) ( var കളർ = സ്റ്റാറ്റസ് == "വിജയം" ? "പച്ച" : "ചുവപ്പ്"; this.css("ബോർഡർ", "കട്ടിയുള്ള സോളിഡ്" + നിറം); ) ); ));

ഇവിടെ സന്ദർഭ പരാമീറ്റർ പ്രമാണത്തിന്റെ h1 ഘടകങ്ങൾ അടങ്ങിയ ഒരു jQuery ഒബ്‌ജക്റ്റിലേക്ക് സജ്ജീകരിച്ചിരിക്കുന്നു. പൂർണ്ണമായ പാരാമീറ്റർ നിർവചിച്ചിരിക്കുന്ന ഫംഗ്‌ഷനിൽ, jQuery ഒബ്‌ജക്‌റ്റിലെ css() രീതി വിളിച്ച് (ഇത് വഴി പരാമർശിച്ചിരിക്കുന്നത്) തിരഞ്ഞെടുത്ത ഘടകങ്ങൾ (ഈ സാഹചര്യത്തിൽ ഘടകം, പ്രമാണത്തിൽ ഒരു h1 ഘടകം മാത്രമുള്ളതിനാൽ) ഞങ്ങൾ ഫ്രെയിം ചെയ്യുന്നു. അഭ്യർത്ഥന നിലയെ അടിസ്ഥാനമാക്കിയാണ് ബോർഡർ നിറം നിർണ്ണയിക്കുന്നത്.

ഏത് ഒബ്ജക്റ്റിനെയും സന്ദർഭമായി സജ്ജീകരിക്കാൻ സന്ദർഭ പരാമീറ്റർ ഉപയോഗിക്കാം, ആ ഒബ്ജക്റ്റിൽ സാധുവായ പ്രവർത്തനങ്ങൾ മാത്രം നടത്തുന്നതിന് നിങ്ങൾ ഉത്തരവാദിയാണ്. ഉദാഹരണത്തിന്, നിങ്ങൾ ഒരു HTMLElement-ലേക്ക് സന്ദർഭം സജ്ജമാക്കുകയാണെങ്കിൽ, അതിലെ ഏതെങ്കിലും jQuery രീതികൾ വിളിക്കുന്നതിന് മുമ്പ് നിങ്ങൾ ആ ഒബ്ജക്റ്റ് $() ഫംഗ്ഷനിലേക്ക് കൈമാറണം.

അജാക്സ് അഭ്യർത്ഥനകൾക്കായി അടിസ്ഥാന പാരാമീറ്ററുകൾ സജ്ജമാക്കുന്നു

നിങ്ങൾക്ക് ഒരു അജാക്സ് അഭ്യർത്ഥനയുടെ അടിസ്ഥാന സജ്ജീകരണം നടത്താൻ കഴിയുന്ന ഒരു കൂട്ടം പാരാമീറ്ററുകൾ ഉണ്ട് (അതിൽ ചിലത് ഞങ്ങൾ ചർച്ച ചെയ്തു, url ഉം തരവും, മുകളിൽ). ലഭ്യമായ എല്ലാ ഓപ്ഷനുകളിലും, ഇവ ഏറ്റവും താൽപ്പര്യമുണർത്തുന്നവയാണ്, അവരുടെ പേരുകൾ കൂടുതലും തങ്ങൾക്കുവേണ്ടി സംസാരിക്കുന്നു. എന്തിനെക്കുറിച്ചുള്ള പാരാമീറ്ററുകൾ ഞങ്ങൾ സംസാരിക്കുന്നത്, ചുവടെയുള്ള പട്ടികയിൽ നൽകിയിരിക്കുന്നു:

ഒരു അജാക്സ് അഭ്യർത്ഥനയുടെ അടിസ്ഥാന കോൺഫിഗറേഷൻ പാരാമീറ്ററുകൾ പാരാമീറ്റർ വിവരണം

സ്വീകരിക്കുന്നു	ബ്രൗസർ പിന്തുണയ്‌ക്കുന്ന MIME തരങ്ങൾ വ്യക്തമാക്കുന്ന അക്സെപ്റ്റ് ഹെഡറിലേക്ക് അഭ്യർത്ഥന സജ്ജമാക്കുന്നു. സ്ഥിരസ്ഥിതിയായി, ഈ മൂല്യം നിർണ്ണയിക്കുന്നത് ഡാറ്റാ ടൈപ്പ് പാരാമീറ്റർ ആണ്
കാഷെ	അഭ്യർത്ഥന ഉള്ളടക്കം സെർവർ കാഷെ ചെയ്യരുതെന്ന് തെറ്റായ മൂല്യം സൂചിപ്പിക്കുന്നു. സ്ഥിരസ്ഥിതിയായി, സ്ക്രിപ്റ്റ്, jsonp എന്നിവ ഒഴികെയുള്ള എല്ലാ ഡാറ്റാ തരങ്ങളും കാഷെ ചെയ്തിരിക്കുന്നു
ഉള്ളടക്ക തരം	അഭ്യർത്ഥനയ്ക്കായി ഉള്ളടക്ക-ടൂർ തലക്കെട്ട് മൂല്യം സജ്ജമാക്കുന്നു
ഡാറ്റ തരം	സെർവറിൽ നിന്ന് ഏത് തരത്തിലുള്ള ഡാറ്റയാണ് പ്രതീക്ഷിക്കുന്നതെന്ന് വ്യക്തമാക്കുന്നു. ഈ ഓപ്ഷൻ ഉപയോഗിക്കുകയാണെങ്കിൽ, അഭ്യർത്ഥന തരത്തെക്കുറിച്ച് സെർവർ നൽകുന്ന വിവരങ്ങൾ jQuery അവഗണിക്കും
തലക്കെട്ടുകൾ	അഭ്യർത്ഥനയിൽ ഉൾപ്പെടുത്തേണ്ട അധിക തലക്കെട്ടുകളും മൂല്യങ്ങളും വ്യക്തമാക്കുന്നു
jsonp	JSONP അഭ്യർത്ഥനകൾ (ക്രോസ്-ഡൊമെയ്‌ൻ അഭ്യർത്ഥനകൾ) നടത്തുമ്പോൾ കോൾബാക്ക് ഫംഗ്‌ഷന്റെ സ്ഥാനത്ത് ഉപയോഗിക്കാൻ ഒരു സ്‌ട്രിംഗ് വ്യക്തമാക്കുന്നു. ഈ പരാമീറ്ററിന് സെർവറുമായുള്ള കരാർ ആവശ്യമാണ്
jsonpകോൾബാക്ക്	സ്ഥിരസ്ഥിതിയായി jQuery ഉപയോഗിക്കുന്ന യാന്ത്രികമായി ജനറേറ്റ് ചെയ്‌ത റാൻഡം പേരിന് പകരം ഉപയോഗിക്കേണ്ട കോൾബാക്ക് ഫംഗ്‌ഷന്റെ പേര് വ്യക്തമാക്കുന്നു
password	പ്രാമാണീകരണ നടപടിക്രമം കടന്നുപോകുമ്പോൾ അഭ്യർത്ഥനയിൽ ഉപയോഗിക്കേണ്ട പാസ്‌വേഡ് വ്യക്തമാക്കുന്നു
സ്ക്രിപ്റ്റ് ചാർസെറ്റ്	അഭ്യർത്ഥിച്ച JavaScript ഉള്ളടക്കം എൻകോഡ് ചെയ്യുമ്പോൾ ഏത് പ്രതീക സെറ്റ് ഉപയോഗിക്കണമെന്ന് jQuery-യോട് പറയുന്നു
ടൈം ഔട്ട്	അഭ്യർത്ഥനയുടെ കാലഹരണപ്പെടൽ ദൈർഘ്യം (മില്ലിസെക്കൻഡിൽ) സജ്ജമാക്കുന്നു
ഉപയോക്തൃനാമം	പ്രാമാണീകരണ അഭ്യർത്ഥനയിൽ ഉപയോഗിക്കേണ്ട ഉപയോക്തൃനാമം വ്യക്തമാക്കുന്നു

ടൈംഔട്ടുകളും തലക്കെട്ടുകളും സജ്ജീകരിക്കുന്നു

അജാക്സ് അഭ്യർത്ഥനകൾ നടപ്പിലാക്കുന്നത് ഉപയോക്താക്കൾക്ക് പലപ്പോഴും മനസ്സിലാകുന്നില്ല, അതിനാൽ സ്വീകാര്യമായ കാലഹരണപ്പെടൽ കാലയളവ് വ്യക്തമാക്കുന്നത് ഒരു മോശം ആശയമല്ല, കാരണം ഇത് ചില അജ്ഞാത പ്രക്രിയകൾ പൂർത്തിയാകുന്നതിനുള്ള മടുപ്പിക്കുന്ന കാത്തിരിപ്പിൽ നിന്ന് ഉപയോക്താക്കളെ രക്ഷിക്കും. ഒരു അഭ്യർത്ഥനയ്ക്കായി സമയപരിധി നിശ്ചയിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം ചുവടെ നൽകിയിരിക്കുന്നു:

$(function() ( $.ajax(( കാലഹരണപ്പെട്ടു: 5000, തലക്കെട്ടുകൾ: ("X-HTTP-Method-Override":"PUT" ), വിജയം: ഫംഗ്‌ഷൻ(ഡാറ്റ) (var ടെംപ്ലേറ്റ് = $("#flowerTmpl") ; template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ), പിശക്: പ്രവർത്തനം(jqxhr , സ്റ്റാറ്റസ്, errorMsg) ( console.log("പിശക്: " + സ്റ്റാറ്റസ്); ) );));

ഈ ഉദാഹരണത്തിൽ, ടൈംഔട്ട് പാരാമീറ്റർ പരമാവധി ടൈംഔട്ട് ദൈർഘ്യം 5 സെക്കൻഡായി സജ്ജമാക്കുന്നു. ഈ സമയത്തിനുള്ളിൽ അഭ്യർത്ഥന പൂർത്തിയാക്കിയില്ലെങ്കിൽ, പിശക് പാരാമീറ്റർ ഉപയോഗിച്ച് വ്യക്തമാക്കിയ ഫംഗ്ഷൻ വിളിക്കുകയും സ്റ്റാറ്റസ് പാരാമീറ്റർ വ്യക്തമാക്കിയ പിശക് കോഡ് പ്രദർശിപ്പിക്കുകയും ചെയ്യും.

ബ്രൗസറിലേക്ക് ഒരു അഭ്യർത്ഥന അയച്ചതിന് ശേഷം ഉടൻ തന്നെ ടൈമർ ആരംഭിക്കുന്നു, കൂടാതെ മിക്ക ബ്രൗസറുകളും ഒരേസമയം നടപ്പിലാക്കാൻ കഴിയുന്ന അഭ്യർത്ഥനകളുടെ എണ്ണത്തിൽ പരിധികൾ ഏർപ്പെടുത്തുന്നു. ഇതിനർത്ഥം സമയപരിധി അവസാനിക്കുമ്പോഴേക്കും അഭ്യർത്ഥന പോലും പ്രവർത്തിക്കില്ല എന്ന അപകടസാധ്യതയുണ്ടെന്നാണ്. ഇത് ഒഴിവാക്കാൻ, നിങ്ങൾ ബ്രൗസർ പരിമിതികളെക്കുറിച്ചും പ്രവർത്തിക്കുന്ന മറ്റേതെങ്കിലും അജാക്സ് അഭ്യർത്ഥനകളുടെ വലുപ്പത്തെക്കുറിച്ചും പ്രതീക്ഷിക്കുന്ന സമയത്തെക്കുറിച്ചും അറിഞ്ഞിരിക്കണം.

കൂടാതെ, അഭ്യർത്ഥനയിലേക്ക് ഒരു തലക്കെട്ട് ചേർക്കുന്നതിന് ചുവടെയുള്ള ഈ ഉദാഹരണം തലക്കെട്ട് പാരാമീറ്റർ ഉപയോഗിക്കുന്നു. ഹെഡ്ഡറുകൾ വ്യക്തമാക്കാൻ ഡാറ്റ ഡിസ്പ്ലേ ഒബ്ജക്റ്റ് ഉപയോഗിക്കുന്നു. സെർവർ അത് ശരിയായി തിരിച്ചറിയുന്നിടത്തോളം, REST വാസ്തുവിദ്യാ ശൈലിയെ പിന്തുണയ്ക്കുന്ന വെബ് ആപ്ലിക്കേഷനുകൾ സൃഷ്ടിക്കുന്നതിന് ഇവിടെ ഉപയോഗിച്ചിരിക്കുന്ന തലക്കെട്ട് ഉപയോഗപ്രദമാകും.

അധിക കോൺഫിഗറേഷൻ ഓപ്ഷനുകൾ ഉപയോഗിക്കുന്നു

അജാക്സ് അഭ്യർത്ഥനകൾക്ക് ബാധകമായ ഏറ്റവും ഉപയോഗപ്രദവും ശ്രദ്ധേയവുമായ വിപുലമായ ഓപ്ഷനുകൾ ഇനിപ്പറയുന്ന വിഭാഗങ്ങൾ വിവരിക്കുന്നു. അവ സാധാരണയായി വളരെ അപൂർവമായി മാത്രമേ ഉപയോഗിക്കൂ, പക്ഷേ അവ ആവശ്യമുള്ളപ്പോൾ അവ ഒഴിച്ചുകൂടാനാവാത്തതാണ്. അജാക്സുമായി jQuery എങ്ങനെ ഇടപഴകുന്നു എന്ന് നന്നായി മനസ്സിലാക്കാൻ ഈ ഓപ്ഷനുകൾ നിങ്ങളെ അനുവദിക്കുന്നു.

സിൻക്രണസ് അഭ്യർത്ഥനകൾ സൃഷ്ടിക്കുന്നു

ക്വറി എക്സിക്യൂഷൻ മോഡ് നിയന്ത്രിക്കുന്നത് ഉപയോഗിച്ചാണ് അസിൻക് പാരാമീറ്റർ. ഈ പരാമീറ്ററിനുള്ള ട്രൂ എന്നതിന്റെ ഡിഫോൾട്ട് മൂല്യം അർത്ഥമാക്കുന്നത്, അഭ്യർത്ഥന അസിൻക്രണസ് മോഡിൽ നിർവ്വഹിക്കുമെന്നാണ്, അതേസമയം തെറ്റായ മൂല്യം സിൻക്രണസ് മോഡാണ്.

ഒരു അഭ്യർത്ഥന സമന്വയത്തോടെ നടപ്പിലാക്കുമ്പോൾ, ajax() രീതി ഒരു സാധാരണ ഫംഗ്‌ഷൻ പോലെ പ്രവർത്തിക്കുന്നു, കൂടാതെ അഭ്യർത്ഥന നിർവഹിച്ചുകഴിഞ്ഞാൽ മാത്രമേ ബ്രൗസർ മറ്റ് സ്ക്രിപ്റ്റ് നിർദ്ദേശങ്ങൾ നടപ്പിലാക്കാൻ തുടങ്ങുകയുള്ളൂ.

മാറ്റമില്ലാതെ തുടരുന്ന ഡാറ്റ അവഗണിക്കുന്നു

ഉപയോഗിച്ച് ifModified പരാമീറ്റർഈ നിമിഷം മുതൽ മാത്രമേ ഡാറ്റയുടെ രസീത് ഉറപ്പാക്കാൻ കഴിയൂ അവസാന അഭ്യർത്ഥനഅവർ മാറ്റപ്പെട്ടിരിക്കുന്നു. അവസാനം പരിഷ്കരിച്ച തലക്കെട്ടാണ് ഈ സ്വഭാവം നിർണ്ണയിക്കുന്നത്. ഇത് ഉപയോഗശൂന്യമായ ഡാറ്റ കൈമാറ്റം ഒഴിവാക്കുന്നു, അത് ഉപയോക്താവിന് ഇതിനകം ഉള്ളതിനെ അപേക്ഷിച്ച് പുതിയ വിവരങ്ങളൊന്നും നൽകില്ല. ഡിഫോൾട്ടായി ifModified പരാമീറ്റർ ഉണ്ട് മൂല്യം തെറ്റ്, അവസാനം പരിഷ്കരിച്ച തലക്കെട്ട് അവഗണിക്കാനും എങ്ങനെയും ഡാറ്റ നൽകാനും jQuery-യോട് ഇത് പറയുന്നു.

ഈ പരാമീറ്റർ ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം ചുവടെ നൽകിയിരിക്കുന്നു:

$(function() ( $("button").click(function(e) ( $.ajax("mydata.json", ( ifModified: true, success: function(data, status)) ( if (status == " വിജയം") ( $("#row1, #row2").children().remove(); var ടെംപ്ലേറ്റ് = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo( "#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ) അല്ലെങ്കിൽ (നില == "മാറ്റം വരുത്തിയിട്ടില്ല") ($("img").css("ബോർഡർ" , "കട്ടിയുള്ള കട്ടിയുള്ള പച്ച"); ) )); e.preventDefault(); )) );

ഈ ഉദാഹരണം ifModified പാരാമീറ്ററിനെ true ആയി സജ്ജമാക്കുന്നു. വിജയ ഫംഗ്‌ഷൻ എപ്പോഴും വിളിക്കപ്പെടുന്നു, എന്നാൽ നിമിഷം മുതൽ ഉള്ളടക്കം അഭ്യർത്ഥിച്ചിട്ടുണ്ടെങ്കിൽ അവസാന സമയം, അത് മാറിയിട്ടില്ല, തുടർന്ന് ഡാറ്റ ആർഗ്യുമെന്റ് നിർവചിക്കപ്പെടാതെ നില ആർഗ്യുമെന്റ് ആയിരിക്കും പരിഷ്ക്കരിക്കാത്ത മൂല്യം.

ഈ സാഹചര്യത്തിൽ, നിർവ്വഹിച്ച പ്രവർത്തനങ്ങൾ സ്റ്റാറ്റസ് ആർഗ്യുമെന്റിന്റെ മൂല്യം അനുസരിച്ചാണ് നിർണ്ണയിക്കുന്നത്. ഈ ആർഗ്യുമെന്റിന്റെ മൂല്യം വിജയമാണെങ്കിൽ, ഡോക്യുമെന്റിലേക്ക് ഘടകങ്ങൾ ചേർക്കാൻ ഡാറ്റ ആർഗ്യുമെന്റ് ഉപയോഗിക്കുന്നു. സ്റ്റാറ്റസ് ആർഗ്യുമെന്റ് പരിഷ്കരിച്ചിട്ടില്ലെങ്കിൽ, ഞങ്ങൾ ഉപയോഗിക്കുന്നു css രീതി() ഒരു ഫ്രെയിം ഉപയോഗിച്ച് ഡോക്യുമെന്റിൽ നിലവിലുള്ള ഘടകങ്ങൾ ഹൈലൈറ്റ് ചെയ്യാൻ.

ബട്ടണുമായി ബന്ധപ്പെട്ട ക്ലിക്ക് ഇവന്റിനുള്ള പ്രതികരണമായി, ajax() രീതി വിളിക്കുന്നു. ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ ifModified പാരാമീറ്ററിന്റെ പ്രഭാവം കാണിക്കുന്നതിന് ഒരേ ചോദ്യം ഒന്നിലധികം തവണ ആവർത്തിക്കുന്നത് ഇത് സാധ്യമാക്കുന്നു:

ഈ ഓപ്ഷൻ ഉപയോഗപ്രദമായതിനാൽ, ഇത് ജാഗ്രതയോടെ ഉപയോഗിക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു. ഉപയോക്തൃ പ്രവർത്തനത്തിന്റെ ഫലമായി ഒരു അഭ്യർത്ഥന അയയ്‌ക്കുകയാണെങ്കിൽ (ഉദാഹരണത്തിന്, ഒരു ബട്ടൺ ക്ലിക്കുചെയ്യുന്നത്), മുൻ അഭ്യർത്ഥന പ്രതീക്ഷിച്ചതുപോലെ പൂർത്തിയാകാത്തതിനാൽ ഉപയോക്താവ് ബട്ടൺ ക്ലിക്കുചെയ്യാനുള്ള സാധ്യതയുണ്ട്.

നിങ്ങൾ ഡാറ്റ അഭ്യർത്ഥിക്കുകയാണെന്ന് സങ്കൽപ്പിക്കുക, എന്നാൽ വിജയ പാരാമീറ്ററിൽ വ്യക്തമാക്കിയ രീതിയിൽ നിങ്ങളെ തടയുന്ന ഒരു പിശക് അടങ്ങിയിരിക്കുന്നു. ശരിയായ അപ്ഡേറ്റ്പ്രമാണത്തിന്റെ ഉള്ളടക്കം. അപ്പോൾ നിങ്ങളുടേത് അടുത്ത നടപടിപ്രതീക്ഷിച്ച ഫലം നേടുന്നതിന് വീണ്ടും ബട്ടൺ ക്ലിക്ക് ചെയ്യാൻ ശ്രമിക്കും. നിങ്ങൾ ifModified പാരാമീറ്റർ മോശമായി ഉപയോഗിക്കുകയാണെങ്കിൽ, ഉപയോക്താവിന്റെ പ്രവർത്തനങ്ങൾ നിങ്ങൾക്ക് അവഗണിക്കാം, പ്രശ്നം പരിഹരിക്കാൻ കൂടുതൽ ഗുരുതരമായ നടപടിയെടുക്കാൻ അവരെ നിർബന്ധിതരാക്കി.

പ്രതികരണ കോഡ് പ്രോസസ്സ് ചെയ്യുന്നു

സ്റ്റാറ്റസ് കോഡ് പാരാമീറ്റർഓപ്ഷനുകൾ തിരഞ്ഞെടുക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു തുടർ പ്രവർത്തനങ്ങൾ HTTP അഭ്യർത്ഥനകളിലേക്കുള്ള പ്രതികരണ കോഡ് അനുസരിച്ച്. വിജയത്തിന്റെയും പിശകിന്റെയും പാരാമീറ്ററുകൾക്ക് പകരം അല്ലെങ്കിൽ അവയ്ക്ക് പുറമേ ഇത് ഉപയോഗിക്കാം. സ്റ്റാറ്റസ് കോഡ് പരാമീറ്ററിന്റെ സ്വതന്ത്ര ഉപയോഗത്തിന്റെ ഒരു ഉദാഹരണം ചുവടെ നൽകിയിരിക്കുന്നു:

$(function() ($.ajax(( url: "mydata.json", statusCode: ( 200: function(data) ( var ടെംപ്ലേറ്റ് = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ), 404: function(jqxhr, status, errorMsg) ( $("") .ടെക്സ്റ്റ്("സ്റ്റാറ്റസ്: " + സ്റ്റാറ്റസ് + " പിശക്: " + എറർഎംഎസ്ജി) .insertAfter("h1"); ) ));));

ഇവിടെ, എച്ച്ടിടിപി അഭ്യർത്ഥനകൾക്കുള്ള പ്രതികരണ കോഡുകളും സെർവറിൽ എക്സിക്യൂട്ട് ചെയ്യേണ്ട അനുബന്ധ ഫംഗ്ഷനുകളും തമ്മിലുള്ള ബന്ധം സ്ഥാപിക്കുന്ന ഒരു ഒബ്ജക്റ്റായി സ്റ്റാറ്റസ് കോഡ് പാരാമീറ്റർ വ്യക്തമാക്കിയിരിക്കുന്നു. ഏത് ആർഗ്യുമെന്റുകളാണ് ഫംഗ്‌ഷനുകളിലേക്ക് കൈമാറുന്നത്, പ്രതികരണ കോഡ് ഒരു വിജയകരമായ അഭ്യർത്ഥനയെ പ്രതിഫലിപ്പിക്കുന്നുണ്ടോ അല്ലെങ്കിൽ പിശകിനെ പ്രതിഫലിപ്പിക്കുന്നു എന്നതിനെ ആശ്രയിച്ചിരിക്കുന്നു.

കോഡ് (ഉദാഹരണത്തിന്, 200) ഒരു വിജയകരമായ അഭ്യർത്ഥനയുമായി പൊരുത്തപ്പെടുന്നുവെങ്കിൽ, വിജയ പാരാമീറ്റർ വ്യക്തമാക്കിയ ഫംഗ്ഷനിലേക്ക് കൈമാറുന്ന ആർഗ്യുമെന്റുകൾക്ക് തുല്യമാണ്. അല്ലാത്തപക്ഷം (ഉദാഹരണത്തിന്, അഭ്യർത്ഥിച്ച ഫയൽ കണ്ടെത്തിയില്ലെന്ന് സൂചിപ്പിക്കുന്ന 404 പ്രതികരണ കോഡ്), പിശക് പാരാമീറ്റർ വ്യക്തമാക്കിയ ഫംഗ്‌ഷനിലേക്ക് കൈമാറുന്ന ആർഗ്യുമെന്റുകൾക്ക് തുല്യമാണ്.

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഈ ഉപകരണം പ്രതികരണ കോഡുകളെക്കുറിച്ചുള്ള നേരിട്ടുള്ള വിവരങ്ങൾ നൽകുന്നില്ല. ബ്രൗസർ-സെർവർ ഇടപെടലുകൾ ഡീബഗ്ഗുചെയ്യുമ്പോൾ ഞാൻ ഇത് പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്, സാധാരണയായി എന്തുകൊണ്ടാണ് jQuery ഞാൻ ആഗ്രഹിക്കുന്ന രീതിയിൽ പെരുമാറാത്തത് എന്ന് കണ്ടുപിടിക്കാൻ. ഈ സാഹചര്യത്തിൽ, വിജയം, പിശക് പാരാമീറ്ററുകൾ കൂടാതെ ഞാൻ സ്റ്റാറ്റസ് കോഡ് പാരാമീറ്റർ ഉപയോഗിക്കുകയും കൺസോളിലേക്ക് വിവരങ്ങൾ ഔട്ട്പുട്ട് ചെയ്യുകയും ചെയ്യുന്നു. ഈ പാരാമീറ്ററുകൾ ഒരുമിച്ച് ഉപയോഗിക്കുകയാണെങ്കിൽ, വിജയവും പിശക് ഫംഗ്ഷനുകളും ആദ്യം എക്സിക്യൂട്ട് ചെയ്യും, തുടർന്ന് സ്റ്റാറ്റസ് കോഡ് പാരാമീറ്റർ നിർവചിച്ച ഫംഗ്ഷനുകൾ നടപ്പിലാക്കും.

പ്രതികരണ ഡാറ്റ പ്രീ-ക്ലീനിംഗ്

ഉപയോഗിച്ച് ഡാറ്റ ഫിൽറ്റർ പാരാമീറ്റർസെർവർ നൽകുന്ന ഡാറ്റ പ്രീ-ക്ലീൻ ചെയ്യാൻ വിളിക്കുന്ന ഒരു ഫംഗ്ഷൻ നിങ്ങൾക്ക് വ്യക്തമാക്കാൻ കഴിയും. അനുചിതമായ രീതിയിൽ ഫോർമാറ്റ് ചെയ്‌തിരിക്കുന്നതിനാലോ നിങ്ങൾ പ്രോസസ്സ് ചെയ്യാൻ ആഗ്രഹിക്കാത്ത ഡാറ്റ അടങ്ങിയിരിക്കുന്നതിനാലോ സെർവർ അയച്ച ഡാറ്റ നിങ്ങൾക്ക് പൂർണ്ണമായും തൃപ്തികരമല്ലാത്ത സന്ദർഭങ്ങളിൽ ഈ ടൂൾ ഒഴിച്ചുകൂടാനാവാത്തതാണ്.

JSON ഡാറ്റയിലേക്ക് അധിക ഡാറ്റ ചേർക്കുന്ന Microsoft ASP.NET സെർവറുകളിൽ പ്രവർത്തിക്കുമ്പോൾ ഈ ഉപകരണം എന്നെ വളരെയധികം സഹായിക്കുന്നു. ഡാറ്റ ഫിൽറ്റർ പാരാമീറ്റർ ഉപയോഗിച്ച് അത്തരം ഡാറ്റ നീക്കംചെയ്യുന്നത് മാത്രമേ ആവശ്യമുള്ളൂ കുറഞ്ഞ പരിശ്രമം. ഡാറ്റ ഫിൽറ്റർ പാരാമീറ്റർ ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം ചുവടെ നൽകിയിരിക്കുന്നു:

$(function() ($.ajax(( url: "mydata.json", വിജയം: ഫംഗ്‌ഷൻ(ഡാറ്റ) (var ടെംപ്ലേറ്റ് = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ), dataType: "json", dataFilter: function(data, dataType) ( if (dataType = = "json") (var filteredData = $.parseJSON(data); filteredData.shift(); തിരികെ JSON.stringify(filteredData.reverse()); ) else ( ഡാറ്റ തിരികെ നൽകുക; ) )); ));

സെർവറിൽ നിന്ന് ലഭിച്ച ഡാറ്റയും ഡാറ്റടൈപ്പ് പാരാമീറ്ററിന്റെ മൂല്യവും ഫംഗ്ഷൻ കൈമാറുന്നു. ഡാറ്റടൈപ്പ് ഉപയോഗിക്കുന്നില്ലെങ്കിൽ, രണ്ടാമത്തെ ആർഗ്യുമെന്റ് നിർവചിക്കാത്തതായി സജ്ജീകരിക്കും. ഫിൽട്ടർ ചെയ്ത ഡാറ്റ തിരികെ നൽകുക എന്നതാണ് നിങ്ങളുടെ ജോലി. ഈ ഉദാഹരണത്തിൽ, ഞങ്ങളുടെ ശ്രദ്ധയുടെ വിഷയം JSON ഫോർമാറ്റിലുള്ള ഡാറ്റയാണ്:

Var filteredData = $.parseJSON(data); filteredData.shift(); JSON.stringify(filteredData.reverse()) തിരികെ നൽകുക; ...

ഉദാഹരണം കൂടുതൽ ചിത്രീകരിക്കുന്നതിന്, അത് ചില അധിക പ്രവർത്തനങ്ങൾ ചെയ്യുന്നു. ഒന്നാമതായി, JSON ഡാറ്റആയി പരിവർത്തനം ചെയ്യപ്പെടുന്നു JavaScript അറേഉപയോഗിച്ച് jQuery രീതി parseJSON. തുടർന്ന് അറേയിൽ നിന്ന് ആദ്യ ഘടകം നീക്കം ചെയ്യപ്പെടും ഷിഫ്റ്റ് രീതി(), കൂടാതെ അതിന്റെ ശേഷിക്കുന്ന മൂലകങ്ങളുടെ ക്രമം റിവേഴ്സ് () രീതി ഉപയോഗിച്ച് വിപരീതമാക്കുന്നു.

ഫംഗ്‌ഷന് ചെയ്യേണ്ടത് ഒരു സ്ട്രിംഗ് തിരികെ നൽകുക മാത്രമാണ്, അതിനാൽ jQuery ഡാറ്റയെ പരിവർത്തനം ചെയ്യുമെന്ന് അറിഞ്ഞുകൊണ്ട് ഞങ്ങൾ JSON.stringify() എന്ന് വിളിക്കുന്നു. ജാവാസ്ക്രിപ്റ്റ് ഒബ്ജക്റ്റ്വിജയ ഫംഗ്‌ഷൻ വിളിക്കുന്നതിന് മുമ്പ്. ഈ ഉദാഹരണം ഒരു അറേയിൽ നിന്ന് ഒരു ഘടകം നീക്കംചെയ്യാനുള്ള കഴിവ് പ്രകടമാക്കി, എന്നിരുന്നാലും, സാഹചര്യത്തെ ആശ്രയിച്ച്, ഞങ്ങൾക്ക് മറ്റേതെങ്കിലും തരത്തിലുള്ള പ്രോസസ്സിംഗ് നടത്താം.

അന്തിമ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു:

ഡാറ്റ ട്രാൻസ്ഫോർമേഷൻ മാനേജ്മെന്റ്

എന്റെ പ്രിയപ്പെട്ട ക്രമീകരണങ്ങളിലൊന്നിന്റെ അവലോകനം ഞാൻ അവസാനമായി സംരക്ഷിച്ചു. ചില ഡാറ്റ തരങ്ങൾ വീണ്ടെടുക്കുമ്പോൾ jQuery യാന്ത്രികമായി ചില സൗകര്യപ്രദമായ പരിവർത്തനങ്ങൾ നടത്തുന്നത് നിങ്ങൾ ശ്രദ്ധിച്ചിരിക്കാം. ഉദാഹരണത്തിന്, JSON ഡാറ്റ സ്വീകരിക്കുമ്പോൾ, യഥാർത്ഥ റോ JSON സ്‌ട്രിങ്ങിന് പകരം JavaScript ഒബ്‌ജക്റ്റ് ഉപയോഗിക്കുന്ന ഒരു വിജയ ഫംഗ്‌ഷൻ jQuery നൽകുന്നു.

അത്തരം പരിവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യാൻ ഇത് ഉപയോഗിക്കുന്നു കൺവെർട്ടർ പാരാമീറ്റർ. ഈ പരാമീറ്ററിന്റെ മൂല്യം, ഡാറ്റ തരങ്ങളും അവ പ്രോസസ്സ് ചെയ്യാൻ ഉപയോഗിക്കുന്ന ഫംഗ്ഷനുകളും തമ്മിൽ ഒരു മാപ്പിംഗ് സ്ഥാപിക്കുന്ന ഒരു വസ്തുവാണ്. ഒരു jQuery ഒബ്‌ജക്‌റ്റിലേക്ക് HTML ഡാറ്റ യാന്ത്രികമായി പരിവർത്തനം ചെയ്യുന്നതിന് ഈ ഓപ്ഷൻ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് ചുവടെയുള്ള ഉദാഹരണം കാണിക്കുന്നു:

$(function() ( $.ajax(( url: "flowers.html", // ഈ ഉദാഹരണത്തിൽ നമ്മൾ HTML മാർക്ക്അപ്പ് ലോഡ് ചെയ്യുന്നു, JSON ഡാറ്റ വിജയമല്ല: ഫംഗ്ഷൻ(ഡാറ്റ, സ്റ്റാറ്റസ്, jqxhr) (var elems = data.filter( "div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); elems.slice(3).appendTo("#row2"); ), കൺവെർട്ടറുകൾ: (" ടെക്സ്റ്റ് html": ഫംഗ്ഷൻ(ഡാറ്റ) ($(ഡാറ്റ) തിരികെ നൽകുക);));

ഈ ഉദാഹരണം ടെക്സ്റ്റ് html ഡാറ്റ തരത്തിനായുള്ള ഒരു ഫംഗ്ഷൻ രജിസ്റ്റർ ചെയ്യുന്നു. നിർദ്ദിഷ്ട MIME തരത്തിന്റെ ഘടകങ്ങൾ തമ്മിലുള്ള ഇടം ശ്രദ്ധിക്കുക (ടെക്സ്റ്റ്/html നൊട്ടേഷൻ ഫോമിന് വിരുദ്ധമായി). ഫംഗ്ഷൻ സെർവറിൽ നിന്ന് ലഭിച്ച ഡാറ്റ സ്വീകരിക്കുകയും പരിവർത്തനം ചെയ്ത ഡാറ്റ തിരികെ നൽകുകയും ചെയ്യുന്നു. ഈ സാഹചര്യത്തിൽ, ഫ്ലവർസ്.html ഫയലിൽ അടങ്ങിയിരിക്കുന്ന HTML ശകലം $() ഫംഗ്ഷനിലേക്ക് കൈമാറുകയും ഫലം നൽകുകയും ചെയ്യുന്നതാണ് ഡാറ്റാ പരിവർത്തനം. വിജയത്തിലേക്കുള്ള ഡാറ്റ ആർഗ്യുമെന്റായി പാസ്സാക്കിയ ഒബ്‌ജക്റ്റിന് സാധാരണ jQuery രീതികൾ ബാധകമാണ് എന്നാണ് ഇതിനർത്ഥം.

ഡാറ്റ കൺവെർട്ടറുകളിൽ പ്രവർത്തിക്കുമ്പോൾ, നിങ്ങൾക്ക് വളരെയധികം കൊണ്ടുപോകാം. ഈ ഫംഗ്‌ഷനുകൾ ഉപയോഗിച്ച് ഞാൻ ചെയ്യേണ്ടതിലും കൂടുതൽ ചെയ്യാനുള്ള പ്രലോഭനം ഒഴിവാക്കാൻ ഞാൻ എപ്പോഴും ശ്രമിക്കുന്നു. ഉദാഹരണത്തിന്, ചിലപ്പോൾ JSON ഡാറ്റയിലേക്ക് ഒരു ടെംപ്ലേറ്റ് പ്രയോഗിക്കാനും തത്ഫലമായുണ്ടാകുന്ന HTML ഘടകങ്ങൾ തിരികെ നൽകാനും ഞാൻ പ്രലോഭിപ്പിക്കപ്പെടുന്നു. ഈ സാങ്കേതികത വളരെ സൗകര്യപ്രദമാണെങ്കിലും, നിങ്ങളുടെ കോഡ് മറ്റൊരാൾ വിപുലീകരിക്കാൻ ശ്രമിക്കുകയാണെങ്കിൽ, അല്ലെങ്കിൽ, അത് യഥാർത്ഥ രൂപത്തിൽ ലഭിക്കുന്നതിന് നിങ്ങൾ പിന്നീട് തീവ്രമായ ഡാറ്റ പ്രോസസ്സിംഗ് നടത്തേണ്ടതുണ്ട്.

അജാക്സ് അഭ്യർത്ഥനകൾ സജ്ജീകരിക്കുകയും ഫിൽട്ടർ ചെയ്യുകയും ചെയ്യുന്നു

ഇപ്പോൾ നിങ്ങൾക്ക് ajax() രീതിയും അതുമായി പ്രവർത്തിക്കാൻ ലഭ്യമായ പാരാമീറ്ററുകളും പരിചിതമായിക്കഴിഞ്ഞു, നമുക്ക് കുറച്ച് നോക്കാം അധിക രീതികൾ, ചോദ്യങ്ങൾ കോൺഫിഗർ ചെയ്യുന്നത് എളുപ്പമാക്കുന്നതിന് jQuery നൽകുന്നു.

സ്ഥിരസ്ഥിതി ക്രമീകരണങ്ങൾ നിർവചിക്കുന്നു

എല്ലാ അജാക്സ് അഭ്യർത്ഥനകളിലും സ്ഥിരസ്ഥിതിയായി ഉപയോഗിക്കുന്ന പാരാമീറ്റർ മൂല്യങ്ങൾ സജ്ജമാക്കാൻ ajaxSetup() രീതി നിങ്ങളെ അനുവദിക്കുന്നു, അതുവഴി ഓരോ അഭ്യർത്ഥനയിലും പാരാമീറ്ററുകൾ ക്രമീകരിക്കുന്നതിൽ നിന്ന് നിങ്ങളെ മോചിപ്പിക്കുന്നു. ഈ രീതി ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം ചുവടെ നൽകിയിരിക്കുന്നു:

") .ടെക്സ്റ്റ്("സ്റ്റാറ്റസ്: " + സ്റ്റാറ്റസ് + " പിശക്: " + errorMsg) .insertAfter("h1"); ), കൺവെർട്ടറുകൾ: ( "ടെക്സ്റ്റ് html": ഫംഗ്ഷൻ(ഡാറ്റ) ($(ഡാറ്റ) തിരികെ നൽകുക); ); 0, 3).appendTo("#row1"); elems.slice(3).appendTo("#row2"); ) );));

ajaxSetup() രീതിയെ jQuery $ ഫംഗ്ഷൻ ഉപയോഗിച്ചാണ് വിളിക്കുന്നത്, അതേ രീതിയിൽ ajax() രീതിയെ വിളിക്കുന്നു. എല്ലാ അജാക്സ് അഭ്യർത്ഥനകൾക്കും ഡിഫോൾട്ടായി നിങ്ങൾ ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്ന പാരാമീറ്റർ മൂല്യങ്ങൾ അടങ്ങിയ ഒരു ഒബ്ജക്റ്റാണ് ajaxSetup() രീതിയിലേക്കുള്ള ആർഗ്യുമെന്റ്. ഈ ഉദാഹരണത്തിൽ, ടൈംഔട്ട്, ഗ്ലോബൽ, പിശക്, കൺവെർട്ടർ പാരാമീറ്ററുകൾ എന്നിവയ്ക്കായി ഞങ്ങൾ സ്ഥിരസ്ഥിതി മൂല്യങ്ങൾ സജ്ജമാക്കുന്നു.

ajaxSetup() രീതി വിളിച്ചതിന് ശേഷം, ഞങ്ങൾ മാറ്റാൻ ആഗ്രഹിക്കുന്ന പാരാമീറ്ററുകളുടെ മൂല്യങ്ങൾ അല്ലെങ്കിൽ സ്ഥിരസ്ഥിതിയായി നൽകാത്തവ മാത്രം നിർവചിക്കേണ്ടതുണ്ട്. നിങ്ങൾക്ക് നിരവധി അന്വേഷണങ്ങൾ നടത്തേണ്ടിവരുന്ന സന്ദർഭങ്ങളിൽ ഇത് ഗണ്യമായ സമയ ലാഭം നൽകുന്നു ഒരേ മൂല്യങ്ങൾപരാമീറ്ററുകൾ.

ഫിൽട്ടറിംഗ് അഭ്യർത്ഥിക്കുക

എല്ലാ അജാക്സ് അഭ്യർത്ഥനകൾക്കും ബാധകമായ അടിസ്ഥാന കോൺഫിഗറേഷൻ പാരാമീറ്റർ മൂല്യങ്ങൾ ajaxSetup() രീതി നിർവചിക്കുന്നു. സാധ്യതകൾ ഡൈനാമിക് ക്രമീകരണങ്ങൾവ്യക്തിഗത അജാക്സ് അഭ്യർത്ഥനകൾക്കുള്ള പാരാമീറ്ററുകൾ ajaxPrefilter() രീതിയാണ് നൽകുന്നത്. ഈ രീതി ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം ചുവടെ നൽകിയിരിക്കുന്നു:

$(function() ( $.ajaxSetup(( കാലഹരണപ്പെട്ടു: 15000, ആഗോള: തെറ്റ്, പിശക്: ഫംഗ്‌ഷൻ(jqxhr, സ്റ്റാറ്റസ്, എറർഎംഎസ്ജി) ( $("") .ടെക്‌സ്റ്റ്("നില: " + സ്റ്റാറ്റസ് + " പിശക്: " + errorMsg) .insertAfter("h1"); ), കൺവെർട്ടറുകൾ: ( "ടെക്സ്റ്റ് html": ഫംഗ്ഷൻ(ഡാറ്റ) ($(data); ) ) ); $.ajaxPrefilter("json html", ഫംഗ്ഷൻ(ക്രമീകരണങ്ങൾ, യഥാർത്ഥ ക്രമീകരണങ്ങൾ , jqxhr) ( എങ്കിൽ (originalSettings.dataType == "html") ( settings.timeout = 2000; ) else ( jqxhr.abort(); ) )) $.ajax(( url: "flowers.html", dataType: " html ", വിജയം: പ്രവർത്തനം(ഡാറ്റ, സ്റ്റാറ്റസ്, jqxhr) (var elems = data.filter("div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); elems .സ്ലൈസ്(3).appendTo("#row2"); ) );));

ഓരോ പുതിയ അജാക്സ് അഭ്യർത്ഥനയ്ക്കും നിങ്ങൾ വ്യക്തമാക്കുന്ന പ്രവർത്തനം നടപ്പിലാക്കും. അഭ്യർത്ഥന പാരാമീറ്ററുകൾ (ajaxSetup() രീതി ഉപയോഗിച്ച് നിങ്ങൾ സജ്ജമാക്കിയ ഏതെങ്കിലും ഡിഫോൾട്ട് മൂല്യങ്ങൾ ഉൾപ്പെടെ), അതുപോലെ ajax() രീതിയിലേക്ക് (ഏതെങ്കിലും സ്ഥിരസ്ഥിതി മൂല്യങ്ങൾ ഒഴികെ) യഥാർത്ഥ പാരാമീറ്ററുകൾ, jqXHR അഭ്യർത്ഥന എന്നിവയാണ് ഫംഗ്ഷനിലേക്ക് കൈമാറിയ ആർഗ്യുമെന്റുകൾ. വസ്തു.

ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ, ആദ്യത്തെ ആർഗ്യുമെന്റായി പാസ്സാക്കിയ ഒബ്ജക്റ്റിൽ ഞങ്ങൾ മാറ്റങ്ങൾ വരുത്തുന്നു. ഈ സാഹചര്യത്തിൽ, ajax() രീതിയിലേക്ക് കൈമാറിയ പരാമീറ്ററുകൾക്കിടയിൽ dataType പാരാമീറ്റർ ഉണ്ടെങ്കിൽ, കാലഹരണപ്പെടൽ ദൈർഘ്യം രണ്ട് സെക്കൻഡായി സജ്ജീകരിച്ചിരിക്കുന്നു. മറ്റെല്ലാ അഭ്യർത്ഥനകളും അയയ്ക്കുന്നത് തടയാൻ, jqXHR ഒബ്‌ജക്റ്റിൽ abort() രീതി വിളിക്കുന്നു.

വെബ് ആപ്ലിക്കേഷനുകൾക്കായി ഇന്ററാക്ടീവ് യൂസർ ഇന്റർഫേസുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു സമീപനമാണ് അജാക്സ്, ജാവാസ്ക്രിപ്റ്റിൽ വികസിപ്പിച്ചെടുത്തത് പശ്ചാത്തലം(പിഎച്ച്പിയിലെന്നപോലെ, മുഴുവൻ പേജും റീലോഡ് ചെയ്യാതെ) ബ്രൗസറിനും സെർവറിനുമിടയിൽ ഡാറ്റ കൈമാറാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

ഇംഗ്ലീഷിൽ നിന്ന് AJAX agex, ഉച്ചാരണം റഷ്യൻ ഭാഷയിൽ ജനപ്രിയമാണ് അജാക്സ്.

AJAX-ന്റെ ചരിത്രത്തിൽ നിന്ന്, 2005 ഫെബ്രുവരി 18-ന് ജെസ്സി ജെയിംസ് ഗാരറ്റിന്റെ, വെബ് ആപ്ലിക്കേഷനുകളിലേക്കുള്ള ഒരു പുതിയ സമീപനം എന്ന ലേഖനത്തിലാണ് അജാക്സിന്റെ ആദ്യ പരാമർശം ഔദ്യോഗികമായി അറിയപ്പെട്ടത്. വെബ് സാങ്കേതികവിദ്യകളിലേക്കുള്ള ഒരു പുതിയ സമീപനവും സെർവറും ക്ലയന്റും തമ്മിലുള്ള ലളിതമായ ആശയവിനിമയവും വിവരിക്കാൻ രചയിതാവ് തീരുമാനിച്ചു.

ഗൂഗിൾ അതിന്റെ ജിമെയിൽ പോലുള്ള സേവനങ്ങളിൽ ഉപയോഗിച്ചതിന് ശേഷം അജാക്സ് വലിയ ജനപ്രീതി നേടി. ഗൂഗിൾ ഭൂപടംഒപ്പം ഗൂഗിൾ സജസ്റ്റ്.

Google തിരയൽ അന്വേഷണ ഓപ്ഷനുകൾ നൽകുന്നു

AJAX എങ്ങനെയാണ് പ്രവർത്തിക്കുന്നത്, XMLHttpRequest എന്ന ഒരു ഒബ്‌ജക്റ്റിന്റെ രൂപമാണ് AJAX എടുക്കുന്നതെന്ന് തുടക്കത്തിൽ ഞാൻ പറയാൻ ആഗ്രഹിക്കുന്നു.

XMLHttpRequest പ്രോപ്പർട്ടികൾ, ഗെറ്റ് അല്ലെങ്കിൽ പോസ്റ്റ് രീതികൾ ഉപയോഗിച്ച് സെർവറിലേക്ക് വിവരങ്ങൾ കൈമാറുന്നത് സാധ്യമാക്കുന്നു, അതിനുശേഷം സെർവർ ആവശ്യമായ പ്രവർത്തനങ്ങൾ ചെയ്യുന്നു, പ്രതികരണം സ്വീകരിക്കുക മാത്രമാണ് അവശേഷിക്കുന്നത്.

നിങ്ങൾ അജാക്സ് ഉപയോഗിക്കുമ്പോൾ, നിങ്ങൾ ഇനിപ്പറയുന്ന നിയമങ്ങൾ പരിഗണിക്കേണ്ടതുണ്ട്:
1. എല്ലാ വിവരങ്ങളും UTF-8 എൻകോഡിംഗിൽ മാത്രമായി കൈമാറ്റം ചെയ്യപ്പെടുന്നു/സ്വീകരിക്കപ്പെടുന്നു
2. XMLHttpRequest വ്യത്യസ്ത ബ്രൗസറുകളിൽ വ്യത്യസ്തമായി വിളിക്കുന്നു

AJAXAdvantages-ന്റെ പ്രധാന ഗുണങ്ങളും ദോഷങ്ങളും

ട്രാഫിക് സേവിംഗ്സ്. പേജിന്റെ ഒരു പ്രത്യേക ഭാഗത്തേക്ക് മാത്രമേ ഡാറ്റ കൈമാറുകയുള്ളൂ, ഇത് ട്രാഫിക്കിനെ ഗണ്യമായി കുറയ്ക്കുന്നു.
സെർവറിലെ ലോഡ് കുറയ്ക്കുന്നു. മുഴുവൻ പേജും പുതുക്കേണ്ട ആവശ്യമില്ല, നിർദ്ദിഷ്ട അഭ്യർത്ഥന ഇല്ലാതാകും. ഉദാഹരണത്തിന്, നിങ്ങൾ സൈറ്റിൽ വോട്ട് ചെയ്യാൻ ആഗ്രഹിക്കുന്നു. ബട്ടൺ അമർത്തിയാൽ, നിങ്ങളുടെ ശബ്ദം ഉപയോഗിച്ച് ഡാറ്റ സെർവറിലേക്ക് അയയ്‌ക്കുകയും ഒരു പ്രതികരണം നൽകുകയും ചെയ്യും. എന്നിരുന്നാലും, പേജ് തന്നെ അപ്ഡേറ്റ് ചെയ്തിട്ടില്ല. ഫലം മാത്രം മാറുന്നു.
സേവനത്തിന്റെ തന്നെ വേഗത്തിലുള്ള പ്രവർത്തനം. ഒരു നിർദ്ദിഷ്ട ബ്ലോക്ക് ഉപയോഗിച്ചാണ് ജോലി നടക്കുന്നതെന്നതിനാൽ, അതിന്റെ ജോലിയുടെ ഫലം വളരെ വേഗത്തിൽ കാണാൻ കഴിയും.
ഉപയോഗത്തിലുള്ള വൈവിധ്യം. AJAX പ്രവർത്തനത്തിൽ ഫോമുകൾക്കൊപ്പം പ്രവർത്തിക്കുന്നതിനേക്കാൾ കൂടുതൽ ഉൾപ്പെടുന്നു. ഉദാഹരണത്തിന്, ഇൻ ഗൂഗിളില് തിരയുകനിങ്ങൾക്ക് തിരഞ്ഞെടുക്കൽ കാണാൻ കഴിയും വാക്യങ്ങൾ തിരയുകനിങ്ങളുടെ അഭ്യർത്ഥനയുടെ ആദ്യ അക്ഷരങ്ങൾ നൽകിയ ശേഷം.
കുറവുകൾ

ജാവ സ്ക്രിപ്റ്റ് പ്രവർത്തനക്ഷമമാക്കേണ്ടതുണ്ട്. നിങ്ങളുടെ ബ്രൗസറിന്റെ സുരക്ഷാ ക്രമീകരണങ്ങളിൽ Java സ്‌ക്രിപ്റ്റ് ഓഫാക്കിയിട്ടുണ്ടെങ്കിൽ, നിങ്ങൾ AJAX-ന്റെ ഫലങ്ങൾ കാണാനിടയില്ല.
തിരയൽ എഞ്ചിനുകൾക്ക് ഡാറ്റ ലഭ്യമല്ല. ജാവ സ്‌ക്രിപ്റ്റിലെ മറ്റുള്ളവയെപ്പോലെ ലോജിക്കൽ, ഡൈനാമിക് ആയി മാറുന്ന ഡാറ്റ സെർച്ച് റോബോട്ടിന് ദൃശ്യമാകില്ല.
പദ്ധതിയുടെ സങ്കീർണ്ണത തന്നെ. കാലക്രമേണ, ഒരു സേവനത്തിൽ AJAX പതിവായി ഉപയോഗിക്കുന്നതിനാൽ, പ്രോഗ്രാം കോഡും പ്രോജക്റ്റിന്റെ സ്കെയിലുമായി പ്രവർത്തിക്കുന്നതിൽ ബുദ്ധിമുട്ടുകൾ ഉണ്ടാകാം. അതിനാൽ, തുടക്കത്തിൽ തന്നെ AJAX ഉപയോഗം പരിമിതപ്പെടുത്തുകയും തിരഞ്ഞെടുത്ത് ഉപയോഗിക്കുകയും വേണം.
അഭ്യർത്ഥനകളുടെ എണ്ണം ട്രാക്ക് ചെയ്യുന്നത് അസാധ്യമാണ്. സാധാരണ ബ്രൗസർ ടൂളുകളുമായി AJAX അയഞ്ഞ രീതിയിൽ സംയോജിപ്പിച്ചിരിക്കുന്നതിനാൽ, ഡൈനാമിക് ഘടകങ്ങളുടെ ഉപയോഗം ട്രാക്ക് ചെയ്യാനോ അവലോകനം ചെയ്യാനോ കഴിയില്ല. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ മറ്റ് സ്ക്രിപ്റ്റുകൾ ഉപയോഗിക്കേണ്ടതുണ്ട്.

സന്ദർശകരുമായി വേഗത്തിലും കാര്യക്ഷമമായും ഇടപഴകുന്നതിന് മിക്ക ആധുനിക വെബ്‌സൈറ്റുകളും AJAX എന്ന സാങ്കേതികവിദ്യ ഉപയോഗിക്കുന്നു. പശ്ചാത്തലത്തിലുള്ള ഒരു സെർവറിൽ നിന്ന് ഡാറ്റ ലഭ്യമാക്കുന്നതിനുള്ള വളരെ ജനപ്രിയമായ ഒരു രീതിയായി AJAX മാറിയിരിക്കുന്നു ഡൈനാമിക് അപ്ഡേറ്റ്പേജുകൾ.

ആദ്യം മുതൽ AJAX നടപ്പിലാക്കാൻ JavaScript കോഡ് വികസിപ്പിക്കുന്നത് വളരെ സമയമെടുക്കുന്നതും മടുപ്പിക്കുന്നതുമായ ഒരു പ്രക്രിയയാണ്. എന്നിരുന്നാലും, jQuery ഉൾപ്പെടെയുള്ള നിരവധി JavaScript ലൈബ്രറികൾക്ക്, വെബ്‌സൈറ്റുകൾ നിർമ്മിക്കുന്നത് എളുപ്പവും വേഗത്തിലാക്കുന്നതുമായ ഒരു കൂട്ടം രീതികളുടെയും പ്രവർത്തനങ്ങളുടെയും രൂപത്തിൽ AJAX-ന്റെ മികച്ച ഉയർന്ന തലത്തിലുള്ള നിർവ്വഹണങ്ങളുണ്ട്.

ഈ ട്യൂട്ടോറിയൽ പരമ്പരയിൽ, jQuery ഉപയോഗിച്ച് AJAX അഭ്യർത്ഥനകൾ നിർമ്മിക്കുന്നതിനുള്ള അടിസ്ഥാനകാര്യങ്ങൾ ഞങ്ങൾ നോക്കാം. ഇനിപ്പറയുന്ന വിഷയങ്ങൾ ഉൾപ്പെടുത്തും:

• എന്താണ് AJAX സാങ്കേതികവിദ്യ? അതെങ്ങനെയാണ് പ്രവര്ത്തിക്കുന്നത്? അതിന്റെ ഗുണങ്ങൾ എന്തൊക്കെയാണ്?
• jQuery ഉപയോഗിച്ച് വിവിധ തരത്തിലുള്ള AJAX അഭ്യർത്ഥനകൾ എങ്ങനെ ഉണ്ടാക്കാം?
• AJAX അഭ്യർത്ഥനകൾ ഉപയോഗിച്ച് സെർവറിലേക്ക് ഡാറ്റ അയയ്ക്കുന്നു.
• സെർവറിൽ നിന്നുള്ള AJAX പ്രതികരണങ്ങളിൽ നിന്ന് ഡാറ്റ പ്രോസസ്സ് ചെയ്യുകയും എക്‌സ്‌ട്രാക്റ്റുചെയ്യുകയും ചെയ്യുന്നു.
• jQuery-ൽ AJAX പ്രോസസ്സിംഗ് ഇച്ഛാനുസൃതമാക്കുന്നതും സ്ഥിരസ്ഥിതി ക്രമീകരണങ്ങൾ മാറ്റുന്നതും എങ്ങനെ?

ശ്രദ്ധിക്കുക: ജാവാസ്ക്രിപ്റ്റിന്റെ ക്ലയന്റ് ഭാഗത്താണ് ട്യൂട്ടോറിയലുകൾ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നത്. എന്നാൽ സെർവർ സൈഡ് വികസിപ്പിക്കുന്നതും വളരെ ലളിതമാണ്. കൂടുതൽ പൂർണ്ണമായ വിവരങ്ങൾക്ക്, നിങ്ങൾ PHP പോലുള്ള സെർവർ സൈഡ് പ്രോഗ്രാമിംഗ് ഭാഷകളിലെ മെറ്റീരിയലുകൾ പഠിക്കണം.

എന്താണ് AJAX, അത് എങ്ങനെ ഉപയോഗപ്രദമാണ്?

സന്ദർശകന്റെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്ന JavaScript കോഡ് വെബ് സെർവറുമായി അസമന്വിതമായി, അതായത് പശ്ചാത്തലത്തിൽ ആശയവിനിമയം നടത്തുന്ന ഒരു വെബ് ആപ്ലിക്കേഷൻ ഡെവലപ്മെന്റ് ടെക്നിക്കാണ് AJAX. വിപരീതമായി സാധാരണ വെബ്അപേക്ഷകൾ ഇപ്രകാരമാണ്:

• ഒരു സാധാരണ വെബ് പേജിൽ ലിങ്കുകളോ ഫോമുകളോ അടങ്ങിയിരിക്കുന്നു, അത് ക്ലിക്കുചെയ്യുമ്പോഴോ സമർപ്പിക്കുമ്പോഴോ, വെബ് സെർവറിൽ ഒരു പുതിയ URL-ലേക്ക് ഒരു അഭ്യർത്ഥന സൃഷ്ടിക്കുന്നു. സെർവർ പൂർണ്ണമായും പുതിയൊരു HTML പേജ് അയയ്‌ക്കുന്നു, അത് ബ്രൗസർ റെൻഡർ ചെയ്യുന്നു, അത് മാറ്റിസ്ഥാപിക്കുന്നു യഥാർത്ഥ പേജ്. ഈ സമീപനം വളരെയധികം സമയമെടുക്കുകയും സന്ദർശകനെ ദോഷകരമായി ബാധിക്കുകയും ചെയ്യുന്നു, കാരണം പുതിയ പേജ് ലോഡുചെയ്യാൻ കാത്തിരിക്കേണ്ടി വരും.
• AJAX സാങ്കേതികവിദ്യ ഉപയോഗിക്കുമ്പോൾ, സെർവറിലെ ഒരു URL-ലേക്ക് JavaScript കോഡ് ഒരു അഭ്യർത്ഥന നടത്തുന്നു. കോഡിന് അഭ്യർത്ഥനയ്‌ക്കൊപ്പം ഡാറ്റയും അയയ്‌ക്കാൻ കഴിയും. ജാവാസ്ക്രിപ്റ്റ് കോഡ് സെർവറിന്റെ പ്രതികരണം പ്രോസസ്സ് ചെയ്യുകയും അതിനനുസരിച്ച് പ്രവർത്തിക്കുകയും ചെയ്യുന്നു. ഉദാഹരണത്തിന്, മടങ്ങിയ ഡാറ്റ ഉപയോഗിച്ച് കണക്കുകൂട്ടലുകൾ നടത്താം, പേജിൽ ഒരു വിജറ്റ് ചേർക്കാനോ അപ്ഡേറ്റ് ചെയ്യാനോ കഴിയും, അല്ലെങ്കിൽ സെർവറിലെ ഡാറ്റാബേസ് അപ്ഡേറ്റ് ചെയ്യുന്നതിനെക്കുറിച്ച് സന്ദർശകന് ഒരു സന്ദേശം അയയ്ക്കാം.

AJAX അഭ്യർത്ഥന പശ്ചാത്തലത്തിൽ പ്രവർത്തിക്കുന്നതിനാൽ, അഭ്യർത്ഥന പ്രോസസ്സ് ചെയ്യുമ്പോൾ JavaScript കോഡിന് (സന്ദർശകനും) പേജുമായി സംവദിക്കുന്നത് തുടരാനാകും. സന്ദർശകനിൽ നിന്ന് ഈ പ്രക്രിയ മറച്ചിരിക്കുന്നു, അവൻ നിലവിൽ കാണുന്ന പേജ് വിടേണ്ടതില്ല. ഈ സമീപനം AJAX പേജുകൾ പ്രവർത്തിക്കാൻ വളരെ മനോഹരമാക്കുന്നു.

AJAX-ന്റെ അടിസ്ഥാന പോയിന്റ് JavaScript XMLHttpRequest ഒബ്‌ജക്‌റ്റാണ്. സെർവറിലേക്ക് AJAX അഭ്യർത്ഥനകൾ അയയ്‌ക്കുമ്പോഴും പശ്ചാത്തലത്തിൽ പ്രതികരണങ്ങൾ പ്രോസസ്സ് ചെയ്യുമ്പോഴും ഉപയോഗിക്കാൻ കഴിയുന്ന open() , send() and onreadystatechange() എന്നിങ്ങനെയുള്ള നിരവധി രീതികൾ ഇത് നൽകുന്നു.

ക്രോസ് ബ്രൗസർ വികസനം ജാവാസ്ക്രിപ്റ്റ് കോഡ് AJAX തികച്ചും മടുപ്പിക്കുന്ന ഒരു പ്രക്രിയയാണ്. ഭാഗ്യവശാൽ, jQuery നിങ്ങൾക്ക് ഉപയോഗിക്കാൻ എളുപ്പമുള്ള നിരവധി AJAX രീതികൾ നൽകുന്നു, അത് ധാരാളം താഴ്ന്ന നിലയിലുള്ള പ്രവർത്തനങ്ങളെ അമൂർത്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

കൂടുതൽ ജിജ്ഞാസയുള്ളവർക്ക്, AJAX എന്ന വാക്ക് പദപ്രയോഗത്തിന്റെ ആദ്യ അക്ഷരങ്ങളുടെ ചുരുക്കമാണ്. ആംഗലേയ ഭാഷ"എ സിൻക്രണസ് ജെ അവസ്ക്രിപ്റ്റ് എ ആൻഡ് എക്സ് എംഎൽ" ( അസിൻക്രണസ് ജാവാസ്ക്രിപ്റ്റ്കൂടാതെ XML). എന്നിരുന്നാലും, ഈ പദം തെറ്റിദ്ധരിപ്പിക്കുന്നതാകാം - അഭ്യർത്ഥന അസമന്വിതമായിരിക്കണമെന്നില്ല കൂടാതെ ഡാറ്റ അയയ്‌ക്കാൻ XML ഉപയോഗിക്കേണ്ടതില്ല.

$.get() ഉപയോഗിച്ച് ഒരു GET അഭ്യർത്ഥന നടത്തുന്നു

jQuery $.get() രീതി ഒരു ലളിതമായ AJAX അഭ്യർത്ഥന നടത്താൻ എളുപ്പവും സൗകര്യപ്രദവുമായ മാർഗ്ഗം നൽകുന്നു. ഇത് ഉപയോഗിച്ച് അഭ്യർത്ഥന നടപ്പിലാക്കുന്നു HTTP രീതി POST രീതിക്ക് പകരം GET (പേജുകളും ചിത്രങ്ങളും പോലുള്ള URL-കൾ വീണ്ടെടുക്കാൻ ഉപയോഗിക്കുന്നു) (ഫോം ഡാറ്റ സമർപ്പിക്കാൻ പരമ്പരാഗതമായി ഇത് ഉപയോഗിക്കുന്നു).

IN ഏറ്റവും ലളിതമായ രൂപംനിങ്ങൾക്ക് ഈ രീതിയെ വിളിക്കാം:

പ്രതികരണം പ്രതീക്ഷിക്കുന്ന ഉറവിടത്തിന്റെ URL ആണ് url. സാധാരണയായി ഇതൊരു സെർവർ സൈഡ് സ്ക്രിപ്റ്റാണ്, അത് ചില പ്രവർത്തനങ്ങൾ നടത്തുകയും ചില ഡാറ്റ തിരികെ നൽകുകയും ചെയ്യും:

$.get("http://example.com/getForecast.php");

നിങ്ങൾക്ക് ഒരു സ്റ്റാറ്റിക് ഡോക്യുമെന്റ് അഭ്യർത്ഥിക്കാൻ കഴിയുമെങ്കിലും:

$.get("http://example.com/mypage.html");

ഒരു URL അഭ്യർത്ഥിക്കുമ്പോൾ, അഭ്യർത്ഥനയ്‌ക്കൊപ്പം നിങ്ങൾക്ക് ഡാറ്റ അയയ്‌ക്കാൻ കഴിയും. ഒരു സാധാരണ GET അഭ്യർത്ഥന പോലെ, നിങ്ങൾക്ക് അന്വേഷണ സ്ട്രിംഗിൽ ഡാറ്റ കൈമാറാൻ കഴിയും:

$.get("http://example.com/getForecast.php?city=rome&date=20120318");

$.get() രീതിയിലേക്ക് രണ്ടാമത്തെ പാരാമീറ്ററായി ഡാറ്റാ ഒബ്‌ജക്‌റ്റ് കൈമാറുന്നതാണ് ശരിയായ മാർഗം. ഡാറ്റാ ഒബ്‌ജക്റ്റിൽ പ്രോപ്പർട്ടി നാമം/വസ്തു മൂല്യ ജോഡികളുടെ രൂപത്തിൽ വിവരങ്ങൾ അടങ്ങിയിരിക്കണം. ഉദാഹരണത്തിന്:

Var ഡാറ്റ = (നഗരം: "റോം", തീയതി: "20120318" ); $.get("http://example.com/getForecast.php", ഡാറ്റ);

പകരമായി, നിങ്ങൾക്ക് $.get() രീതിയിലേക്ക് ഡാറ്റ ഒരു സ്ട്രിംഗ് ആയി കൈമാറാം:

Var ഡാറ്റ = "നഗരം=റോം&തീയതി=20120318"; $.get("http://example.com/getForecast.php", ഡാറ്റ);

സെർവറിൽ നിന്ന് ഡാറ്റ സ്വീകരിക്കുന്നു

ഇതുവരെ, സെർവറിലേക്ക് അഭ്യർത്ഥനകൾ അയയ്‌ക്കാൻ മാത്രം $.get() ഉപയോഗിക്കുന്നതിന്റെ ഉദാഹരണങ്ങൾ ഞങ്ങൾ പരിശോധിച്ചു, സെർവർ സൈഡ് സ്‌ക്രിപ്റ്റ് സൃഷ്‌ടിച്ചേക്കാവുന്ന ഏത് പ്രതികരണവും അവഗണിച്ചു. എന്നാൽ മിക്ക കേസുകളിലും, നിങ്ങളുടെ JavaScript കോഡ് ഒരു സെർവർ സൈഡ് സ്ക്രിപ്റ്റിൽ നിന്നുള്ള പ്രതികരണത്തിനായി കാത്തിരിക്കുകയും ലഭിച്ച ഡാറ്റ പ്രോസസ്സ് ചെയ്യുകയും ചെയ്യും.

AJAX അഭ്യർത്ഥന അസമന്വിതമാണ്, അതായത് ബാക്കിയുള്ള JavaScript കോഡ് പ്രവർത്തിക്കുന്നത് തുടരുമ്പോൾ അത് പശ്ചാത്തലത്തിൽ പ്രവർത്തിക്കുന്നു. അപ്പോൾ, അഭ്യർത്ഥന പൂർത്തിയാകുമ്പോൾ സെർവറിൽ നിന്ന് ഒരു പ്രതികരണം എങ്ങനെ ലഭിക്കും?

നിങ്ങൾ ഒരു കോൾബാക്ക് ഫംഗ്‌ഷൻ എഴുതേണ്ടതുണ്ട്, അത് AJAX അഭ്യർത്ഥന പൂർത്തിയാകുമ്പോൾ സെർവർ ഒരു പ്രതികരണം അയയ്‌ക്കുമ്പോൾ സ്വയമേവ നിർവ്വഹിക്കും. കുറഞ്ഞത്, നിങ്ങളുടെ ഫംഗ്‌ഷൻ സെർവർ നൽകുന്ന ഡാറ്റയെ അതിന്റെ ആദ്യ ആർഗ്യുമെന്റായി അംഗീകരിക്കണം:

ഫംഗ്‌ഷൻ myCallback(returnedData) ( // ഞങ്ങൾ ഡാറ്റ റിട്ടേൺഡാറ്റ പ്രോസസ്സ് ചെയ്യുന്നു )

കോൾബാക്ക് ഫംഗ്‌ഷൻ സൃഷ്‌ടിച്ചുകഴിഞ്ഞാൽ, നിങ്ങൾക്ക് അത് മൂന്നാമത്തെ ആർഗ്യുമെന്റായി $.get() രീതിയിലേക്ക് കൈമാറാം:

Var ഡാറ്റ = (നഗരം: "റോം", തീയതി: "20120318" ); $.get("http://example.com/getForecast.php", ഡാറ്റ, myCallback);

പ്രതികരണ ഡാറ്റ തരം നിർണ്ണയിക്കുന്നു

സാധാരണയായി, സെർവർ വശം XML, JSON, JavaScript അല്ലെങ്കിൽ HTML എന്നിവയുൾപ്പെടെ നിരവധി പൊതുവായ ഫോർമാറ്റുകളിലൊന്നിൽ ഡാറ്റ കൈമാറുന്നു. സ്ഥിരസ്ഥിതിയായി, jQuery ഏറ്റവും കൂടുതൽ നിർണ്ണയിക്കാൻ ശ്രമിക്കുന്നു അനുയോജ്യമായ ഫോർമാറ്റ്അതനുസരിച്ച് ഡാറ്റ പാഴ്‌സ് ചെയ്യുക. എന്നാൽ ഫോർമാറ്റ് വ്യക്തമായി നിർവ്വചിക്കുന്നതാണ് നല്ലത്.

ഫോർമാറ്റ് വ്യക്തമാക്കുന്നതിന്, നിങ്ങൾ നാലാമത്തെ ആർഗ്യുമെന്റ് $.get() രീതിയിലേക്ക് കൈമാറേണ്ടതുണ്ട്. ഈ ആർഗ്യുമെന്റ് ഇനിപ്പറയുന്ന ലിസ്റ്റിൽ നിന്നുള്ള ഒരു സ്ട്രിംഗ് ആകാം:

• "xml"
• "json"
• "സ്ക്രിപ്റ്റ്"
• "html"

ഉദാഹരണത്തിന്, സെർവർ സ്‌ക്രിപ്റ്റ് JSON ഫോർമാറ്റിൽ ഡാറ്റ നൽകുന്നു എന്ന് നിങ്ങൾക്കറിയാമെങ്കിൽ, നിങ്ങൾ $.get() രീതിയെ ഇതുപോലെ വിളിക്കുന്നു:

$.get("http://example.com/getForecast.php", ഡാറ്റ, myCallback, "json");

$.get() രീതി ഉപയോഗിക്കുന്നതിനുള്ള ഉദാഹരണം

$.get() രീതി ഉപയോഗിച്ച് ഒരു AJAX അഭ്യർത്ഥന സൃഷ്ടിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം ഇതാ ലളിതമായ പ്രോസസ്സിംഗ്ഉത്തരം. ഉദാഹരണം പ്രവർത്തിക്കുന്നതിന്, ഇനിപ്പറയുന്ന ടെക്‌സ്‌റ്റ് അടങ്ങിയ getForecast.txt എന്ന സെർവറിൽ നിങ്ങൾ ഒരു ലളിതമായ ടെക്‌സ്‌റ്റ് ഫയൽ സൃഷ്‌ടിക്കേണ്ടതുണ്ട്:

( "നഗരം": "വാസ്യുകി", "തീയതി": "മാർച്ച് 18, 2012", "പ്രവചനം": "പൊട്ടുന്ന തണുപ്പും ചെളിയും", "മാക്സ് ടെമ്പ്": +1 )

സെർവറിലെ കാലാവസ്ഥാ പ്രവചന സ്‌ക്രിപ്‌റ്റ് സൃഷ്‌ടിക്കാൻ കഴിയുന്ന JSON ഫോർമാറ്റിലുള്ള പ്രതികരണത്തെ ഈ ഫയൽ അനുകരിക്കും.

തുടർന്ന് getForecast.txt-ന്റെ അതേ ഫോൾഡറിൽ ഞങ്ങൾ showForecast.html പേജ് സൃഷ്ടിക്കുന്നു:

കാലാവസ്ഥാ പ്രവചനം $(function() ( $("#getForecast").click(function() ( var data = ( city: "Vasyuki", date: "20120318" ); $.get("getForecast.txt", ഡാറ്റ , വിജയം, "json"); )); ഫംഗ്‌ഷൻ വിജയം(പ്രവചന ഡാറ്റ) ( " + forecastData.date എന്നതിനായുള്ള പ്രവചനം var പ്രവചനം = forecastData.city + "; പ്രവചനം += ": " + forecastData. forecast + ". പരമാവധി താപനില: + forecastData.maxTemp + "C"; അലേർട്ട്(പ്രവചനം); ) ); കാലാവസ്ഥാ പ്രവചനം നേടുക

ബ്രൗസറിൽ showForecast.html തുറന്ന് "കാലാവസ്ഥാ പ്രവചനം നേടുക" ബട്ടൺ ക്ലിക്ക് ചെയ്യുക. സന്ദേശ വിൻഡോയിൽ ഞങ്ങളുടെ സെർവറിൽ നിന്ന് കാലാവസ്ഥാ പ്രവചനം ലഭിക്കും.

കോഡ് എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നത് ഇതാ:

showForecast.html-ൽ "Get Weather Forecast" എന്ന ബട്ടൻ ഘടകം അടങ്ങിയിരിക്കുന്നു getForecast ID .

പേജ് ലോഡുചെയ്‌ത ഉടൻ തന്നെ പേജിന്റെ മുകളിലുള്ള JavaScript എക്‌സിക്യൂട്ട് ചെയ്യപ്പെടുകയും DOM തയ്യാറായ നിലയിലായിരിക്കുകയും ചെയ്യും.

JavaScript കോഡ് ആദ്യം ഒരു ക്ലിക്ക് ഇവന്റ് ഹാൻഡ്‌ലറിനെ #getForecast ബട്ടണിലേക്ക് ബന്ധിപ്പിക്കുന്നു. ഈ ഹാൻഡ്ലർ getForecast.txt-ലേക്ക് ഒരു AJAX GET അഭ്യർത്ഥന നടത്തുന്നു, പ്രവചനത്തിനായി നഗരത്തിന്റെ പേരും തീയതിയും നൽകുന്നു. ഒരു വിജയം() കോൾബാക്ക് ഫംഗ്‌ഷനും നിർവചിച്ചിരിക്കുന്നു, അഭ്യർത്ഥന പൂർത്തിയാകുമ്പോൾ അത് നടപ്പിലാക്കും. സെർവർ നൽകുന്ന ഡാറ്റയുടെ ഫോർമാറ്റ് JSON എന്ന് നിർവ്വചിച്ചിരിക്കുന്നു.

getForecast.txt ഫയൽ JSON ഫോർമാറ്റിൽ ബ്രൗസറിലേക്ക് പ്രവചന ഡാറ്റ നൽകുന്നു.

വിജയം() ഫംഗ്‌ഷനെ വിളിക്കുന്നു. getForecast.txt-ൽ നിന്ന് ലഭിച്ച JSON ഡാറ്റ jQuery പാഴ്‌സ് ചെയ്യുകയും ഒരു JavaScript ഒബ്‌ജക്‌റ്റാക്കി മാറ്റുകയും ഫംഗ്‌ഷനിലേക്ക് കൈമാറുകയും ചെയ്യുന്നു.

ഫംഗ്‌ഷൻ ഒരു പ്രവചന ഡാറ്റാ ഒബ്‌ജക്‌റ്റ് നൽകുകയും നഗരത്തിന്റെ പേര്, പ്രവചനം, താപനില എന്നിവയുൾപ്പെടെ ഒബ്‌ജക്റ്റിന്റെ നിരവധി സവിശേഷതകൾ ഉൾക്കൊള്ളുന്ന ഒരു സന്ദേശം പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു.

$.get() രീതി ഉപയോഗിച്ച് ഒരു AJAX അഭ്യർത്ഥന എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് ഒരു ലളിതമായ, കുറച്ച് വരി ഉദാഹരണം കാണിക്കുന്നു.

ഈ ലേഖനം AJAX-നെ സവിശേഷതയിലും ഉദാഹരണ തലത്തിലും വിവരിക്കുന്നു. അസിൻക്രണസ് ഇന്ററാക്ഷന്റെ സവിശേഷതകളും ഉപയോഗത്തിന്റെ ഉദാഹരണങ്ങളും പരിഗണിക്കപ്പെടുന്നു, പക്ഷേ കുറഞ്ഞത് സാങ്കേതിക വിശദാംശങ്ങളോടെ.

അജാക്സ് എന്താണെന്നും അത് എന്തിനുവേണ്ടിയാണ് ഉപയോഗിക്കുന്നതെന്നും മനസിലാക്കാൻ ഇത് ഉപയോഗപ്രദമാകുമെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു.

എന്താണ് AJAX? ഉദാഹരണം നടപ്പിലാക്കൽ.

AJAX, അല്ലെങ്കിൽ കൂടുതൽ, എസിൻക്രണസ് ജെഅവാസ്ക്രിപ്റ്റ് എ nd എക്സ്പേജുകൾ റീലോഡ് ചെയ്യാതെ സെർവറുമായി സംവദിക്കുന്നതിനുള്ള ഒരു സാങ്കേതികവിദ്യയാണ് ml.

ഇതുമൂലം, പ്രതികരണ സമയം കുറയുകയും ഇന്ററാക്ടിവിറ്റിയുടെ കാര്യത്തിൽ വെബ് ആപ്ലിക്കേഷൻ ഡെസ്ക്ടോപ്പിനെ കൂടുതൽ അനുസ്മരിപ്പിക്കുകയും ചെയ്യുന്നു.

AJAX സാങ്കേതികവിദ്യ, അതിന്റെ പേരിലെ ആദ്യ അക്ഷരം സൂചിപ്പിക്കുന്നത് പോലെ, അസമന്വിതമാണ്, അതായത് ബ്രൗസറിന്, ഒരു അഭ്യർത്ഥന അയച്ചാൽ, എന്തും ചെയ്യാൻ കഴിയും, ഉദാഹരണത്തിന്, ഒരു സന്ദേശം പ്രദർശിപ്പിക്കുക
പ്രതികരണത്തിനായി കാത്തിരിക്കുക, പേജ് സ്ക്രോൾ ചെയ്യുക തുടങ്ങിയവ.

മുകളിലുള്ള ഉദാഹരണത്തിലെ ബട്ടൺ കോഡ് ഇതാ:

ക്ലിക്ക് ചെയ്യുമ്പോൾ, അത് വോട്ട് ഫംഗ്‌ഷനെ വിളിക്കുന്നു, അത് സെർവറിലേക്ക് ഒരു അഭ്യർത്ഥന അയയ്‌ക്കുന്നു, പ്രതികരണത്തിനായി കാത്തിരിക്കുന്നു, തുടർന്ന് ബട്ടണിന് താഴെയുള്ള ഡിവിയിൽ അതിനെക്കുറിച്ച് ഒരു സന്ദേശം പ്രദർശിപ്പിക്കുന്നു:

സെർവർ പ്രതികരണം ഇവിടെയായിരിക്കും

സെർവറുമായി ഡാറ്റ കൈമാറ്റം ചെയ്യുന്നതിന്, ഒരു പ്രത്യേക XmlHttpRequest ഒബ്‌ജക്റ്റ് ഉപയോഗിക്കുന്നു, അതിന് ഒരു അഭ്യർത്ഥന അയയ്‌ക്കാനും സെർവറിൽ നിന്ന് പ്രതികരണം സ്വീകരിക്കാനും കഴിയും. നിങ്ങൾക്ക് അത്തരമൊരു ഒബ്ജക്റ്റ് ക്രോസ്-ബ്രൗസർ സൃഷ്ടിക്കാൻ കഴിയും, ഉദാഹരണത്തിന്, ഇതുപോലെ:

ഫംഗ്ഷൻ getXmlHttp())( var xmlhttp; ശ്രമിക്കുക ( xmlhttp = പുതിയ ActiveXObject("Msxml2.XMLHTTP"); ) ക്യാച്ച് (ഇ) (ശ്രമിക്കുക ( xmlhttp = പുതിയ ActiveXObject("Microsoft.XMLHTTP") ക്യാച്ച് (http) ( = തെറ്റായ;

XmlHttpRequest ഉപയോഗിച്ച് AJAX നടപ്പിലാക്കുന്നതിന്റെ വിശദാംശങ്ങളും സെർവറുമായി ആശയവിനിമയം നടത്തുന്ന വിഭാഗത്തിൽ നിങ്ങൾക്ക് കൂടുതൽ വായിക്കാം.

ഞങ്ങൾ ഇതിനെക്കുറിച്ച് ഇവിടെ താമസിക്കില്ല, വോട്ട് ഫംഗ്ഷനിലേക്ക് പോകുക:

// ജാവാസ്ക്രിപ്റ്റ് വോട്ടിംഗ് കോഡ് ഉദാഹരണം ഫംഗ്‌ഷൻ വോട്ടിൽ നിന്ന് ( നിർവ്വഹണ പുരോഗതി var statusElem = document.getElementById("vote_status") req.onreadystatechange = ഫംഗ്‌ഷൻ() ( // (req.readyState == 4) എങ്കിൽ (req.readyState == 4) ( // അഭ്യർത്ഥന പൂർത്തിയായെങ്കിൽ, സെർവർ പ്രതികരണം ലഭിക്കുമ്പോൾ onreadystatechange സജീവമാകും statusElem.innerHTML = req.statusText // കാണിക്കുക സ്റ്റാറ്റസ് (കണ്ടെത്തിയില്ല, ശരി..) if(req.status == 200) ( // സ്റ്റാറ്റസ് 200 ആണെങ്കിൽ (ശരി) - ഉപയോക്തൃ അലേർട്ടിന് ഒരു പ്രതികരണം നൽകുക(" സെർവർ പ്രതികരണം: "+req.responseText); ) // ഇവിടെ നിങ്ങൾക്ക് അഭ്യർത്ഥന പിശക് കൈകാര്യം ചെയ്യലിനൊപ്പം മറ്റൊന്നും ചേർക്കാൻ കഴിയും) ) // (3) req.open("GET", "/ajax_intro/vote.php", കണക്ഷൻ വിലാസം സജ്ജമാക്കുക. true); // അഭ്യർത്ഥന ഒബ്‌ജക്റ്റ് തയ്യാറാക്കി: വിലാസം വ്യക്തമാക്കിയിരിക്കുന്നു, കൂടാതെ സെർവർ പ്രതികരണം പ്രോസസ്സ് ചെയ്യുന്നതിന് ഓൺറെഡിസ്റ്റേറ്റ് ചേഞ്ച് ഫംഗ്‌ഷൻ സൃഷ്‌ടിക്കുകയും // (4) req.send(null); // അഭ്യർത്ഥന അയയ്ക്കുക // (5) statusElem.innerHTML = "സെർവർ പ്രതികരണത്തിനായി കാത്തിരിക്കുന്നു..." )

വോട്ട് ഉപയോഗിച്ചുള്ള എക്സിക്യൂഷൻ ഫ്ലോ വളരെ സാധാരണമാണ്, ഇതുപോലെ കാണപ്പെടുന്നു:

ഫംഗ്‌ഷൻ ഒരു XmlHttpRequest ഒബ്‌ജക്‌റ്റ് സൃഷ്‌ടിക്കുന്നു

onreadystatechange-ലേക്ക് സെർവർ റെസ്‌പോൺസ് ഹാൻഡ്‌ലറിനെ നിയോഗിക്കുന്നു

തുറക്കുന്ന കണക്ഷൻ തുറക്കുന്നു

അയയ്‌ക്കുന്ന കോൾ ഉപയോഗിച്ച് ഒരു അഭ്യർത്ഥന അയയ്‌ക്കുന്നു (സെർവർ പ്രതികരണം ലഭിക്കുന്നത് ഓൺറെഡിസ്റ്റേറ്റ് ചേഞ്ച് ഫംഗ്‌ഷനാണ്, അത് അസമന്വിതമായി പ്രവർത്തിക്കുന്നു)

സന്ദർശകനെ ഒരു പ്രോസസ് സ്റ്റാറ്റസ് ഇൻഡിക്കേറ്റർ കാണിക്കുന്നു

AJAX അഭ്യർത്ഥനയെ അഭിസംബോധന ചെയ്യുന്ന സെർവർ ഹാൻഡ്‌ലർ (ഉദാഹരണത്തിൽ ഇത് vote.php ആണ്) ഇതിൽ നിന്ന് വ്യത്യസ്തമല്ല. സാധാരണ പേജ്. XmlHttpRequest അയച്ച AJAX അഭ്യർത്ഥന ഒരു സാധാരണ അഭ്യർത്ഥനയിൽ നിന്ന് വ്യത്യസ്തമല്ല.

സെർവർ നൽകുന്ന ടെക്‌സ്‌റ്റ് HTML ആയി കാണിക്കില്ല, മറിച്ച് ഓൺറെഡിസ്റ്റേറ്റ് ചേഞ്ച് ഫംഗ്‌ഷൻ ഉപയോഗിച്ച് റീഡ് ചെയ്യുകയും പ്രോസസ്സ് ചെയ്യുകയും ചെയ്യുന്നു.

AJAX എന്നതിന്റെ അർത്ഥം സാങ്കേതികവിദ്യകളെ സമന്വയിപ്പിക്കുക എന്നതാണ്

AJAX സാങ്കേതികവിദ്യ ഇവയുടെ സംയോജനം ഉപയോഗിക്കുന്നു:

• (X) HTML, വിവരങ്ങൾ അവതരിപ്പിക്കുന്നതിനും സ്‌റ്റൈലിങ്ങിനുമുള്ള CSS
• DOM-മോഡൽ, ഡൈനാമിക് ഡിസ്പ്ലേയും വിവരങ്ങളുമായുള്ള ആശയവിനിമയവും നൽകുന്നതിന് ക്ലയന്റ് ഭാഗത്ത് ജാവാസ്ക്രിപ്റ്റ് നടത്തുന്ന പ്രവർത്തനങ്ങൾ
• XMLHttpഒരു വെബ് സെർവറുമായുള്ള അസമന്വിത ആശയവിനിമയത്തിനുള്ള അഭ്യർത്ഥന. ചില AJAX ചട്ടക്കൂടുകളിലും ചില സാഹചര്യങ്ങളിലും, XMLHttpRequest-ന് പകരം ഒരു IFrame, SCRIPT ടാഗ് അല്ലെങ്കിൽ സമാനമായ മറ്റ് ഗതാഗതം ഉപയോഗിക്കുന്നു.
• JSON പലപ്പോഴും ഡാറ്റാ എക്സ്ചേഞ്ചിനായി ഉപയോഗിക്കുന്നു, എന്നാൽ സമ്പന്നമായ HTML, ടെക്സ്റ്റ്, XML, കൂടാതെ ചില EBML എന്നിവയുൾപ്പെടെ ഏത് ഫോർമാറ്റും പ്രവർത്തിക്കും.

ഒരു സാധാരണ AJAX ആപ്ലിക്കേഷനിൽ കുറഞ്ഞത് രണ്ട് ഭാഗങ്ങളെങ്കിലും അടങ്ങിയിരിക്കുന്നു.

ആദ്യത്തേത് ബ്രൗസറിൽ പ്രവർത്തിക്കുകയും സാധാരണയായി ജാവാസ്ക്രിപ്റ്റിൽ എഴുതുകയും ചെയ്യുന്നു, രണ്ടാമത്തേത് സെർവറിൽ ആണ്, ഉദാഹരണത്തിന്, റൂബി, ജാവ അല്ലെങ്കിൽ പിഎച്ച്പി എന്നിവയിൽ എഴുതിയിരിക്കുന്നു.

XMLHttpRequest (അല്ലെങ്കിൽ മറ്റ് ഗതാഗതം) വഴി ഈ രണ്ട് ഭാഗങ്ങൾക്കിടയിൽ ഡാറ്റ കൈമാറ്റം ചെയ്യപ്പെടുന്നു.

AJAX ഉപയോഗിച്ച് എനിക്ക് എന്തുചെയ്യാൻ കഴിയും?

അജാക്സിന്റെ പോയിന്റ് ഇന്ററാക്റ്റിവിറ്റിയും വേഗത്തിലുള്ള പ്രതികരണ സമയവുമാണ്.

ചെറിയ നിയന്ത്രണങ്ങൾ

ഒന്നാമതായി, അടിസ്ഥാന പ്രവർത്തനങ്ങളുമായി ബന്ധപ്പെട്ട ചെറിയ ഘടകങ്ങൾക്ക് AJAX ഉപയോഗപ്രദമാണ്: കാർട്ടിലേക്ക് ചേർക്കുക, സബ്സ്ക്രൈബ് ചെയ്യുക തുടങ്ങിയവ.

സെർവറിൽ നിന്നുള്ള ഡാറ്റയുടെ ഡൈനാമിക് ലോഡിംഗ്.

ഉദാഹരണത്തിന്, വികസിക്കുമ്പോൾ നോഡുകൾ ലോഡ് ചെയ്യുന്ന ഒരു മരം.

പ്രത്യക്ഷപ്പെട്ട സമയത്ത്, അത് തുറന്നിരുന്നു തപാൽ സേവനംഇനിപ്പറയുന്ന സവിശേഷതകൾക്കായി AJAX ഉപയോഗിക്കുന്നു.

• സമർപ്പിക്കുന്നതിന് മുമ്പ് ഫോം ഇൻപുട്ട് പിശകുകൾ പരിശോധിക്കുന്നു

  ഉപയോക്തൃനാമം സെർവറിലേക്ക് അയച്ചു, പരിശോധനയുടെ ഫലം പേജിലേക്ക് തിരികെ നൽകും.

• "തൽക്ഷണം" ഡൗൺലോഡ്

  മുഴുവൻ ബുദ്ധിമുട്ടുള്ള ഇന്റർഫേസും അപ്‌ഡേറ്റ് ചെയ്യുന്നതിനുപകരം, ഡാറ്റയ്ക്കായി ബ്രൗസർ സെർവറുമായി മാത്രമേ ബന്ധപ്പെടുകയുള്ളൂ

• ഒരു തുറന്ന ഫോൾഡറിലേക്ക് അക്ഷരങ്ങളുടെ സ്വയമേവ "ഡെലിവറി"

  കാലാകാലങ്ങളിൽ സെർവറിലേക്ക് ഒരു അഭ്യർത്ഥന അയയ്‌ക്കുന്നു, പുതിയ അക്ഷരങ്ങൾ വന്നാൽ അവ ബ്രൗസറിൽ ദൃശ്യമാകും.

• സ്വയം പൂർത്തീകരണം

  സ്വീകർത്താവിന്റെ പേരിന്റെ ആദ്യ അക്ഷരങ്ങൾ നൽകിയാൽ മതി, ബാക്കിയുള്ളവ ഡെസ്ക്ടോപ്പ് ആപ്ലിക്കേഷനുകളിലേതുപോലെ സ്വയമേവ പൂർത്തിയാകും.

ഫലം: വ്യാപകമായ ജനപ്രീതി, അക്കൗണ്ട് തുറന്നതുമുതൽ ഉയർന്ന ഡിമാൻഡ്.

സിൻക്രണസ് മോഡൽ വിഎസ് അസിൻക്രണസ് മോഡൽ

പരമ്പരാഗത പ്രോഗ്രാമിംഗിൽ, എല്ലാ പ്രവർത്തനങ്ങളും സിൻക്രണസ് ആണ്, അതായത്, അവ ഒന്നിനുപുറകെ ഒന്നായി നടപ്പിലാക്കുന്നു.

ആപേക്ഷികമായി പറഞ്ഞാൽ, ഞങ്ങൾ ഇതുപോലെ പ്രവർത്തിക്കുന്നു:

ഒരു മത്സ്യബന്ധന വടി ഇട്ടു

അത് കടിക്കാൻ കാത്തിരിക്കുന്നു

ബിറ്റ് - സ്പിന്നിംഗ് വടി മുറുകുന്നത് ഓണാക്കുക

അസമന്വിത സമീപനത്തിലൂടെ ഞങ്ങൾ:

മത്സ്യബന്ധന വടിയിൽ ഞങ്ങൾ ഒരു പ്രത്യേക കടി ഡിറ്റക്ടർ തൂക്കിയിടുന്നു, അത് കടിക്കുമ്പോൾ സ്പിന്നിംഗ് വടി വലിക്കാൻ ആവശ്യപ്പെടുക

ഒരു മത്സ്യബന്ധന വടി ഇട്ടു

ഞങ്ങൾ മറ്റ് കാര്യങ്ങൾ ചെയ്യുന്നു

കടി ഡിറ്റക്ടർ പ്രവർത്തനക്ഷമമാക്കി, സ്പിന്നിംഗ് വടി പിൻവലിക്കാൻ പ്രേരിപ്പിക്കുന്നു

അതായത്, സിൻക്രണസ് കേസിൽ, മത്സ്യബന്ധന വടി നിരന്തരം നമ്മുടെ ശ്രദ്ധ ആകർഷിക്കുന്നു. മത്സ്യം പിടിക്കുന്നത് തുടർച്ചയായ ഒരു പ്രക്രിയയാണ്.

അസിൻക്രണസ് പതിപ്പിൽ, കടിക്കുമ്പോൾ എന്തുചെയ്യണമെന്ന് ഞങ്ങൾ ആദ്യം പ്രോഗ്രാം സജ്ജീകരിച്ചു, തുടർന്ന് പിടിക്കാൻ മത്സ്യബന്ധന വടി താഴ്ത്തി മറ്റ് കാര്യങ്ങളിൽ ഏർപ്പെട്ടു.
ഉദാഹരണത്തിന്, ഞങ്ങൾ അത്തരം 5 മത്സ്യബന്ധന വടികൾ കൂടി ഇൻസ്റ്റാൾ ചെയ്തു.

സിൻക്രണസ് പ്രോഗ്രാമിംഗിനെ അപേക്ഷിച്ച് അസിൻക്രണസ് പ്രോഗ്രാമിംഗ് കൂടുതൽ ബുദ്ധിമുട്ടാണ്, ആദ്യം ഇത് അസാധാരണമാണ്, കാരണം ഇത് മുൻകൂർഎന്ത് പ്രവർത്തിക്കും എന്ന് നൽകിയിരിക്കുന്നു ശേഷം.
അതായത്, "അത് കടിക്കുമ്പോൾ എന്തുചെയ്യണം" എന്ന പ്രോഗ്രാം കടിയേറ്റതിന് മുമ്പ് സജ്ജീകരിച്ചിരിക്കണം, കൂടാതെ റിസർവോയറിൽ മത്സ്യങ്ങളുണ്ടോ എന്ന് പൊതുവെ അറിയില്ല.

അത് എളുപ്പമാക്കാൻ സാങ്കേതിക വിദ്യകളുണ്ട് അസിൻക്രണസ് പ്രോഗ്രാമിംഗ്, ഉദാഹരണത്തിന്, ഒരു മാറ്റിവെച്ച ഡിഫർഡ് ഒബ്ജക്റ്റ് (ട്വിസ്റ്റഡ്, ഡോജോ, മോചികിറ്റ്), എന്നാൽ ഇത് ഒരു പ്രത്യേക ലേഖനത്തിൽ ചർച്ച ചെയ്യും.

AJAX-ൽ സിൻക്രണസ്, അസിൻക്രണസ് മോഡൽ

നമുക്ക് നമ്മുടെ ആടുകളിലേക്ക് മടങ്ങാം: ബ്രൗസർ, സെർവർ, ഡാറ്റാബേസ്.

സിൻക്രണസ് മോഡലിൽ, ബ്രൗസർ സെർവറിലേക്ക് ഒരു അഭ്യർത്ഥന അയച്ച് ഹാംഗ് ചെയ്യുന്നു, എല്ലാം പൂർത്തിയാക്കാൻ കാത്തിരിക്കുന്നു. ആവശ്യമായ ജോലി. സെർവർ ഡാറ്റാബേസിലേക്കുള്ള ചോദ്യങ്ങൾ എക്സിക്യൂട്ട് ചെയ്യുന്നു, പ്രതികരണം ആവശ്യമായ ഫോർമാറ്റിൽ പൊതിഞ്ഞ് ഔട്ട്പുട്ട് ചെയ്യുന്നു. ബ്രൗസർ. ഉത്തരം ലഭിച്ചുകഴിഞ്ഞാൽ, അത് ഷോ ഫംഗ്ഷനെ വിളിക്കുന്നു.

എല്ലാ പ്രക്രിയകളും ഒന്നിനുപുറകെ ഒന്നായി തുടർച്ചയായി നടപ്പിലാക്കുന്നു.

കാത്തിരിപ്പ് സമയത്ത് നെറ്റ്‌വർക്ക് കാലതാമസം ഉൾപ്പെടുത്തിയിട്ടുണ്ട്, ഡയഗ്രാമിൽ ചാരനിറത്തിൽ സൂചിപ്പിച്ചിരിക്കുന്നു.

സിൻക്രണസ് ഡാറ്റ കൈമാറ്റം ചെയ്യുമ്പോൾ ഉപയോക്താവിന് അതേ പേജിൽ മറ്റൊന്നും ചെയ്യാൻ കഴിയില്ല.

IN അസിൻക്രണസ് മോഡൽഅഭ്യർത്ഥന അയച്ചു ("വടി സജ്ജമാക്കി"), നിങ്ങൾക്ക് മറ്റെന്തെങ്കിലും ചെയ്യാൻ കഴിയും. അഭ്യർത്ഥന പൂർത്തിയാകുമ്പോൾ ("ബെക്ക്ഡ്") - അത് മുൻകൂട്ടി സമാരംഭിക്കും
ഒരു സെർവർ സന്ദേശം പ്രദർശിപ്പിക്കുന്നതിനായി പ്രോഗ്രാമർ (“സ്പിന്നിംഗ് വടി വലിക്കുക”) തയ്യാറാക്കിയ ഒരു ഫംഗ്ഷൻ.

ഇവിടെ, പ്രോസസ്സിംഗിനായി അഭ്യർത്ഥന സ്വീകരിച്ചതായി സെർവർ ഉടൻ തന്നെ ബ്രൗസറിനെ അറിയിക്കുകയും പ്രോസസ്സിംഗിനായി അത് റിലീസ് ചെയ്യുകയും ചെയ്യുന്നു. കൂടുതൽ ജോലി. പ്രതികരണം തയ്യാറാകുമ്പോൾ, സെർവർ അത് ഫോർവേഡ് ചെയ്യും, അനുബന്ധ ഡിസ്പ്ലേ ഫംഗ്ഷൻ ബ്രൗസറിൽ വിളിക്കപ്പെടും, എന്നാൽ ഈ പ്രതികരണം സൃഷ്ടിക്കുകയും അയയ്ക്കുകയും ചെയ്യുമ്പോൾ, ബ്രൗസർ സൗജന്യമാണ്.

ഉപയോക്താവിന് അഭിപ്രായങ്ങൾ എഴുതാനും ഒരു ഫോം പൂരിപ്പിക്കാനും സമർപ്പിക്കാനും കഴിയും.: പുതിയ അസിൻക്രണസ് അഭ്യർത്ഥനകൾ നടത്താം.

ഉപയോക്തൃ പ്രവർത്തനങ്ങളോടുള്ള ഏതാണ്ട് തൽക്ഷണ പ്രതികരണമാണ് അസിൻക്രണസ് മോഡലിന്റെ സവിശേഷത, അതിനാൽ ആപ്ലിക്കേഷൻ സൗകര്യപ്രദവും വേഗതയേറിയതുമാണെന്ന് തോന്നുന്നു.

പ്രവർത്തനവും യഥാർത്ഥ ഫലവും തമ്മിലുള്ള ഈ വിടവ് കാരണം, ആപ്ലിക്കേഷൻ കൂടുതൽ പിശകുകൾക്ക് ഇരയാകുന്നു.

പ്രത്യേകിച്ചും ഒരേസമയം ഒന്നിലധികം അസിൻക്രണസ് അഭ്യർത്ഥനകളുടെ കാര്യത്തിൽ, നിർവ്വഹണത്തിന്റെയും പ്രതികരണത്തിന്റെയും ക്രമം (റേസ്-കണ്ടീഷനുകൾ) നിങ്ങൾ ശ്രദ്ധിക്കേണ്ടതുണ്ട്, ഒരു പിശക് സംഭവിച്ചാൽ, ഒരു സ്ഥിരതയുള്ള അവസ്ഥയിൽ ആപ്ലിക്കേഷൻ വിടുക.

അസിൻക്രണസ് മോഡലിന്റെ സവിശേഷതകൾ

• നടപ്പിലാക്കാൻ ബുദ്ധിമുട്ട്
  • അപര്യാപ്തമായ ബ്രൗസർ കഴിവുകൾ (javascript)
  • അസിൻക്രണസ് മോഡൽ ഡീബഗ് ചെയ്യാൻ കൂടുതൽ ബുദ്ധിമുട്ടാണ്
• റേസ് വ്യവസ്ഥകൾ
  • നിർവചിക്കാത്ത എക്സിക്യൂഷൻ സീക്വൻസ്
  • നിങ്ങൾക്ക് ഒരേസമയം നിരവധി ജോലികൾ ചെയ്യാൻ കഴിയും ("മത്സ്യബന്ധന വടി"), എന്നാൽ ആദ്യം ആരംഭിച്ച ടാസ്ക് അവസാനമായി അവസാനിച്ചേക്കാം.
• പ്രതികരണം ഉടനടിയാണ്, പക്ഷേ ഫലം എന്തായിരിക്കുമെന്ന് അറിയില്ല. പിശക് കൈകാര്യം ചെയ്യുന്നത് കൂടുതൽ സങ്കീർണ്ണമാണ്
  • ആശയവിനിമയ പിശകുകൾ - വിച്ഛേദിക്കൽ മുതലായവ.
  • ഉപയോക്തൃ പിശകുകൾ - ഉദാഹരണത്തിന്, മതിയായ പ്രത്യേകാവകാശങ്ങൾ ഇല്ലായിരുന്നു
• സമഗ്രത നിയന്ത്രണം (ബഗ് പ്രൂഫ്)
  • ഉദാഹരണത്തിന്, എഡിറ്റർ അയച്ചു അസമന്വിത അഭ്യർത്ഥനഒരു മരക്കൊമ്പ് നീക്കം ചെയ്യാൻ. സെർവർ പ്രതികരണം വരുന്നത് വരെ ഇതിലേക്ക് ചേർക്കുന്നത് പ്രവർത്തനരഹിതമാക്കിയിരിക്കണം. പെട്ടെന്ന് മതിയായ പ്രത്യേകാവകാശങ്ങൾ ഇല്ലെങ്കിൽ, പ്രവർത്തനം പരാജയപ്പെട്ടു.
• ഇന്ററാക്റ്റിവിറ്റി
• ഫാസ്റ്റ് ഇന്റർഫേസ്

രണ്ട് ഗുണമേ ഉള്ളൂ, എന്നാൽ എന്തെല്ലാം ഗുണങ്ങൾ! കളി മെഴുകുതിരിക്ക് വിലയുള്ളതാണ്.

അസിൻക്രണസ് ഡ്രാഗ്"എൻ"ഡ്രോപ്പ്.

ചിലപ്പോൾ അസിൻക്രണസ് പ്രവർത്തനങ്ങൾക്ക് വിവിധ "ചെവി തന്ത്രങ്ങൾ" ചെയ്യേണ്ടത് ആവശ്യമാണ്. ഉദാഹരണത്തിന്, നിങ്ങൾ ഒരു ട്രീയിൽ ഒരു ഡ്രാഗ്"n"ഡ്രോപ്പ് ചെയ്യാൻ ആഗ്രഹിക്കുന്നു, അതായത്, മൗസ് ഉപയോഗിച്ച് ലേഖനങ്ങൾ ഒരു വിഭാഗത്തിൽ നിന്ന് മറ്റൊന്നിലേക്ക് വലിച്ചിടുക, അങ്ങനെ അവർ ഡാറ്റാബേസിലെ സെർവറിൽ അവരുടെ മാതാപിതാക്കളെ മാറ്റുന്നു.

"n" ഡ്രോപ്പ് വലിച്ചിടുക - ഇതാണ് "എലികളുടെ ഒബ്ജക്റ്റ് എടുത്തു - അത് ചെയ്യേണ്ടിടത്ത് വയ്ക്കുക - ചെയ്തു." എന്നാൽ അസിൻക്രണസ് മോഡലിൽ, എല്ലാം ഉടനടി "തയ്യാറാക്കാൻ" കഴിയില്ല.
നിങ്ങൾ സെർവറിലെ പ്രത്യേകാവകാശങ്ങൾ പരിശോധിക്കേണ്ടതുണ്ട്, മറ്റൊരു ഉപയോക്താവ് അത് ഇല്ലാതാക്കിയാൽ, ഒബ്ജക്റ്റ് ഇപ്പോഴും നിലവിലുണ്ടോ എന്ന് പരിശോധിക്കുക.

പ്രക്രിയ ആരംഭിച്ചുവെന്ന് നമുക്ക് എങ്ങനെയെങ്കിലും കാണിക്കേണ്ടതുണ്ട്, പക്ഷേ ഫലം "എന്ത് സംഭവിക്കും ..." ആയിരിക്കും. പക്ഷേ? അസിൻക്രണസ് മോഡലിൽ, മൗസ് പോയിന്ററിന് ഒരു ഒബ്ജക്റ്റിന് മുകളിലൂടെ സഞ്ചരിക്കാൻ കഴിയില്ല, അത് ഒരു വാച്ചായി മാറുന്നു.

ഈ സാഹചര്യത്തിൽ, അവർ ഒന്നുകിൽ സെർവറിലേക്ക് സിൻക്രണസ് അഭ്യർത്ഥനകൾ ഉപയോഗിക്കുന്നു - തുടർന്ന് എല്ലാം ശരിക്കും മരവിപ്പിക്കും, അല്ലെങ്കിൽ ഒബ്ജക്റ്റ് കൈമാറ്റം ചെയ്തതുപോലെ വയ്ക്കുകയും പ്രതികരണത്തിനായി കാത്തിരിക്കുകയാണെന്ന് ഒരു ആനിമേറ്റഡ് ഐക്കൺ ഉപയോഗിച്ച് അറിയിക്കുകയും ചെയ്യുക എന്നതാണ് യഥാർത്ഥ പരിഹാരം.
ഉത്തരം നെഗറ്റീവ് ആണെങ്കിൽ, പ്രതികരണം കൈകാര്യം ചെയ്യുന്നയാൾ ഒബ്ജക്റ്റ് തിരികെ കൈമാറുന്നു.

പഴകിയ സന്ദർഭം, കാലഹരണപ്പെട്ട സന്ദർഭം

ഡ്രാഗ്"എൻ"ഡ്രോപ്പ് ഉള്ള ഉദാഹരണം "പഴയ സന്ദർഭം" - കാലഹരണപ്പെട്ട സന്ദർഭം എന്ന പ്രശ്നത്തെയും സ്പർശിക്കുന്നു.

വെബ് ഒരു മൾട്ടി-യൂസർ പരിതസ്ഥിതിയാണ്. നാവിഗേഷനായി ഉപയോഗിക്കുകയാണെങ്കിൽ,
ലേഖനങ്ങളുടെ ഒരു വൃക്ഷം പറയാം, പിന്നെ പലരും അതിൽ പ്രവർത്തിക്കുന്നു. അവരിൽ ഒരാൾക്ക് മറ്റൊരാൾ പ്രവർത്തിക്കുന്ന ഒരു മരക്കൊമ്പ് ഇല്ലാതാക്കാൻ കഴിയും: സംഘർഷം.

ചട്ടം പോലെ, അത്തരം സംഭവങ്ങളെ മറികടക്കാൻ ഇനിപ്പറയുന്ന മാർഗ്ഗങ്ങൾ ഉപയോഗിക്കുന്നു:

എഡിറ്റിംഗ് നയം

ആരാണ് എന്താണ് ചെയ്യുന്നതെന്ന് എല്ലാവർക്കും അറിയുമ്പോൾ, അധികാര വിഭജനത്തിന്റെ തലത്തിലും വ്യക്തിഗത ആശയവിനിമയത്തിലും അത്തരം ഇല്ലാതാക്കലുകൾ അംഗീകരിക്കപ്പെടുന്നു. ഈ ഓപ്ഷൻ സുരക്ഷിതമല്ല, പക്ഷേ സാധാരണയായി പ്രവർത്തിക്കുന്നു.

ലോക്കിംഗ് കൂടാതെ/അല്ലെങ്കിൽ പതിപ്പ് നിയന്ത്രണം

ലോക്കിംഗ് - എഡിറ്റ് ചെയ്ത പ്രമാണങ്ങൾ തടയുന്നു.

പതിപ്പ് നിയന്ത്രണം - ഓരോ പുതിയ പ്രമാണവും ഒരു പതിപ്പായി മാറുന്നു, അതിനാൽ മാറ്റങ്ങൾ ഒരിക്കലും നഷ്‌ടമാകില്ല. പെത്യ വാസ്യയ്ക്ക് മുമ്പായി ഡോക്യുമെന്റ് എഡിറ്റുചെയ്യാൻ തുടങ്ങിയപ്പോൾ പതിപ്പ് വൈരുദ്ധ്യങ്ങൾക്ക് ഇടയാക്കുകയും പിന്നീട് അത് സംരക്ഷിക്കുകയും ചെയ്തു. അതേ സമയം, ഏറ്റവും പുതിയ പതിപ്പിൽ, വാസ്യയുടെ മാറ്റങ്ങൾ നഷ്ടപ്പെട്ടു, എന്നിരുന്നാലും അവസാന (വാസ്യയുടെ) പതിപ്പ് സിസ്റ്റത്തിൽ തീർച്ചയായും ലഭ്യമാണ്.

ലോക്കിംഗും പതിപ്പിംഗും സംബന്ധിച്ച് നിങ്ങൾക്ക് കൂടുതൽ വായിക്കാം, ഉദാഹരണത്തിന്, സബ്വേർഷൻ പതിപ്പ് നിയന്ത്രണ സംവിധാനത്തിനായുള്ള ഡോക്യുമെന്റേഷനിൽ.

യാന്ത്രിക സന്ദർഭ അപ്ഡേറ്റ്

കാലഹരണപ്പെട്ട ഉള്ളടക്കത്തിന്റെ പ്രശ്നം തൽക്ഷണ യാന്ത്രിക-അപ്‌ഡേറ്റ് ഉപയോഗിച്ച് 99% പരിഹരിക്കാനാകും.

ബ്രൗസർ സെർവറുമായി ഒരു സ്ഥിരമായ കണക്ഷൻ നിലനിർത്തുന്നു (അല്ലെങ്കിൽ കാലാകാലങ്ങളിൽ തിരുത്തൽ അഭ്യർത്ഥനകൾ നടത്തുന്നു) - കൂടാതെ ആവശ്യമായ മാറ്റങ്ങൾഈ ചാനലിലൂടെ അയയ്ക്കുന്നു.

ഉദാഹരണത്തിന്, പുതിയ ലേഖനങ്ങൾ ചിലപ്പോൾ ഒരു മരത്തിന്റെ തുറന്ന ശാഖയിൽ ലോഡ് ചെയ്യപ്പെടും; മെയിൽ ഇന്റർഫേസ്- പുതിയ അക്ഷരങ്ങൾ.

പൊതുവേ, കാലഹരണപ്പെട്ട സന്ദർഭത്തിന്റെ പ്രശ്നം ഡാറ്റാ സമഗ്രതയുടെ പ്രശ്നവുമായി നേരിട്ട് ബന്ധപ്പെട്ടിരിക്കുന്നു. ഏത് സാഹചര്യത്തിലും, ഫോം മൂല്യനിർണ്ണയം പോലെ, അന്തിമ സമഗ്രത പരിശോധനയ്ക്ക് സെർവർ ഉത്തരവാദിയാണ്.

ചുരുക്കെഴുത്ത് അജാക്സ്(Asynchronous JavaScript ഉം XML ഉം) പ്രവർത്തനക്ഷമമാക്കാൻ വെബ് പ്രോഗ്രാമിംഗ് സാങ്കേതികവിദ്യകളുടെ ഒരു ശ്രേണി ഉപയോഗിക്കുന്ന ആശയത്തെ പ്രതീകപ്പെടുത്തുന്നു. ഒരു HTML പേജിന്റെ വ്യക്തിഗത ഏരിയകളുടെ ഉള്ളടക്കം അസമന്വിതമായി അപ്ഡേറ്റ് ചെയ്യുക. അസമന്വിതമായി അർത്ഥമാക്കുന്നത് നിങ്ങൾക്ക് ആവശ്യമുള്ള ബ്ലോക്ക് അപ്‌ഡേറ്റ് ചെയ്യുന്നു എന്നാണ് HTML മാർക്ക്അപ്പ്മുഴുവൻ പേജും അപ്‌ഡേറ്റ് ചെയ്യുമ്പോൾ അസമന്വിതമായി സംഭവിക്കാം. തൽഫലമായി, ഒരു പേജ് പുതുക്കുന്നതിനോ ഉപയോക്താവ് ഹൈപ്പർലിങ്ക് വഴി മറ്റൊരു പേജിലേക്ക് മാറുന്നതിനോ ഉള്ള മിന്നൽ ബ്രൗസറിന് അനുഭവപ്പെടില്ല.

Asynchronously എന്നും അർത്ഥമാക്കാം ഒരേസമയം നിരവധി ശകലങ്ങളുടെ സമാന്തര അപ്‌ഡേറ്റ്. ഉദാഹരണത്തിന്, ഒരു പേജ് ലോഡ് ചെയ്യുമ്പോൾ വലിയ തുകടാഗുകൾ , അപ്പോൾ ചിത്രങ്ങൾ സ്വയം ക്രമേണയും പരസ്പരം സമാന്തരമായും ദൃശ്യമാകും. മുഴുവൻ ഇൻറർനെറ്റ് പേജും അപ്‌ഡേറ്റ് ചെയ്യാനുള്ള കഴിവാണ്, മറിച്ച് അതിന്റെ ഒരു പ്രത്യേക ഭാഗമാണ്, അജാക്സ് സാങ്കേതികവിദ്യകളെ വളരെ ജനപ്രിയവും വെബ് ഡിസൈൻ മേഖലയിൽ ആവശ്യക്കാരും ആക്കുന്നത്. മിക്കപ്പോഴും, AJAX അംഗീകൃത സ്ക്രിപ്റ്റുകളിൽ (ക്യാപ്ചർ ജനറേഷൻ) അല്ലെങ്കിൽ സെർവറിൽ നടത്തുന്ന ദീർഘകാല പ്രവർത്തനങ്ങളുടെ നില പ്രദർശിപ്പിക്കുമ്പോൾ ഉപയോഗിക്കുന്നു.

വിശദാംശങ്ങളിലേക്ക് കടക്കാതെ, സംവേദനാത്മക ഇന്റർനെറ്റ് പേജുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള രണ്ട് പ്രധാന സമീപനങ്ങൾ AJAX സംയോജിപ്പിക്കുന്നു:

ഒരു വസ്തുവിന്റെ ഉപയോഗം XMLHttpRequestസെർവറുമായി ബന്ധപ്പെടാനും http പ്രോട്ടോക്കോൾ വഴി പശ്ചാത്തലത്തിൽ ഒരു പ്രതികരണം സ്വീകരിക്കാനും.

അതിന്റെ സോഫ്റ്റ്‌വെയർ ഇന്റർഫേസുകളിലൂടെ പേജിന്റെ ചലനാത്മക അപ്‌ഡേറ്റ് ഒബ്ജക്റ്റ് മോഡൽ (ഡോക്യുമെന്റ് ഒബ്ജക്റ്റ് മോഡൽ, DOM) കോഡിൽ. എല്ലാം ഒരുമിച്ച് ഇതിനെ വിളിക്കുന്നു.

AJAX ഉപയോഗിക്കുന്നതിന്റെ പ്രയോജനങ്ങൾ എന്തൊക്കെയാണ്? ഇത് മനസിലാക്കാൻ നിങ്ങൾ ഇത് ഉപയോഗിക്കുകയും അത് കൂടാതെ സംഭവിച്ചതുമായി താരതമ്യം ചെയ്യുകയും വേണം. അനിഷേധ്യമായ ചിലത് ചുവടെയുണ്ട്. AJAX ഉപയോഗിക്കുന്നതിന്റെ പ്രയോജനങ്ങൾഇന്റർനെറ്റ് സൈറ്റുകൾ നിർമ്മിക്കുമ്പോൾ:

സെർവറും ക്ലയന്റും ഇന്റർനെറ്റ് പേജിന്റെ മുഴുവൻ മാർക്ക്അപ്പും കൈമാറ്റം ചെയ്യാത്തതിനാൽ സെർവറിലെ ട്രാഫിക്കും ലോഡും കുറയ്ക്കുന്നു, പക്ഷേ അതിന്റെ ഒരു ഭാഗം മാത്രം.

മികച്ച എർഗണോമിക്സും മറ്റും ഉയർന്ന വേഗതസൈറ്റിന്റെ ഉപയോക്തൃ ഇന്റർഫേസിന്റെ പ്രവർത്തനം.

AJAX ഉപയോഗിക്കുന്നത് ഗുണങ്ങൾ മാത്രമല്ല, നിങ്ങളുടെ ഇന്റർനെറ്റ് പ്രോജക്റ്റുകളിൽ ഈ സോഫ്റ്റ്‌വെയർ ആശയം ഉപയോഗിക്കാൻ നിങ്ങൾ തീരുമാനിക്കുകയാണെങ്കിൽ, നിങ്ങൾ സഹിക്കേണ്ട ദോഷങ്ങളും ഉണ്ട്. മനസ്സിൽ സൂക്ഷിക്കേണ്ട ചിലത് ഇതാ:

• XMLHttpRequest ഒബ്‌ജക്‌റ്റ് മുഖേന സെർവറുമായുള്ള പശ്ചാത്തല ആശയവിനിമയത്തിനിടെ ഡൗൺലോഡ് ചെയ്‌ത ഡാറ്റ ബ്രൗസിംഗ് ചരിത്രത്തിൽ ഉൾപ്പെടുത്തിയിട്ടില്ല, ബ്രൗസർ ബുക്ക്‌മാർക്കുകളിലേക്ക് ചേർക്കാൻ കഴിയില്ല.


• ഒരു AJAX അഭ്യർത്ഥനയുടെ ഫലമായി പ്രദർശിപ്പിച്ച ഉള്ളടക്കം തിരയൽ എഞ്ചിനുകൾക്ക് (Google, Yandex) ഒരിക്കലും ദൃശ്യമായേക്കില്ല, കാരണം അവ ഉപയോക്തൃ പെരുമാറ്റം അനുകരിക്കുന്നില്ല, JavaScript കോഡ് നടപ്പിലാക്കുന്നില്ല.


• സാധാരണ സന്ദർശക എണ്ണലും പേജ് കാണൽ സേവനങ്ങളും തെറ്റായ സ്ഥിതിവിവരക്കണക്കുകൾ സൃഷ്ടിച്ചേക്കാം.


• AJAX സോഫ്‌റ്റ്‌വെയർ മാത്രമല്ല, ഏതെങ്കിലും JavaScript സ്‌ക്രിപ്‌റ്റുകളും ഉപയോഗിക്കുന്നത് നിങ്ങളുടെ പേജ് വ്യത്യസ്‌ത ബ്രൗസറുകളിൽ വ്യത്യസ്‌തമായി പെരുമാറുന്നതിന് കാരണമായേക്കാം, ഈ സ്വഭാവം എല്ലായ്‌പ്പോഴും ശരിയായിരിക്കില്ല.

XMLHttpRequest ഒബ്‌ജക്റ്റ്

AJAX അതിന്റെ ശുദ്ധമായ രൂപത്തിൽ എങ്ങനെ ഉപയോഗിക്കുന്നു എന്നതിന്റെ രംഗം ഇപ്പോൾ ഞാൻ ചുരുക്കമായി വിവരിക്കും, തുടർന്ന് എങ്ങനെയെന്ന് കൂടുതൽ വിശദമായി ഞാൻ നിങ്ങളോട് പറയും. ഇതിനകം സൂചിപ്പിച്ചതുപോലെ, സെർവറിലേക്കുള്ള അസിൻക്രണസ് കോളുകൾ XMLHttpRequest ഒബ്ജക്റ്റ് വഴിയാണ് ചെയ്യുന്നത്. ആദ്യം നിങ്ങൾ ഇത് സൃഷ്ടിക്കേണ്ടതുണ്ട്, ഇത് വ്യത്യസ്ത ബ്രൗസറുകളിൽ വ്യത്യസ്തമായി ചെയ്യുന്നു. എല്ലായിടത്തും ശരിയായി പ്രവർത്തിക്കാൻ സാധ്യതയുള്ള ഒരു XMLHttpRequest സൃഷ്ടിക്കുന്നതിനുള്ള നടപടിക്രമം ഇതുപോലെയാണ്.

ഫംഗ്ഷൻ createRequest() ( var request = null; if (window.XMLHttpRequest) ( request = new XMLHttpRequest(); ) else if (window.ActiveXObject) ( ശ്രമിക്കുക (അഭ്യർത്ഥന = പുതിയ ActiveXObject("Msxml2.XMLHTTP"); എക്സി) (ശ്രമിക്കുക (അഭ്യർത്ഥന = പുതിയ ActiveXObject("Microsoft.XMLHTTP");) ക്യാച്ച് (എക്സ്)(നല്ല് മടക്കി നൽകുക;) ) റിട്ടേൺ അഭ്യർത്ഥന; )

//ഒരു അഭ്യർത്ഥന സൃഷ്ടിക്കുക var അഭ്യർത്ഥന = createRequest() // തരം കടന്നുപോകുക http അഭ്യർത്ഥന a (GET അല്ലെങ്കിൽ POST), URL അഭ്യർത്ഥിക്കുകകൂടാതെ മോഡ്: അസിൻക്രണസ് അഭ്യർത്ഥന (ശരി) //അല്ലെങ്കിൽ സിൻക്രണസ് (തെറ്റ്), അഭ്യർത്ഥന നടപ്പിലാക്കുമ്പോൾ ബ്രൗസർ താൽക്കാലികമായി നിർത്തുമ്പോൾ. request.open("GET", url, true); //അഭ്യർത്ഥന പൂർത്തീകരണ ഹാൻഡ്‌ലർ അഭ്യർത്ഥന നിർവചിക്കുന്നു.onreadystatechange = onSuccess; //അഭ്യർത്ഥന അഭ്യർത്ഥന നടപ്പിലാക്കുക.send();

onSuccess അഭ്യർത്ഥനയുടെ വിജയകരമായ പൂർത്തീകരണം കൈകാര്യം ചെയ്യുന്നതിനുള്ള ഫംഗ്‌ഷൻ ഇതുപോലെയായിരിക്കാം:

ഫംഗ്‌ഷൻ onSuccess () ( (request.readyState == 4) ശ്രമിക്കുക ( //(request.status == 200) എങ്കിൽ അഭ്യർത്ഥന പൂർത്തിയായി ( // വിജയകരമായി പൂർത്തിയാക്കി //ഇവിടെ ഞങ്ങൾ അഭ്യർത്ഥനയുടെ ഫലവുമായി എന്തെങ്കിലും ചെയ്യുന്നു var ഫലം = അഭ്യർത്ഥന .responseText; ) മറ്റുള്ളവ ( //ഇവിടെ ഞങ്ങൾ കൈകാര്യം ചെയ്യുന്നത് വിജയിക്കാത്ത അഭ്യർത്ഥന നിർവ്വഹണ മുന്നറിയിപ്പ് (request.statusText); ) ) ക്യാച്ച് (എക്സ്) () )

AJAX, jQuery

തത്വത്തിൽ, മുകളിലുള്ള ഉദാഹരണത്തിൽ സങ്കീർണ്ണമായ ഒന്നും തന്നെയില്ല, എന്നാൽ createRequest ഫംഗ്ഷൻ ശ്രദ്ധിക്കുക. ഏത് ബ്രൗസറിലും തുല്യമായി പ്രവർത്തിക്കാനുള്ള പ്രോഗ്രാം കോഡിന്റെ കഴിവിനെ വിളിക്കുന്നു ക്രോസ്-ബ്രൗസർ അനുയോജ്യത. നിങ്ങളുടെ പ്രോഗ്രാം കോഡ്ക്രോസ് ബ്രൗസറായി മാറി, നിങ്ങൾ ഗൗരവമായ ശ്രമങ്ങൾ നടത്തേണ്ടതുണ്ട്: ഓരോ ബ്രൗസറിന്റെയും സൂക്ഷ്മതകളും നിങ്ങൾ ഉപയോഗിക്കുന്നവയുമായി അതിന്റെ ഇൻഫ്രാസ്ട്രക്ചറിന്റെ പൊരുത്തക്കേടിന്റെ പ്രശ്നങ്ങൾ പരിഹരിക്കാനുള്ള വഴികളും നിങ്ങൾ അറിയേണ്ടതുണ്ട്. സോഫ്റ്റ്വെയർ. വെബ് പ്രോഗ്രാമർമാർക്കിടയിൽ ജനപ്രിയം ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറി XMLHttpRequest ഒബ്‌ജക്‌റ്റുമായി പ്രവർത്തിക്കുന്നത് jQuery എളുപ്പമാക്കുക മാത്രമല്ല, നിങ്ങളുടെ പരിഹാരം ക്രോസ്-ബ്രൗസർ അനുയോജ്യമാണെന്ന് ഉറപ്പാക്കുകയും ചെയ്യുന്നു (ശ്രമിക്കുന്നു). AJAX സാങ്കേതികവിദ്യകളുമായി പ്രവർത്തിക്കുന്നതിന് jQuery-ക്ക് നിരവധി രീതികളുണ്ട്. ഒന്നാമതായി, ഇത് അജാക്സ് രീതി തന്നെയാണ്, ഇത് ഏറ്റവും സാർവത്രികവും സെർവറിലേക്ക് ഏതെങ്കിലും അഭ്യർത്ഥനകൾ രചിക്കുന്നതിന് അനുയോജ്യവുമാണ്. ആന്തരികമായി ലഭിക്കുന്നതും പോസ്റ്റ് ചെയ്യുന്നതുമായ രീതികളും അജാക്സ് രീതി ഉപയോഗിക്കുന്നു (അവ അതിന്റെ റാപ്പറുകളാണ്), കൂടാതെ അവരുടെ പേരിൽ നിന്ന് നിങ്ങൾ ഊഹിക്കുന്നതുപോലെ, സെർവറിലേക്ക് അയയ്ക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ് നേടുകഒപ്പം പോസ്റ്റ്അതനുസരിച്ച് അഭ്യർത്ഥിക്കുന്നു. JavaScript കോഡിന്റെ ഉദാഹരണങ്ങൾ ചുവടെയുണ്ട് AJAX ഉപയോഗിക്കുന്നു jQuery ഉപയോഗിക്കുന്നു.

ഫംഗ്‌ഷൻ loadArticle_ajax(തരം, ഐഡി) ($..php", ഡാറ്റ: ((article_id:id)), വിജയം: OnComplete, പിശക്: OnFail )); ) loadArticle_get(id) ($..php", (article_id: id), OnComplete).പരാജയം(OnFail); ) ഫംഗ്‌ഷൻ loadArticle_post(id) ($..php", (article_id:id), OnComplete).fail(OnFail); ) ഫംഗ്‌ഷൻ OnComplete(html) ($("#content").html(html); ) ഫംഗ്‌ഷൻ OnFail (പ്രതികരണം) ( $("#content").html("ഡാറ്റ ലോഡുചെയ്യുന്നതിൽ പിശക്:
"+response.statusText+"
" + response.responseText); )

മുകളിലുള്ള ഫംഗ്‌ഷനുകൾ ഇനിപ്പറയുന്ന ഫോമിന്റെ ഒരു ലിങ്ക് (URL) വഴി ഒരു പാരാമീറ്ററൈസ്ഡ് http അഭ്യർത്ഥന നടത്തുന്നു:

Http://site/readarticle_content.php?article_id=id

വീണ്ടെടുക്കപ്പെട്ട ഉള്ളടക്കം ഐഡി പാരാമീറ്ററിനെ ആശ്രയിച്ചിരിക്കുന്നു. നിങ്ങളുടെ കാര്യത്തിൽ പാരാമീറ്ററുകളൊന്നും നൽകേണ്ടതില്ലെങ്കിൽ, ശൂന്യമായ സെറ്റ് () അനുബന്ധ ആർഗ്യുമെന്റായി വിടുക. നിങ്ങൾക്ക് പ്രവർത്തന ഉദാഹരണം നോക്കാം. AJAX-നെയും jQuery-യെയും കുറിച്ച് എനിക്ക് അത്രയേയുള്ളൂ.