Ajax in Hindi

First Page
Next Page

AJAX की Full Form Asynchronous JavaScript and XML है. AJAX interactive web applications बनाने के लिए एक web development technique है. यदि आप JavaScript, HTML, CSS और XML अच्छे जानते हैं तो आप AJAX को बहुत आसानी से सीख सकते हो.

AJAX Content के लिए XHTML का उपयोग करता है और Presentation के लिए CSS, Document Object Model और Dynamic Content Display के लिए JavaScript के साथ उपयोग किया जाता है.

AJAX एक ऐसी Technology है जिसकी मदद से Page को बिना Refresh किये ही Server से Information Page पर लायी जाती है. Dynamic Website बनाने में AJAX का बहुत अधिक Use किया जाता है क्यूंकि AJAX की सारी Processing Backend में होती है और बिना Page Reload हुए ही Page पर Server से Information लायी जा सकती है.

AJAX अब तक का सबसे Viable Rich Internet Application (RIA) Technology है. यह जबरदस्त Industry Speed प्राप्त कर रहा है और इसमें से कई Tool Kit और Frameworks निकल रहे हैं. लेकिन साथ ही, AJAX में Browser Incompatibility है और यह JavaScript द्वारा Supported है जो की बनाए रखना और Debug करना मुश्किल होता है.

AJAX Syntax

$.ajax({
 
  url:'your-file-name.php',
  type:'post',
  data:{container:variable},
  datatype:'json',
  cache:false,
  success:function(s){
                 
          },
  error:function(err){
                 
     }
             
    });

यह jQuery के AJAX का एक Function है जिसकी सहायता से आप Page से Data Server तक Send कर सकते हैं.

  • URL – इसमें आपको अपनी PHP File का Path देना होता है जिसमे आपका PHP Code लिखा होता हैं.

  • Type – इसमें आपको Get और POST दोनों में से कोई एक Request Send करनी होती है.

  • Data – इसमें आपको अपना Data Send करना होता है यहाँ आप Array और Variable को भी Send कर सकते है.

  • Datatype – इसमें आप JSON दे सकते हैं क्यूंकि AJAX में Array को Send करने के लिए JSON का ही Use किया जाता है अगर आप Array नहीं Send करते हैं तो datatype लिखना जरुरी नहीं है.

  • Cache – इसको आपको False रखना होगा वरना Browser अपनी Cache से ही Request Send कर सकता है और Error आ सकती है.

  • Success – यदि आपका Function Successful रहा तो PHP File से जो भी Data वापस मिलेगा वह Success Function के S नामक Variable में आ जायेगा.

  • Error – यदि Ajax में कोई Error आती है तो err Variable में वो Error Message आ जायेगा

Ajax in Hindi Features

Ajax का मुख्य Feature यह है की ये Web Page तेजी से बनाता है. Ajax Web Page के केवल महत्वपूर्ण भाग को पुन Reload करने की अनुमति देता है.

Important Features of Ajax

  • यह Web Page को तेज़ बना देता है.

  • यह Server Technology के लिये Independent है .

  • Ajax Web Page की Performance को Increase करता है.

  • Ajax मे किसी Submit Button पर दबाव डालने और पूरी Website को Reloading करने की आवश्यकता नही होती है.

  • Ajax मे पूरे Page को पुनः Reload करने की कोई आवश्यकता नहीं होती है इसमें केवल Page के कुछ हिस्से को पुनः Reload किया जाता है.

  • XMLHTTP Object को प्राप्त करने के अलावा सभी Processing सभी Browser Types के लिए समान है क्योंकि इसमें का JavaScript उपयोग किया जाता है.

  • Ajax का इस्तेमाल तेजी से और अधिक Interactive Web Applications को Develop करने के लिये किया जाता है.

Uses of Ajax

Web पर चलने वाली ऐसी बहुत सारी Web Applications हैं जो Ajax Technology का उपयोग करती है जैसे की -

  • Gmail

  • Facebook

  • Twitter

  • Google

  • Youtube

Ajax in Hindi Technologies

Ajax को Describe करने से पहले Ajax एक Technology नहीं बल्कि Inter-related Technologies का समूह है. Ajax मे निम्नलिखित Technologies का उपयोग किया जाता है जैसे की -

HTML/XHTML and CSS

इन Technologies का उपयोग Content और Style को Display करने के लिए किया जाता है. यह मुख्य रूप से Presentation के लिए प्रयोग किया जाता है .

DOM

यह Data के साथ Dynamic Display और Interaction के लिए उपयोग किया जाता है.

XML or JSON

Server की और Data को ले जाने के लिए JSON (Javascript Object Notation) XML की तरह है लेकिन XML की तुलना में यह Small और Fast है.

XMLHttpRequest

JavaScript Object में Server के साथ Asynchronous Interaction करता है.

JavaScript

इसका उपयोग Technologies को एक साथ लाने के लिए किया जाता है यह Client-side सत्यापन के लिए उपयोग किया जाता है और किसी Server पर Data को भेजने से पहले एक HTML Form मे User Input को Validate करता है.

Ajax in Hindi Advantage and Disadvantage

AJAX अलग-अलग Websites के मूल भाग में बढ़ रहा है और यह एक अलग सुरक्षित Brands Online उपयोग करके अब AJAX को अपने Web Applications को रखने के लिए यह अपने उपयोगकर्ता के लिए बेहतर Intelligence प्रदान करता है.

Advantages of AJAX

  • AJAX Client और Cerver के बीच यातायात यात्रा को कम करता है.

  • AJAX HTTP Protocol पर Communicates करता है.

  • AJAX Server Technology पर Independent काम करता है.

  • AJAX XMLHTTP Object प्राप्त करने के अलावा सभी Processing सभी Browser Types के लिए समान है क्योंकि यह JavaScript मे उपयोग किया जाता है.

  • AJAX का उपयोग तेजी से और अधिक Interactive Web Applications को Develop करने के लिये किया जाता है.

  • AJAX आधारित Application बहुत कम Server Bandwidth का उपयोग करती हैं क्योंकि इसमें सभी Page को Reload करने की कोई आवश्यकता नही होती है.

Disadvantage of Ajax

  • AJAX सभी Browsers पर नही Run होता है.

  • Google जैसे Search Engine को Ajax Pages को Index नहीं कर सकता है.

  • AJAX application मे सुरक्षा Security कम है.

  • कोई भी AJAX के लिए लिखे गए Source Code को देख सकता है.

  • यह Design और Development के Time को Increase कर सकता है.

Ajax in Hindi Examples

यहां पर आप कुछ Famous Web Applincatios की एक List देखेंगे जो जो AJAX का उपयोग करती हैं.

Google Maps

कोई User किसी Button पर Click करने के बजाय Mouse का उपयोग करके एक Entire Map को Drag कर सकता है.

Google Suggest

जैसे-जैसे आप कुछ लिखते जाते है वैसे ही Google सुझाव देता है की Results को Navigate करने के लिए Arrow Keys का उपयोग करे.

Gmail

Gmail एक नए प्रकार का Webmail है और इसको इस विचार पर बनाया गया है कि Email अधिक Intuitive, Efficient और उपयोगी हो सकता है.

Yahoo Maps

अब कहाँ जा रहे हैं यह पाने के लिए अब और भी आसान और मज़ेदार Web Applincatios है.

Ajax in Hindi XMLHttpRequest

XMLHttpRequest एक Object Client और Server के बीच Asynchronous Communication के लिए उपयोग किया जाता है.

आप नीचे लिखे कुछ Operations को Follow कर सकते है.

  • यह Background मे Client से Data को Send करता है.

  • यह Server से Data को प्राप्त करता है.

  • इसे पुनः Reload किए बिना Webpage पर Update करते है.

Properties of XMLHttpRequest Object

Property Description
onReadyStateChange यह Stores Function को या Function के नाम को स्वचालित रूप से हर बार ReadyState Property मे बदलता है.
readyState यह अनुरोध की स्थिति को Represents करता है जिसकी Ranges 0 से लेकर 4 तक होती है .

  • 0: Request को Initialized नहीं किया गया.

  • 1: Server Connection की स्थापना की.

  • 2: HEADERS_RECEIVED भेजने () को कहा जाता है और Headers और स्थिति उपलब्ध है.

  • 3: LOADING Data को Download करना और ResponseText Data को रखती है.

  • 4: Request Finished हो गयी है और प्रतिक्रिया तैयार है.

Methods of XMLHttpRequest Object

Property Description
void open(method, URL) यह प्राप्त या Post Method और URL को Specify करने के अनुरोध को Open करता है.
void open(method, URL, async) यह ऊपर की तरह है लेकिन ये Asynchronous को Specify नहीं करता है.
void open(method, URL, async, username, password) यह भी उपरोक्त के समान है लेकिन यह Username और Password को Specify करता है.
void send() यह Sends Request भेजता है.
void send(string) यह Post Request Sends करता है.
setRequestHeader(header,value) यह Request Headers को Add करता है.

सभी Modern Browsers XMLHttpRequest Object का समर्थन करते हैं IE5 और IE6 को छोड़कर एक ActiveXObject का उपयोग करे.

XMLHttpRequest Object को एक Scenes के पीछे Server के साथ Data को Exchange करने के लिए उपयोग किया जाता है इसका अर्थ है कि Whole Page को पुनः Reload किए बिना Web Page के कुछ Parts को Update करना संभव है.

Create an XMLHttpRequest Object

सभी Modern Browsers IE7+, Firefox, Chrome, Safari, और Opera में एक built-in XMLHttpRequest Object है.

Syntax

variable=new XMLHttpRequest();

For Example

variable=new ActiveXObject("Microsoft.XMLHTTP");

Ajax in Hindi Create Object

XMLHttpRequest एक Object Client और Server के बीच Asynchronous Communication के लिए उपयोग किया जाता है.

सभी Modern Browsers XMLHttpRequest Object का समर्थन करते है IE5 और IE6 को छोड़कर एक ActiveXObject का उपयोग करे.

XMLHttpRequest Object को एक Scene के पीछे Server के साथ Data Exchange करने के लिए उपयोग किया जाता है. इसका अर्थ है कि Whole Page को पुनः Reload किए बिना Web Page के कुछ Parts को Update करना संभव है.

Create an XMLHttpRequest Object

हम सभी लोकप्रिय Browsers (Firefox, Chrome, IE7 +, Safari, Opera) के XMLHttpRequest का एक उदाहरण बना सकते है . सभी Modern Browsers IE7+, Firefox, Chrome, Safari, Opera मे एक built-in XMLHttpRequest Object है .

Syntax

var variable_name;
variable_name=new XMLHttpRequest();

var variable_name=new XMLHttpRequest();

Create an object of ActiveXObject

Internet Explorer IE5 और IE6 के पुराने Versions एक ActiveX Object का उपयोग करते है.

Syntax

var variable_name;
variable_name=new ActiveXObject("Microsoft.XMLHTTP");

var variable_name=new ActiveXObject("Microsoft.XMLHTTP");

Ajax in Hindi Request

XMLHttpRequest Object निम्न Methods को Server से Interact करने की अनुमति है.

Property Description
open(method, url, boolean) Method URL और Boolean के प्रकार को Specifie करता है यदि Asynchronous या Handle Synchronous से False की तुलना में True है.

  • Method: Request के Type प्राप्त करे GET और POST करें.

  • Url: Server पर File का स्थान पथ के साथ है.

  • Boolean: True (asynchronous) या false (synchronous).

  • Optionally रूप से आप Login और Password की Wish को Arguments में जोड़ सकते हैं.
send("string") String: केवल POST Method Request का उपयोग करता हैं.

GET or POST Method

  • GET जो की POST से सरल और तेज है इसलिए अधिकतर GET का उपयोग करते हैं.

  • Server पर बड़ी मात्रा मे Data भेजने पर POST Request का इस्तेमाल होता है Update मे Server पर भी शामिल होता है POST GET से सुरक्षित और मजबूत तरीका है.

  • Server पर बड़ी मात्रा मे Data भेजने पर POST Request का इस्तेमाल होता है.

GET Method

Syntax

xmlhttp.open("GET", url, true)  // xmlhttp is variable name
xmlhttp.send()
For Example Send a Request to Server using Ajax 
req.open("GET", "ajax_demo.txt", true); // req is variable name
req.send(null);

Post Method

Syntax

xmlhttp.open("POST", url, true)   // xmlhttp is variable name
xmlhttp.send(String)
For Example Send a Request to Server using Ajax 
req.open("POST", "ajax_demo.txt", true); // req is variable name
req.send("hitesh");

Ajax in Hindi Response

किसी Server से Response पाने के लिए XMLHttpRequest Object के ResponseText और ResponseXML का उपयोग करे.

Property Description
responseText यह एक String के रूप मे Response Data प्राप्त करता है.
responseXML XML Data के रूप मे Response Data को प्राप्त करते है.

The responseText Property

यदि Server से Response XML नहीं मिलता है तो ResponseText Property का उपयोग करे. ResponseText Property एक Response के रूप मे एक String देता है और आप इसके अनुसार इसका उपयोग कर सकते है.

The responseXML Property

यदि Server से Response XML है और आप उसे XML Object के रूप मे Parse करना चाहते हैं तो प्रतिक्रिया XML Properties का उपयोग करे.

Ajax in Hindi Callback Function

एक Callback Function किसी Function के Parameter के रूप में Passed Function है.

यदि आपकी Website पर एक से अधिक AJAX कार्य करते है, तो आपको XMLHttpRequest Object बनाने के लिए एक Standard Function बनाना चाहिए, और प्रत्येक AJAX कार्य करने के लिए इसे Call करे.

Function Call मे URL होना चाहिए और onreadystatechange पर क्या करना चाहिए जो शायद प्रत्येक Call के लिए अलग है.

Callback Function in Ajax Example

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
First Page
Next Page