What is ajax in Hindi

Table of Contents

1 Introduction
2 What is ajax in hindi?
3 Jquery Ajax methods in hindi
4 Introduction about all ajax parameter
5 Ajax parameter introduction

Introduction

हेलो दोस्तों आज हम इस पोस्ट में ajax के बारेमे जानेगे. तो ajax के बारे में आपको में basic सा introduction करा देता हु मान लीजिये एक HTML form है और इस form के submit पर हमरा webpage refresh ya दूसरे किसी बी webpage में move हुवे बिना data को database में save करना है तो उस वकत हम ajax का इस्तेमाल कर सकते है!. तो ajax के बारेमे आगे जानेगे!.

What is ajax in hindi?

AJAX का full form Asynchronous JavaScript and XML है!. ajax हमें बिना page, को refresh या load किये back-end side server से data fetch करके available करवाता है!. और data को हमें बिना page refresh किये बिना update और delete बी करवा सकते है!. ajax एक browser based application है!. और ajax का इस्तेमाल database से interactive करके data को मैनेज करने के लिए इस्तेमाल किया जाता है!. ajax web-server से data को web-browser में data को transfer यानि send करता है!.

Jquery Ajax methods in hindi

the ajax() method का इस्तेमाल ajax( asynchronous HTTPS ) request perform करने के लिए इस्तेमाल किया जाता है!. सभी jquery ajax method ajax() function के इस्तेमाल करते है!.

Syntax:

$.ajax({ name:value, name:value,.. })

यह निचे के example में ajax के सभी parameter को declared करूँगा और उसके बारेमे बतावुंगा!.

Example:

$.ajax({
	type:'POST',
	url:url,
	data:data,
	beforeSend:function(){
		//to something...
	},
	success:function(){
		//do something...
	},
	error:function(){
		//do something...
	},
	complate:function(){
		//do something...
	},
  	dataType:datatype
   });

तो दोस्तों हमने ऊपर के example में ajax के सभी parameter declared किये है तो हम सभी parameter के बारेमे एक example के जरिये समझेंगे!.

Introduction about all ajax parameter

Ajax के सभी parameter के बारेमे समजे इसके पहले हम एक HTML form create कर लेते जिससे की समझने में थोड़ी आसानी हो!.

HTML form

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">  
  
   $("#formdata").submit(function(){  
      var fname = $("#fname").val();  
      var lname = $("#lname").val();  
      $.ajax({  
         type:"POST",  
         url:"direction.php",  
         data:"fname="+fname+'&lname='+lname,  
         success:function(data){  
            alert(data);  
         }  
      });  
   });  
  
</script> 
</head>
<body>
<div class="container">
  <h2>form</h2>
   <form action="#" id="formdata" method="POST">
 	<input type="text" name="fname" id="fname">
 	<input type="text" name="lname" id="lname">
 	<input type="submit" name="submit">
   </form>
</div>
</body>
</html>

Ajax parameter introduction

1. type: type parameter HTTP request का type specifies करता है ( GET और POST) और default request type GET method set होती है!.

GET method

<script type="text/javascript">  
  
   $("#formdata").submit(function(){  
      var fname = $("#fname").val();  
      var lname = $("#lname").val();  
      $.ajax({  
         type:"GET",  
         url:url,  
         data:"fname="+fname+'&lname='+lname,  
         success:function(data){  
            alert(data);  
         }  
      });  
   });  
  
</script>

POST method

<script type="text/javascript">  
  
   $("#formdata").submit(function(){  
      var fname = $("#fname").val();  
      var lname = $("#lname").val();  
      $.ajax({  
         type:"POST",  
         url:url,  
         data:"fname="+fname+'&lname='+lname,  
         success:function(data){  
            alert(data);  
         }  
      });  
   });  
  
</script>

2. URL: URL parameter, यह specifies करता है की send की जाने वाली request की destination (direction) यानि request कोनसी file में send की जनि है और उसकी default request current page पर ही send होती है!.

<script type="text/javascript">  
  
   $("#formdata").submit(function(){  
      var fname = $("#fname").val();  
      var lname = $("#lname").val();  
      $.ajax({  
         type:"POST",  
         url:"direction.php",  
         data:"fname="+fname+'&lname='+lname,  
         success:function(data){  
            alert(data);  
         }  
      });  
   });  
  
</script>

3. data: data parameter, यह server को send किये जाने वाले data को specifies करता है!.

<script type="text/javascript">  
  
   $("#formdata").submit(function(){  
      var fname = $("#fname").val();  
      var lname = $("#lname").val();  
      $.ajax({  
         type:"POST",  
         url:"direction.php",  
         data:"fname="+fname+'&lname='+lname,             
      });  
   });  
  
</script>

4. beforeSend: जब ham server पर request भेजते है तो उससे पहले beforeSend callback function execute होता है!.

<script type="text/javascript">  
  
   $("#formdata").submit(function(){  
      var fname = $("#fname").val();  
      var lname = $("#lname").val();  
      $.ajax({  
         type:"POST",  
         url:"direction.php",  
         data:"fname="+fname+'&lname='+lname, 
	     beforeSend: function(data){  
            alert(data);  
         }             
      });  
   });  
  
</script>

5. success: अगर send की request successfully execute होती है! तब success callback function execute होता है!.

<script type="text/javascript">  
  
   $("#formdata").submit(function(){  
      var fname = $("#fname").val();  
      var lname = $("#lname").val();  
      $.ajax({  
         type:"POST",  
         url:"direction.php",  
         data:"fname="+fname+'&lname='+lname,  
         success:function(data){  
            alert(data);  
         }  
      });  
   });  
  
</script>

6.error: अगर send की गे request fails होती है तब error function execute होते है!.

7. complete: अगर request successfully executes होती है और request execution complete होता है तब complete callback function executes होता है!.

<script type="text/javascript">  
  
   $("#formdata").submit(function(){  
      var fname = $("#fname").val();  
      var lname = $("#lname").val();  
      $.ajax({  
         type:"POST",  
         url:"direction.php",  
         data:"fname="+fname+'&lname='+lname,  
         complete:function(data){  
            alert(data);  
         }  
      });  
   });  
  
</script>

8. dataType: datatype यह specifies करता है की server-side से जो data response में आएंगे उसे data का data type कोनसा होगा या तो वह json fomate होगा और HTML, text जैसे formate में ajax का response होंगे!.

<script type="text/javascript">  
  
   $("#formdata").submit(function(){  
      var fname = $("#fname").val();  
      var lname = $("#lname").val();  
      $.ajax({  
         type:"POST",  
         url:"direction.php", 
	 dataType: "json", 
         data:"fname="+fname+'&lname='+lname,  
         complete:function(data){  
            alert(data);  
         }  
      });  
   });  
  
</script>