JavaScript in Hindi : Errors

JavaScript Errors 

  • Introduction to JavaScript errors in Hindi
  • JavaScript Error object in Hindi
  • JavaScript error handling mechanism in Hindi

Introduction to JavaScript Errors 

किसी भी दूसरी programming language की तरह JavaScript programs भी errors generate कर सकते है। Errors की वजह से program execute नहीं होता है। मुख्यतः errors दो प्रकार की होती है।

  1. Syntax Errors – ये वो errors होती है जो user द्वारा wrong syntax लिखे जाने पर generate होती है। इन errors के आने पर JavaScript code run नहीं होता है जब तक की इन्हें ठीक नहीं कर लिया जाता है। 
  2. Semantic Errors – ये वे errors होती है जो programmer द्वारा गलत programming logic apply किये जाने पर generate होती है। 
Syntax errors आसानी से programmer द्वारा code को सही प्रकार से लिख कर ठीक की जाती है। वँही दूसरी तरफ semantic errors को सही programming logic apply करके ठीक किया जाता है।

जब भी कोई error आती है तो JavaScript किसी भी प्रकार का कोई message show नहीं करती है। Programmer को स्वयं ही उन errors को ढूँढ कर ठीक करना होता है।

JavaScript एक error handling mechanism provide करती है जिसके द्वारा programmer सभी प्रकार की errors को handle कर सकता है और उनके लिए proper messages show कर सकता है।

JavaScript Error Object 

जब भी किसी JavaScript program में किसी भी प्रकार की कोई error generate होती है तो JavaScript Error object create करती है। यह Error object उस error को represent करता है और उससे सम्बंधित सम्पूर्ण जानकारी store करता है। 
JavaScript द्वारा create किये जाने वाले प्रत्येक Error object के साथ 2 मत्वपूर्ण properties available होती है। इन properties के द्वारा error से सम्बंधित जानकारी set (Custom errors के case में) और return की जाती है। इन properties के बारे में निचे बताया जा रहा है। 
  1. name – इस property के द्वारा error का नाम set (Custom errors के case में) और return किया जाता है। यह property 6 अलग अलग values return करती है। इन्हें निचे बताया जा रहा है। 
    • EvalError – यह value बताती है की eval() function से सम्बंधित कोई error आयी है। 
    • RangeError – जब कोई number out of range होने की वजह से कोई error आती है तो वह इसी value द्वारा represent की जाती है। 
    • ReferenceError – किसी illegal reference के कारण जो error generate होती है। उसके लिए यह value generate होती है। 
    • SyntaxError – Syntax error आने पर यह value return की जाती है। 
    • TypeError – Data type सम्बंधित error आने पर यह value return की जाती है। 
    • URIError – encodeURI() method द्वारा error generate होने पर यह value return की जाती है। 
  2. message – इस property द्वारा error message set और return किया जाता है। 

JavaScript Error Handling Mechanism  

किसी भी प्रकार की error आने पर script वँही terminate हो जाती है और आगे का code execute नहीं होता है। ऐसा होने से एक bad user exeperience create होता है जो किसी भी अच्छी web application के लिए ठीक नहीं माना जाता है। 
कई बार कितना ही experienced programmer हो लेकिन फिर भी errors generate हो जाती है। Errors को रोका नहीं जा सकता है लेकिन उन्हें handle किया जा सकता है। 

JavaScript आपको एक mechanism provide करती है जिससे आप errors को handle कर सकते है ताकि error generate होने पर आपकी web application सही तरीके से terminate हो। 

उदाहरण के लिए इस mechanism को use करते हुए आप error generate होने पर user को एक proper message show कर सकते है या फिर कोई दूसरा code execute करवा सकते है। 
JavaScript में errors को handle करने के लिए जो mechanism use किया जाता है वह try, catch और finally blocks द्वारा कार्य करता है। इन blocks के बारे में निचे बताया जा रहा है। 

Try 

Try block में वह code लिखा जाता है जिससे error generate होने की सम्भावना होती है। इस block का syntax निचे दिया जा रहा है।

try{
  //Code that may generate an error…
}

Catch 

Catch block में वह code लिखा जाता है जो error आने पर execute होगा और error को handle करेगा। इस block में error object parameter pass होता है जो error की information प्राप्त करने और उसे handle करने में use किया जाता है।

Catch block का syntax निचे दिया जा रहा है। 

catch(e)
{
  // Handle error here…
}

Finally 

Catch block में error को handle करने के बाद यदि आप कोई अन्य code execute करवाना चाहते है तो इसके लिए finally block में उस code को लिखा जाता है। 

चाहे किसी प्रकार की error generate हुई हो या नहीं लेकिन finally block हमेशा execute होता है। Finally block का syntax निचे दिया जा रहा है। 

finally
{
  //Code to execute after handling error…
}

Example of JavaScript Error Handling 

JavaScript में errors को handle करने का उदाहरण निचे दिया जा रहा है। 
<!– javascriptErrorHandling.html –>

<html>

<script type=”text/javascript”>
try
{
   // Calling an undefined function
   myFunction()
}
catch(e)
{
   // Handling undefined function exception
   document.write(“Error Name : “+e.name+”<br />”);
   document.write(“Error Message : “+e.message);
}
</script>

</html>

ऊपर दिए गए उदाहरण में एक ऐसे function को call किया जा रहा है जिसे create ही नहीं किया गया है। इस situation में JavaScript reference error generate करेगी। यह उदाहरण निचे दिया गया output generate करता है।

JavaScript-Error-Handling-Example-in-Hindi

JavaScript Custom Errors

JavaScript आपको custom errors create करने की भी ability provide करती है। इसके लिए try और catch block के साथ throw statement use किया जाता है।

Throw statement के साथ error का नाम string के रूप में pass किया जाता है। इसका general syntax निचे दिया जा रहा है।

throw (“errorName”);
JavaScript में custom errors create करने का उदाहरण निचे दिया जा रहा है।

<!– javascriptCustomErrorHandling.html –>

<script type=”text/javascript”>
var b=0;
try
{
    // Checking for exceptional condition
    if(b==0)
    {
        throw (“b can not be zero”);
    }
}
// Handling exceptional condition 
catch(e)
{
    document.write(“Error : “+e);
}
</script>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

JavaScript-Custom-Error-Example-in-Hindi

JavaScript in Hindi : Browser Object Model (BOM)

JavaScript Browser Object Model (BOM)

  • Introduction to JavaScript browser object model (BOM) in Hindi 
  • Difference between JavaScript DOM & BOM in Hindi 
  • Objects of JavaScript browser object model in Hindi

Introduction to JavaScript Browser Object Model (BOM)

JavaScript में browser object model उन objects को represent करता है जो browser से interact करने के लिए use किये जाते है। Browser object model एक official standard नहीं है।

यानि यदि आप W3C specification देखें तो आप पाएंगे की Browser Object Model (BOM) जैसी कोई official term नहीं है।

Browser object model द्वारा represent किये जाने वाले objects आपको properties और methods provide करते है जिनसे आप browser से interact करते है। Browser object model द्वारा represent किये जाने वाले objects window, navigator, history, location और screen है।

Difference Between JavaScript BOM and DOM

JavaScript में browser object model (BOM) और document object model (DOM) के बीच differences को निचे बताया जा रहा है।

BOM एक official standard term नहीं है। जबकि DOM एक official standard term है। 

BOM उन सभी objects को represent करता है जिनके द्वारा browser से communicate किया जाता है। जबकि DOM किसी browser window में document (actual web page) से interact करने के लिए use किये जाने वाले objects को represent करता है।

Object of JavaScript Browser Object Model 

Browser Object Model द्वारा represent किये जाने वाले objects के बारे में निचे बताया जा रहा है। 

Window 

JavaScript में window object browser की window को represent करता है। Windows object में available properties और methods द्वारा आप browser की window के behaviour को control कर सकते है। इस object के बारे में अतिरिक्त जानकारी के लिए JavaScript Window object in Hindi tutorial पढ़ें। 

History

JavaScript में history object user की history को represent करता है। इस object के साथ available properties और methods के द्वारा आप user की history को access कर सकते है। इस object के बारे में अधिक जानकारी के लिए JavaScript History object in Hindi tutorial पढ़ें। 

Navigator

JavaScript में navigator object browser के बारे में information store करता है। इस object के साथ available properties और methods के द्वारा आप user के browser और platform से सम्बंधित information प्राप्त कर सकते है। इस object के बारे में अधिक जानकारी के लिए JavaScript Navigator object in Hindi tutorial पढ़ें।

Screen

JavaScript screen object user की उस screen को represent करता है जिसमें browser window show होती है। इस object के साथ available properties के द्वारा आप user की screen से सम्बंधित जानकारी access कर सकते है। इस object के बारे में अधिक जानकारी के लिए JavaScript Screen object in Hindi tutorial पढ़ें।

Previous: JavaScript Cookies
Next: JavaScript Window Object

JavaScript in Hindi : Screen Object

JavaScript Screen Object

  • Introduction to JavaScript screen object in Hindi 
  • Syntax of JavaScript screen object in Hindi 
  • Properties of JavaScript object in Hindi 

Introduction to JavaScript Screen Object

JavaScript में screen object user की display screen को represent करता है। यह object user की screen से सम्बंधित information hold करता है। Screen से सम्बंधित information browser की window के आधार पर store की जाती है।

Screen object के द्वारा आप screen की width, height, color और pixels आदि से सम्बंधित information प्राप्त कर सकते है। इस object से आप screen dimensions और display settings की भी जानकारी प्राप्त कर सकते है।

Screen object के साथ बहुत सी properties available है जिन्हे use करके आप user की screen सम्बंधित जानकारी access करते है।

Syntax of JavaScript Screen Object

Screen object का general syntax निचे दिया जा रहा है। 
screen.propertyName
Window object की screen property screen object return करती है। इसलिए आप window object के द्वारा भी screen object को use कर सकते है।

window.screen.propertyName

Properties of JavaScript Screen Object 

JavaScript screen object के साथ available properties के बारे में निचे बताया जा रहा है। 
  • width – यह property screen की total width return करती है। 
  • height – यह property screen की total height return करती है। 
  • availHeight – यह property screen की height task bar के बिना return करती है। 
  • availWidth – यह property screen की width task bar के बिना return करती है। 
  • colorDepth – यह property screen का color resolution return करती है। 
  • pixelDepth – यह property screen पर display होने वाली images के color की bit depth return करती है। 

Example of JavaScript Screen Object 

निचे JavaScript screen object को उदाहरण द्वारा समझाया जा रहा है। 
<!– javascriptScreenObjectDemo.html –>

<html>
<body>
<h2>JavaScript Screen Object Demo</h2>

<script type=”text/javascript”>
// Getting screen width
document.write(“Screen width : “,window.screen.width);
//Getting screen height
document.write(“Screen height : “,window.screen.height);
</script>

</body>
</html>

JavaScript in Hindi : Navigator Object

JavaScript Navigator Object

  • Introduction to JavaScript navigator object in Hindi
  • Syntax of JavaScript navigator object in Hindi
  • Properties of JavaScript navigator object in Hindi

Introduction to JavaScript Navigator Object

Web browser को web navigator भी कहा जाता है। JavaScript में navigator object browser को represent करता है। Navigator object browser से related information को hold करता है। Browser के अलावा यह object platform (OS) से related information भी store करता है।

JavaScript navigator object के द्वारा आप browser name, version, language, plugins, mimeType, cookies आदि जानकारी प्राप्त कर सकते है। इस object को कोई भी user create नहीं कर सकता है। यह javascript run time engine द्वारा automatically create किया जाता है।

सभी browsers javascript को अलग अलग तरीके से handle करते है। JavaScript navigator object द्वारा user के browser को detect करके उसके अनुसार ही code में changes किये जा सकते है और webpage को customize किया जा सकता है।

JavaScript navigator object के साथ बहुत सी properties और methods available है जिन्हें use करके आप browser और platform से related information access करते है।

Syntax of JavaScript Navigator Object

JavaScript window object के navigator property के द्वारा navigator object return किया जाता है। इसलिए आप इसे window object के द्वारा access करते है।

window.navigator.property/method name

आप navigator object को बिना window object के directly भी use कर सकते है।

navigator.property/method name

Properties of JavaScript Navigator Object

JavaScript navigator object के साथ available properties के बारे में निचे बताया जा रहा है। 
  • appCodeName – यह property browser का code name return करती है। 
  • appMinorVersion – यह property browser का minor number version return करती है। 
  • appName – यह property browser का नाम return करती है। 
  • appVersion – यह property browser का version number return करती है। 
  • cookieEnabled – यह property boolean value return करती है जो यह दर्शाती है की browser में cookies enabled है या नहीं। 
  • cpuClass – यह property user के CPU की class return करती है। जैसे की x64 या x86 में से कोई एक value यह property return करती है। 
  • mimeTypes – यह property mimeType supported strings का array return करती है। 
  • onLine – यह property boolean value return करती है जो यह बताती है की browser online है या नहीं। 
  • platform – यह property user के operating system का description return करती है। 
  • plugins – यह property browser में installed plugins का array return करती है। 
  • systemLanguage – यह property browser की default language return करती है। 
  • userAgent – यह property browser की user agent header की information return करती है। 
  • userLanguage – यह property user की language return करती है। 

Methods of JavaScript Navigator Object

JavaScript navigator object के साथ available objects के बारे में निचे बताया जा रहा है। 
  • javaEnabled – यह function boolean value return करता है जो यह दर्शाती है की browser में java enabled है या नहीं। 
  • taintEnabled – Tainting के security mechanism है। यह function boolean value return करता है जो यह दर्शाती है की browser में tainting enabled है या नहीं। इस function को JavaScript version में 1.2 से disable कर दिया गया है। 

Example of JavaScript Navigator Object 

JavaScript navigator object को निचे उदाहरण द्वारा समझाया जा रहा है। 
<!– javascriptNavigatorObjectDemo.html –>

<html>
<body>
<h2>JavaScript Navigator Object Demo</h2>

<script type=”text/javascript”>
// Getting browser’s name
document.write(“You are using”,window.navigator.appName,”browser.”);
</script>

</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

JavaScript-Navigator-Object-Example-in-Hindi

JavaScript in Hindi : Window Object

JavaScript Window Object 

  • Introduction to JavaScript window object in Hindi
  • Properties of JavaScript window object in Hindi 
  • Methods of JavaScript window object in Hindi

Introduction to JavaScript Window Object

JavaScript की object hierarchy में window सबसे top level का object है। क्योंकि यह top level का object है इसलिए बाकि दूसरे objects जैसे की document, history, location आदि सभी इसी object के अंतर्गत आते है।

Window object browser की window को represent करता है। यह object browser द्वारा automatically create किया जाता है। इसे JavaScript objects के साथ confuse नहीं किया जाना चाहिए। क्योंकि यह string, date आदि की तरह javascript का object नहीं होता है बल्कि यह browser object होता है।

Window object के द्वारा browser को open और close करना, alert display करना, dialogs generate करना और timeouts set करना जैसे कार्य किये जाते है। Window object द्वारा events भी generate किये जा सकते है।

Browser window और frames के लिए अलग अलग window objects create करता है। उदाहरण के लिए यदि किसी HTML document में frame है तो browser एक window object अलग से frame के लिए भी create करेगा।

Window object बहुत सी properties और methods provide करता है जिनसे आप browser के behaviour को control कर सकते है।

Properties of JavaScript Window Object

निचे javascript window object के साथ available properties के बारे में बताया जा रहा है।

  • closed – यह property boolean value return करती है जो यह बताती है की window close है या नहीं। 
  • defaultStatus – इस property द्वारा window के status bar का text set और return किया जाता है। 
  • document – यह property document object return करती है। 
  • frameElement – यह property उस frame का नाम return करती है जिसके अंदर current window है। 
  • frames – यह property किसी window के सभी iframes return करती है। 
  • history – यह property window का History object return करती है। 
  • innerHeight – यह property window की inner height return करती है। 
  • innerWidth – यह property window की inner width return करती है। 
  • length – यह property window के अंदर iframes की सँख्या return करती है। 
  • localStorage – इस property द्वारा browser में key/value pair में information store की जा सकती है। यह information बिना किसी expiration date के store की जाती है। 
  • location – यह property window का location object return करती है। 
  • name – इस property द्वारा window का नाम set और return किया जाता है। 
  • navigator – यह property window का navigator object return करती है। 
  • opener – यह property उस window का reference return करती है जिसके द्वारा current window create हुई है। 
  • outerHeight – यह property किसी window की outer height return करती है। इस height में toolbar included रहता है। 
  • outerWidth – यह property किसी window की outer width return करती है। इस width में scrollbar भी included रहता है। 
  • pageXOffset – Top left corner से जितने pixels दूर एक document horizontally scroll किया जा चूका है यह property उन pixels की सँख्या return करती है। 
  • pageYOffset – Top left corner से जितने pixels दूर एक document vertically scroll किया जा चूका है यह property उन pixels की सँख्या return करती है। 
  • parent – यह property current window की parent window return करती है। 
  • screen – यह property current window का screen object return करती है। 
  • screenLeft – यह property screen के अनुसार window के horizontal coordinates return करती है। 
  • ScreenTop – यह property screen के अनुसार window के vertical coordinates return करती है। 
  • ScreenX – यह property screenLeft property की तरह ही window के horizontal coordinates return करती है। 
  • ScreenY – यह property screenTop property की तरह ही window के vertical coordinates return करती है। 
  • sessionStorage – इस property के एक session के लिए key/value के pair में information browser में store की जा सकती है। 
  • scrollX – यह property pageXOffset property की तरह ही pixels की सँख्या return करती है। 
  • scrollY – यह property pageYOffset property की तरह ही pixels की सँख्या return करती है। 
  • self – ये property current window return करती है। 
  • status – इस property द्वारा browser window का status text set और return किया जाता है। 
  • top – यह property browser की सबसे top window return करती है। 

Methods of JavaScript Window Object

निचे JavaScript window object के साथ available methods के बारे में बताया जा रहा है। 
  • alert() – यह method एक alert box display करता है। Alert box में एक text message होता है और OK button होता है जिसे click करने पर alert box close हो जाता है। 
  • atob() – ये method base 64  की string को decode करता है। 
  • blur() – यह method current window से focus को हटा देता है। 
  • bota() – यह method base 64 में string को encode करता है। 
  • clearInterval() – यह method setInterval() method द्वारा set किये गए timer को remove कर देता है। 
  • clearTimeout() – यह method setTimeout() method द्वारा set किये गए timer को remove कर देता है। 
  • close() – यह method window को close कर देता है। 
  • confirm() – यह method एक confirm box display करता है। Confirm box में एक text message होता है, एक OK button होता है और एक cancel button होता है। 
  • focus() – यह method focus को current window पर set करता है। 
  • getComputerStyle() – यह method किसी element पर apply की गयी CSS style को return करता है। 
  • getSelection() – यह method user द्वारा select किये गए text के आधार पर selection object return करता है। 
  • matchMedia() – यह method एक media query list return करता है। 
  • moveBy() – यह method window को उसकी current position के context में move करता है। 
  • moveTo() – यह method window को एक specific position पर move करता है। 
  • open() – यह method एक नयी browser window open करता है। 
  • print() – यह method current window का content print करता है। 
  • prompt() – यह method के prompt box display करता है जिसमे एक input area होता है जिसमें user value input करता है। 
  • resizeBy() – यह method window को specify किये pixels जितना resize करता है। 
  • resizeTo() – यह method window को specify की गयी height और width जितना resize करता है। 
  • scrollBy() – यह method document को specify किये गए pixels जितना scroll करता है। 
  • scrollTo() – यह method document को specify किये गए coordinates जितना scroll करता है। 
  • setInterval() – यह function किसी expression को set किये गए time period के बाद execute करता है। 
  • setTimeout() – यह function किसी expression को set कि गयी milliseconds के बाद execute करता है। 
  • stop() – यह method window को load होने से रोक देता है। 

Example of JavaScript Window Object

निचे JavaScript के window object का use उदाहरण द्वारा समझाया जा रहा है। 
<!– javascriptWindowObject.html –>

<html>
<body>
<h2>JavaScript Window Object Demo</h2>
// Closing window using button
<input type=”button” value=”Close This Window” onclick=”window.close()”>
</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

JavaScript-window-object-example-in-Hindi

JavaScript in Hindi : History Object

JavaScript History Object

  • Introduction to javascript history object in Hindi
  • Properties of javascript history object in Hindi
  • Methods of JavaScript history object in Hindi

Introduction to JavaScript History Object

JavaScript में history object के द्वारा browser की history को access किया जा सकता है। इसके लिए Document Object Model (DOM) के window object की history property को use किया जाता है। यह एक read only property होती है। यह property history object return करती है।

History object को use करके document की history में किसी भी page को आसानी से देखा और load किया जा सकता है। History object उन सब URLs की list store करता है जो user किसी browser window में visit कर चूका होता है। ये सभी URLs array के रूप में store किये जाते है।

History object के द्वारा provide किये गए properties और methods को use करके आप previous, next या कोई भी पहले visit किया जा चूका particular page load कर सकते है।

Syntax of JavaScript History Object 

History object का general syntax निचे दिया जा रहा है। 
window.history
History object की properties को आप इस प्रकार access कर सकते है।

window.history.propertyName

History object के methods को इस प्रकार access किया जा सकता है।

window.history.methodName

Window object को remove करके आप directly भी history object को use कर सकते है।

history.propertyName;

history.methodName;

आप चाहे तो history object को किसी variable में store करके उस variable द्वारा भी properties और methods को access कर सकते है।

var histry = window.history;

Properties of JavaScript History Object

JavaScript में history object के साथ available properties के बारे में निचे बताया जा रहा है। 

length 

यह property history object में stored किये गए URLs की सँख्या return करती है। 

current

यह property current page का URL return करती है। 

next 

यह property history list से next page का URL return करती है। 

previous 

यह property history list से previous page का URL return करती है। 

Methods of JavaScript History Object

JavaScript history object के साथ available सभी methods के बारे में निचे बताया जा रहा है। 

back()

यह method call किये जाने पर history list में से previous URL को load करता है। यह method किसी browser में back button की तरह काम करता है। 

forward()

यह method call किये जाने पर history list में से next URL को webpage में load करता है। 

go()

यह method call किये जाने पर history list में से एक specific URL load करता है। 

Example of JavaScript History Object

JavaScript history object को निचे उदाहरण द्वारा समझाया जा रहा है।

<!– file1.html –>

<html>

<head>
<title>JavaScript History Object Demo</title>
</head>
<body>
<!– Going to another web page –>
<a href=”file2.html”>Click Here</a>
</body>
</html> 
<!– file2.html –>

<html>
<body>
<h2>JavaScript History Object Demo</h2>
<!– Getting the number of pages visited. –>
<input type=”button” value=”How many pages I have visited!”
onclick=”alert(history.length);”> <br /> <br />
<!– Going to previous web page –>
<input type=”button” value=”Go Back” onclick=”history.back()”>
</body>
</html>

ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

JavaScript-History-Object-Example-in-Hindi-1
JavaScript-History-Object-Example-in-Hindi-2

AJAX in Hindi : Server Response

AJAX Server Response

  • Introduction to AJAX server response in Hindi
  • AJAX Server response properties in Hindi
  • AJAX Server response methods in Hindi

Introduction to AJAX Server Response

AJAX में server से response की process traditional web model से अलग है। Traditional model में जँहा response web browser में directly load हो जाता है, वँही AJAX response प्राप्त करने के लिए आप responseText  और responseXML जैसी properties use करते है।

XMLHttpRequest object की readyState property इसके status को दर्शाती है। जब इस property का status 4 होता है तो यह दर्शाता है की response ready है। XMLHttpRequest object के status को status और statusText जैसी properties से देखा जा सकता है। हालाँकि response प्राप्त करने के लिए status property को भी OK state में होना आवश्यक है।

Traditional web model से AJAX response model कई महत्वपूर्ण advantages provide करता है।

  1. AJAX के द्वारा response को बिना पुरे web page को load किये प्राप्त किया जा सकता है। 
  2. AJAX के द्वारा response JSON format में भी प्राप्त किया जा सकता है। 

Steps of AJAX Response 

AJAX response की process को निचे steps द्वारा समझाया जा रहा है।

  1. यदि request asynchronous है तो सबसे पहले onreadystatechange property में एक function define किया जाता है जो readyState change होने पर call होगा। 
  2. क्योंकि onreadystatechange property में define किया गया function हर बार status change होने पर call होगा। इसलिए इस function की शुरुआत में ये check किया जाएगा की क्या readyState 4 है? और क्या status OK है?
  3. Condition true होने पर DOM के साथ responseText और responseXML properties को use करते हुए response display करवाया जाता है। इसके लिए this object को use किया जाता है। 
  4. यदि request synchronous है तो function create करके condition check करने की कोई जरुरत नहीं होती है। 
  5. Synchronous request के case में XMLHttpRequest object से response display करवाया जाता है।  

AJAX Server Response Properties 

निचे AJAX server response के लिए use की जाने वाली properties के बारे में बताया जा रहा है। 

responseText Property 

Server के response को string के रूप में प्राप्त करने के लिए इस इस property को use किया जाता है। यदि request asynchronous है तो आप इसे function के अंदर DOM के साथ इस प्रकार use करेंगे।

<html>
<body>

<p id=”Response”></p>

<script type=”text/javascript”>

//Creating & sending request

var xmlHttp = new XMLHttpRequest();
xmlHttp.open(“GET”,”info.txt”,true);
xmlHttp.send();

//End of request

//Getting response

xmlHttp.onreadystatechange = function()
{
     if(readyState==4 && status==200) //Checking for status
     {
           document.getElementById(“Response”).innerHTML = this.responseText;
     }
}

//End of response

</script>
</body>
</html>

यदि request synchronous है तो आप इसे directly इस प्रकार use करेंगे।


<html>
<body>

<p id=”Response”

<script type=”text/javascript”>

//Creating & sending request
var xmlHttp = new XMLHttpRequest();
xmlHttp.open(“GET”,”info.txt”,false);
xmlHttp.send();
//End of request

//Getting response

document.getElementById(“Response”).innerHTML = X-H-RObject.responseText;

//End of response
  
</script>
</body>
</html>

responseXML Property

Server से XML के रूप में response प्राप्त करने के लिए आप इस property को use करते है। इस property को use करने के लिए सबसे महत्वपूर्ण बात आपको ये जाननी चाहिए की ये property एक XML DOM object return करती है।

इस object के द्वारा ही आप information को display करवाते है। बाकी process responseText porperty की तरह ही है। इसका उदाहरण निचे दिया जा रहा है।

<html>
<body>

<p id=”Response”></p>

<script type=”text/javascript”>

//Creating & sending request

var xmlHttp = new XMLHttpRequest();
xmlHttp.open(“GET”,”info.txt”,true);
xmlHttp.send();

//End of request

//Getting response

xmlHttp.onreadystatechange = function()
{
    if(readyState==4 && status==200)
    {
        var xmlDoc = xmlHttp.xmlResponse; //Getting XML object
        var res = xmlDoc.getElementByTagName(“Name”);
        var response = document.getElementById(“Response”).innerHTML = res;
    }
}

//End of response

</script>
</body>
</html>

AJAX Server Response Methods

AJAX server response में use किये जाने वाले methods के बारे में निचे दिया जा रहा है। 

getResponseHeader() Method 

यह method server response में से specific header information return करता है। उदाहरण के लिए आप जिस file को server से access कर रहे है उसके बारे में पता करना चाहते है की इसे last कब modify किया गया था।

Asynchronous requests के case में इसे this object के साथ और synchronous request के case में इसे XMLHttpRequest object के साथ call की किया जाता है। इसे निचे उदाहरण के द्वारा समझाया जा रहा है। 

<html>
<body>

<p id=”Response”></p>

<script type=”text/javascript”>

//Creating & sending request

var xmlHttp = new XMLHttpRequest();

xmlHttp.open(“GET”,”info.txt”,true);
xmlHttp.send();

//End of request

//Getting response

xmlHttp.onreadystatechange = function()
{
    if(readyState==4 && status==200)
    {
        document.getElementById(“Response”).innerHTML = this.getResponseHeader(“Last-Modified”);
    }
}

//End of response

</script>

</body>
</html>

getAllResponseHeaders()

यह method server response में से संपूर्ण header information को प्राप्त करने के लिए use किया जाता है। यह method length, server-type, content-type और last modified आदि information return करता है। इसका उदाहरण निचे दिया जा रहा है। 
document.getElementById(“Response”).innerHTML = this.getAllResponseHeader();

AJAX in Hindi : Request

AJAX Request 

  • Introduction to AJAX request in Hindi
  • Methods used for AJAX request in Hindi
  • Types of AJAX request in Hindi



Introduction to AJAX Request

Traditional web model की तरह ही AJAX में भी server को request भेजी जाती है और response प्राप्त किया जाता है। फर्क सिर्फ इतना होता है की ये process AJAX द्वारा बिना दूसरे page elements को disturb किये background में perform की जाती है।

AJAX की working में request का अहम् role होता है। Request के अनुसार ही ये तय होता है की page elements synchronously load होंगे या asynchronously load होंगे। ज्यादातर request किसी event के generate होने पर send की जाती है। इसके लिए JavaScript और XMLHttpObject को use किया जाता है।

उदाहरण के लिए user ने किसी link पर click किया है। अब इस link से जुडी जरुरी जानकारी server से asynchronously प्राप्त करनी है। इस situation में AJAX request भेजी जायेगी।

AJAX द्वारा server को request भेजे जाने की process को निचे steps द्वारा बताया जा रहा है।

  • सबसे पहले JavaScript द्वारा user से generated event को handle किया जाता है। 
  • इसके लिए JavaScript एक function call करती है। 
  • Function में JavaScript द्वारा XMLHttpRequest object create किया जाता है। 
  • Finally server को request भेजने के लिए function में XMLHttpObject के open() और send() methods को call किया जाता है। 

Methods Used For AJAX Request

Server को data send करने के लिए use किये जाने वाले XMLHttpObject के methods के बारे में निचे बताया जा रहा है।

open()

यह method server से connection establish करने के लिए use किया जाता है। इस method को XMLHttpObject पर call किया जाता है। इस method में 3 arguments pass किये जाते है। इसका general syntax निचे दिया जा रहा है।
xmlHttp.open(method, url, async);

  • method – open() method का पहला argument वह method होता है जो आप server को data send करने के लिए use करते है। ये method आपकी request का type भी बताता है। इसके argument के लिए आप GET or POST में से एक value define करते है। GET और POST के बारे में आपको आगे बताया जाएगा। 
  • url – Second argument उस file का url होता है जिसे आप response के रूप में load करना चाहते है। 
  • async – open() method के तीसरे argument के द्वारा आप ये define करते है की आप response को synchronously load करना चाहते है या asynchronously है। इसलिए आप इस argument की value true या false के रूप में define करते है। 

send()

यह method request को send करने के लिए use किया जाता है। इसे आप XMLHttpObject पर call करते है। इस method का general syntax निचे दिया जा रहा है।

यदि आप GET method request द्वारा server से connection establish कर रहे है तो इसके लिए निचे दिया गया syntax use करेंगे।

xmlHttp.send(); //For GET Request method 
यदि आप POST method request द्वारा server से connection establish कर रहे है तो इसके लिए निचे दिया गया syntax use करेंगे।

xmlHttp.send(string);

जब आप POST request method use करते है तो send method में argument के रूप में string pass की जाती है। ये string double quotes में लिखी जाती है। इसे name=value के pair में लिखा जाता है। ये string वह value होती जो server को data send करने के लिए जरुरी होती है। जैसे की username, password आदि। इसका उदाहरण निचे दिया जा रहा है।

xmlHttp.send(“userName=BHT”);

Types of AJAX Request

AJAX request को 2 categories में divide किया जा सकता है।

  1. Synchronous – जब आप चाहते है की browser किसी भी दूसरे code को execute करने से पहले AJAX request के complete होने का इंतज़ार करे तो आप इस तरह की request को send करेंगे। इस तरह की request के लिए open() method के async parameter को false define किया जाता है। इस तरह की request को recommend नहीं किया जाता है।  
  2. Asynchronous – इस तरह के request में processing background में की जाती है जो की AJAX का एक feature है। इस तरह की request के लिए open() method के async parameter की value true define की जाती है। By default AJAX request asynchronous mode में ही send की जाती है। 

इन दोनों तरह की AJAX reqeust को निचे examples द्वारा समझाया जा रहा है। 

Example

Asynchronous requests के लिए आपको function define करना होता है। इस function में check किया जाता है की क्या server द्वारा response ready है। साथ ही ये भी check किया जाता है की status ok है या नहीं। इसके बाद DOM को use करते हुए server का response display करवाते है।

DOM को response asynchronously load करने के लिए use किया जाता है। इसके लिए आप XMLHttpRequest object की responseText property को use करते है। इसका उदाहरण निचे दिया जा रहा है।

<html>
<body>

<button type=”button” onclick=”myFunction()”>Click here</button>

<p id=”response”></p>

<script type=”text/javascript”>

function myFunction()
{
    var xmlHttp = new XMLHttpRequest();  //Creating XMLHttpObject request

    xmlHttp.open(“GET”,”info-file.txt”,true);  //Open Method
    xmlHttp.send();  //Send method

    xmlHttp.onreadystatechange=function() //For detecting response ready state
   {
         if(this.readyState==4 && this.status==200)  //Checking ready state & request status
        {
            document.getElementById(“response”).innerHTML=this.responseText;  //Displaying response
        }
   };

}

</script>

</body>
</html>

यदि request asynchronous नहीं है तो आपको function define करने की कोई जरुरत नहीं होती है। इसके लिए आप send method के बाद सीधे ही responseText property से response display करवा सकते है। इसका उदाहरण निचे दिया जा रहा है।

<html>
<body>

<button type=”button” onclick=”myFunction()”>Click Here</button>

<p id=”result”></p>

<script type=”text/javascript”>
function myFunction()
{
    xmlHttp = new XMLHttpRequest();
    xmlHttp.open(“GET”,”info-file.txt”,false);
    xmlHttp.send();
    document.getElementById(“result”).innerHTML=xmlHttp.responseText;
}
</script>

</body>
</html>

AJAX in Hindi : XMLHttpRequest Object

XMLHttpRequest Object

  • Introduction to XMLHttpRequest Object in Hindi
  • Properties of XMLHttpRequest Object in Hindi
  • Methods of XMLHttpRequest Object in Hindi

Introduction to XMLHttpRequest Object 

XMLHttpRequest साधारण object की form में एक API है। इसके methods browser और server के बीच data transfer करते है। यह object JavaScript द्वारा provide किया जाता है। इस object का मुख्यः उद्देश्य load हुए page को बार बार modify करना है।

XMLHttpRequest Object AJAX का सबसे महत्वपूर्ण component है। AJAX इस object के बिना काम नहीं कर सकती है। क्योंकि AJAX का सबसे बड़ा feature page को reload किये बिना elements को update करना इसी object द्वारा implement किया जाता है।

सभी modern browser इस object को support करते है। Internet Explorer 5 और 6 ActiveXObject use किया जाता है। Internet Explorer के पुराने versions के लिए भी इसी object को use किया जाता है। बाकी सभी browsers में इस object के लिए built in support आता है।

XMLHttpRequest Object द्वारा data XML, JSON (JavaScript Objection Notation) और plain text के रूप में process किया जा सकता है। इसलिए AJAX बहुत reliable है और widely use की जाती है। यह Object HTTP protocol के अलावा दूसरे protocols के साथ भी काम करता है।

XMLHttpRequest Object Properties

निचे XMLHttpRequest object के साथ available properties के बारे में बताया जा रहा है। 

readyState

यह property XMLHttpRequest Object के current status को store करती है। Status 0 से लेकर 4 तक numbers से define किया जाता है। हर number का मतलब होता है। यह status processing के दौरान बदलता रहता है। 
  • 0 – यह status number बताता है की request अभी initialize नहीं हुई है। 
  • 1 – यह status बताता है की server connection establish हो गया है। 
  • 2 – यह status बताता है की request receive कर ली गयी है। 
  • 3 – यह status बताता है की request process की जा रही है। 
  • 4 – यह status बताता है की request की processing complete हो चुकी है और response send होने के लिए ready है। 

onreadystatechange

XMLHttpRequest object की इस property में उस function का नाम store किया जाता है जो हर बार readyState change होने पर call होगा। 

responseText 

यह property response data को string के रूप में return करती है। इसकी value को आप किसी भी normal JavaScript variable में store करके display करवा सकते है। 

responseXML

यह property response data को XML data के रूप में return करती है। 

status 

यह property status return करती है। यदि request successful नहीं है तो 404 (NOT FOUND) status return करेगा। यदि request successful है तो 200 (OK) return करेगा। 

statusText 

यह property status को text के रूप में return करती है। यदि request successful है तो OK return किया जायेगा नहीं तो NOT FOUND text के रूप में return किया जाएगा। 

XMLHttpRequest Object Methods

XMLHttpRequest Object के साथ available methods के बारे में निचे दिया जा रहा है। 

open(method,URL,Async,UserName,Password) 

यह method XMLHttpRequest Object का सबसे महत्वपूर्ण method है। इसी method द्वारा server से connection establish किया जाता है। इस method में 5 parameter pass किये जाते है। इनके बारे में निचे बताया जा रहा है। 
  • Method – इस parameter से आप connection establish करने के लिए use किया जाने वाला method define करते है। इस parameter में आप GET या POST में से एक value pass करते है। 
  • URL – इस parameter द्वारा server पर store file की location define की जाती है। 
  • Async – इस paramter की value true और false में दी जाती है। इस parameter से आप ये define करते है की data को synchronously access करना है या asynchronously access करना है। 
  • UserName – इस parameter से आप connection establish करने के लिए user name define करते है। 
  • password – इस parameter से आप connection establish करने के लिए password define करते है। 

send(String)

यह method server को request भेजने के लिए use किया जाता है। इस method को POST requests के case में use किया जाता है।

send()

यह method server को request भेजने के लिए use किया जाता है। इस method को GET requests के case में use किया जाता है। 

new XMLHttpRequest()

यह method एक नया XMLHttpRequest object create करता है। 

setRequestHeader() 

यह method send की जाने वाली header में label/value का pair add करता है। 

getResponseHeader()

यह method कोई specific header information return करता है। 

getAllResponseHeaders()

यह method complete header information return करता है। 

abort() 

यह मेथड current request को cancel करता है। 

Creating XMLHttpRequest Object

XMLHttpRequest object करने के लिए आप new XMLHttpRequest() method use करते है इसका general syntax निचे दिया जा रहा है।

var = new XMLHttpRequest();

ऊपर दिए गए syntax में var एक JavaScript variable है जो XMLHttpRequest object को store करेगा। XMLHttpObject create करना निचे उदाहरण द्वारा समझाया जा रहा है।

var xmlHttp = new XMLHttpRequest();

यदि browser Internet Explorer 5 या 6 है तो आप XMLHttpObject इस प्रकार create करेंगे।

var = new ActiveXObject(“Microsoft.XMLHTTP”);

AJAX in Hindi : Introduction

AJAX in Hindi 

  • Introduction to AJAX in Hindi 
  • Core components of AJAX in Hindi
  • Advantages of AJAX in Hindi 

Introduction to AJAX (Asynchronous JavaScript and XML)

Normally एक web browser किसी web page के लिए request करता है और web server उसे requested web page के रूप में respond करता है। जैसे ही page आपके browser में load होता है तो web browser और web server के बीच का connection terminate हो जाता है।

यह web द्वारा use किये जाने वाला traditional web model होता है। यदि किसी दूसरे page के लिए request की जाती है तो वापस यही process follow होती है। 

जब भी user के द्वारा किसी page के लिए request भेजी जाती है तो नयी information को show करने के लिए existing page को reload होना पड़ता है। Page reload होने के बाद ही नयी information या नया page show होता है। कई बार यह process user experience के लिए बहुत annoying होती है।

यदि आप YouTube जैसी बड़ी web application बना रहे है तो जाहिर है उसमें web elements भी बहुत अधिक होंगे। ऐसे में यदि हर small element से interact करते समय page बार बार reload हो तो आपकी web application bad user experience create करेगी। 

उदाहरण के लिए आप YouTube पर कोई video देख रहे है। ये video आपको पसन्द आता है और आप इसे like करने के लिए like button पर click करते है। यदि Like button पर click करते ही पूरा page reload हो जाये तो आपको बिलकुल भी अच्छा नहीं लगेगा। शायद आप कभी किसी video को like ही ना करें।

लेकिन ऐसा नहीं होता है। जब भी आप YouTube पर video देखते समय किसी video को like करते है तो page reload नहीं होता है सिर्फ वह like button ही update होता है और उसमें likes की सँख्या increase हो जाती है। आपका video बिना किसी problem के चलता रहता है।

ऐसा कैसे होता है? YouTube इसके लिए AJAX को use करती है। AJAX क्या है?

AJAX का पूरा नाम Asynchronous JavaScript and XML है। इसे आप एक techniques का set या methodology कह सकते है जो कई web technologies (HTML & CSS, JavaScript, DOM, XML) को use करते हुए Asynchronous web pages create करने के लिए use की जाती है। Asynchronous web pages क्या होते है?

Asynchronous web pages ऐसे web pages होते है जिनमें कुछ elements को update या load होने के लिए पुरे page को load होने की आवश्यकता नहीं होती है। नया content dynamically web page में load होता है। ऐसे pages में processing background में की जाती है।

User इस processing से interfere नहीं होता है। ऐसा कैसे होता है? इसके बारे में आपको आगे Working of AJAX section में बताया जाएगा। आइये उससे पहले AJAX के core components, advantages और disadvantages के बारे में जानने का प्रयास करते है।

Core Components of AJAX

जैसा की मैने आपको पहले बताया AJAX में कई technologies एक साथ मिलकर Asynchronous web pages generate करती है। ये technologies AJAX के core components होते है। इनके बारे में निचे दिया जा रहा है।

  • HTML & CSS – HTML और CSS को presentation के लिए use किया जाता है। HTML और CSS के माध्यम से आप एक beautiful web page design कर सकते है। 
  • JavaScript – JavaScript के द्वारा generate किये गए local events को handle और process किया जाता है। 
  • DOM (Document Object Model) – DOM को page के andar से data access करने और dynamically data present करने के लिए use किया जाता है। 
  • XMLHttpRequest Object – Server को asynchronously data send और receive करने के लिए ये object use किया जाता है। 

Advantages of AJAX 

निचे AJAX की कुछ advantages दी जा रही है।

  • AJAX की मदद से आप fast, dynamic websites create कर सकते है। 
  • क्योंकि JavaScript एक client side scripting language है, इसलिए सारी processing server पर ही नहीं होती है। कुछ process client machine पर भी होती है। इससे server पर load कम हो जाता है और processing fast हो जाती है। 
  • AJAX के माध्यम से end user को एक better experience दिया जा सकता है क्योंकि AJAX processing background में करने में संभव है। इससे user interfere नहीं होता है। 
  • AJAX के साथ आपको सभी open source JavaScript libraries available है जिन्हें आप अपनी web application को improve करने के लिए use कर सकते है। 

Disadvantages of AJAX

AJAX की कुछ disadvantages निचे दी जा रही है। 
  • यदि user के web browser में JavaScript disabled है तो AJAX आधारित web application काम नहीं करेगी। 
  • क्योंकि web page का data dynamically load किया जाता है इसलिए वह web page का part नहीं होता है। यही कारण है की ऐसे data को search engines देख नहीं पाते है और index नहीं करते है। 
  • जब आप AJAX use करते है तो Back और Refresh button ठीक से function नहीं करते है। 
  • Asynchronous mode की वजह से यदि कभी server को process करने में time लगता है तो page annoying लगता है। 

Working of AJAX 

AJAX की working निचे एक diagram द्वारा समझायी जा रही है। 
Working-of-AJAX-in-Hindi
जैसा की आप ऊपर दिए गए diagram में देख सकते है web browser द्वारा पहली request और web server द्वारा पहला response एक traditional web model की तरह process होता है। इसके बाद जब भी वापस server से data fetch करना होता है ये काम locally JavaScript द्वारा request भेजी जाती है।

उदाहरण के लिए user के like button पर click करने पर server को update करना है तो इसके लिए JavaScript का onclick event handle करना होगा। इस event के generate होने पर आप एक function call करेंगे। इस function में आप XMLHttpRequest Object को use करते हुए ये request server को pass करेंगे।

Server तक यह request AJAX engine से होकर जाती है। इस object के बारे में आपको एक separate tutorial में बताया जाएगा।

AJAX engine client side पर ही होता है। AJAX engine यँहा पर कुछ भी नहीं बल्कि JavaScript और XMLHttpRequest object का combination होता है। AJAX engine page background में server से connection establish करेगा और number of likes को update करेगा।

AJAX engine ये काम बिना web page को disturb किये perform करता है। इसके बाद server update वापस AJAX engine को भेजेगा। AJAX engine द्वारा HTML से लेकर XML और JSON किसी भी प्रकार के format को process किया जा सकता है। AJAX engine द्वारा भेजे गए data से JavaScript उसी element को update करती है।

AJAX Uses Example 

कई बड़ी web applications द्वारा AJAX को use किया गया है। उदाहरण के लिए जब आप google पर कोई term search करते है तो जो suggestions आपको show किये जाते है वे AJAX द्वारा ही show किये जाते है। जैसे ही आप कोई term type करते है AJAX background में work करते हुए server से आपके लिए suggestions fetch करती है।

AJAX-uses-example-in-Hindi

AJAX को दूसरा उदाहरण आप YouTube या Facebook like button को देख सकते है। जब आप किसी post या फिर video को like करते है तो बिना page reload हुए likes की सँख्या बढ़ जाती है। यह भी AJAX द्वारा ही किया जाता है।

AJAX-uses-example-2