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>

      DMCA.com Protection Status

 Leave a comment