Ajax Kya Hai

AJAX Tutorial Beginners और Professionals के लिए AJAX Technology के Concepts और उदाहरणों को शामिल करता है.

AJAX एक संक्षिप्त रूप है जो Asynchronous Javascript और XML के लिए है और यह वेबसाइटों और Web Applications को बनाने के लिए उपयोग की जाने वाली डेवलपमेंट तकनीकों के एक सेट का वर्णन करता है.

वेब डेवलपर और स्किलक्रश वर्डप्रेस प्रशिक्षक एन कैस्केनो के अनुसार AJAX को समझने का सबसे अच्छा तरीका Web Development Process में इसके विशिष्ट उद्देश्य की पहचान करना है. AJAX का मुख्य कार्य वेब सामग्री को Asynchronous रूप से अपडेट करना है. AJAX के द्वारा उपयोगकर्ता के वेब ब्राउज़र को संपूर्ण वेब पेज को पुनः लोड करने की आवश्यकता नहीं है जब पृष्ठ पर सामग्री के केवल एक छोटे हिस्से को बदलने की आवश्यकता होती है.

यह JavaScript, DOM, XML, HTML, CSS आदि जैसी inter-related Technologies का एक Group है.

AJAX आपको Web Page को पुनः Reload किए बिना Asynchronously Data को Send और Receive करने की अनुमति देता है.

AJAX आपको केवल Important Information Server पर Send करने की अनुमति देता है न कि Entire Page की अनुमति देता है.

इसलिए Client की ओर से केवल Valuable Data Server Side पर Routed किया गया है.

यह आपकी Application को Interactive और Fast बनाता है.

AJAX कैसे काम करता है

कैस्केरानो के अनुसार एसिंक्रोनस अपडेट करने के लिए जावास्क्रिप्ट और एक्सएमएल संयोजन एक XMLHttpRequest ऑब्जेक्ट नामक कुछ के उपयोग के माध्यम से होता है. जब कोई उपयोगकर्ता AJAX का उपयोग करने के लिए डिज़ाइन किए गए वेब पेज पर जाता है और एक निर्धारित घटना होती है इसके बाद जब उपयोगकर्ता पृष्ठ को लोड करता है तब एक बटन क्लिक करता है और एक फॉर्म भरता है आदि. जावास्क्रिप्ट एक XMLHttpRequest ऑब्जेक्ट बनाता है जो तब एक XML में डेटा Moved करता है.

एक वेब ब्राउज़र वेबसाइट देखने के लिए उपयोग किया जा रहा प्रोग्राम और एक वेब सर्वर सॉफ्टवेयर या हार्डवेयर जहां वेबसाइट का डेटा Stored किया जाता है के बीच फॉर्मेट. XMLHttpRequest ऑब्जेक्ट वेब सर्वर पर Update Page Data के लिए एक Request भेजता है सर्वर Request को Processed करता है एक प्रतिक्रिया सर्वर साइड बनाई जाती है और ब्राउज़र पर वापस भेजी जाती है जो तब प्रतिक्रिया को Processed करने और स्क्रीन पर प्रदर्शित करने के लिए जावास्क्रिप्ट का उपयोग करती है अपडेट की गई सामग्री को.

जावास्क्रिप्ट को अपडेट करने की प्रक्रिया को स्वचालित करने के लिए एक्सएमएल में Updates सामग्री के लिए Request की जाती है जिससे इसे यूनिवर्सल रूप से समझा जा सके और पेज को देखने वाले उपयोगकर्ता के लिए रिलेवेंट सामग्री को ताज़ा करने के लिए जावास्क्रिप्ट फिर से किक करता है.

Cascarano नोट करता है कि AJAX तकनीक बाहरी पेज डेटा की उपेक्षा करती है और केवल Updates जानकारी और Updates जानकारी के लिए Request को ही संभालती है. यह वास्तव में AJAX की प्रभावशीलता का दिल है जो वेबसाइटों और ऍप्लिकेशन्स को बनाता है जो उपयोगकर्ताओं के लिए AJAX को तेज़ और अधिक उत्तरदायी उपयोग करते हैं.

For Example

<cfquery name="getCountries" datasource="ajax_example">
select * from Countries
order by CountryName asc
</cfquery>
<script src="selectRegions.js"></script>
   <form>
      <div>
         <span>
            <b>Select a country:</b>
         </span>
         <span>
            <select name="Country" onChange="showRegions(this.value)">
               <cfoutput query="getCountries">
                  <option value="#CountryCode#">#CountryName#</option>
               </cfoutput>
            </select>
         </span>
      </div>
      <div id="regionList">
      </div>
</form>

Ajax in Hindi Introduction

Ajax Asynchronous JavaScript और XML पर स्थिर है. यह User अनुभव के लिए आता है जब की यह एक पूरा Game Changer है आम तौर पर Web Pages एक बार मे Loaded होता है.

जब कोई User अधिक Content चाहता है तो वे एक Link पर Click करता है. Ajax के साथ एक User कुछ Click कर सकता है और संपूर्ण Page को पुन Loaded किए बिना JavaScript का उपयोग करके Page मे Content को Loaded किया जा सकता है.

मूल रूप से User एक ऐसा Event करता है जो एक XMLHttpRequest Object के बाद एक AJAX HttpRequest बंद हो गया है. Server तब HttpRequest प्रक्रिया करता है और Browser को Data वापस देता है.

अब JavaScript के बिना यह पूरी तरह से बेकार होगा जब तक कि आप Database मे Data को Post न करे. हम अपने AJAX को स्थापित करेंगे ताकि अगले Java Tutorial मे हमारे लौटे हुए Data का उपयोग करने के लिए Callback Function के रूप में जाना जाने वाला JavaScript Function Call कर सके.

jQuery का उपयोग क्यों करें

AJAX को सीखना किसी भी Developer के लिए एक महान उपलब्धि है लेकिन जब इसे Develop करने की बात आती है तो इसे सामान्य रूप से सबसे अच्छा रखना आसान होता है.

लंबे Code को लिखने में क्या बात है जो आपके लिए पहले से उपलब्ध है वहाँ नहीं है इसलिए अगर आप वास्तव में Programming के Basic समझ से प्यार करते हैं तो AJAX Tutorial पढ़े यदि नहीं तो jQuery के तहत AJAX Tutorial पढ़े.

Ajax in Hindi Features

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

Ajax की महत्वपूर्ण विशेषताएँ

यह वेबपेज को बहुत तेज काम करने के योग्य बना देता है.
यह सर्वर टेक्नोलॉजी पर काम करने के लिये स्वतंत्रता है.
यह वेब पेज की परफॉर्मेंस को काफी हद तक बढ़ा देता है.
इसका उपयोग आज के समय में बहुत तेजी से और अधिक इंटरैक्टिव वेब ऍप्लिकेशन्स को बनाने के लिये किया जाता है.
इसमें किसी Submit Button पर दबाव डालने और पूरी Website को Reloading करने की आवश्यकता नही होती है.
XMLHTTP Object को प्राप्त करने के अलावा सभी Processing सभी Browser Types के लिए समान है क्योंकि JavaScript उपयोग किया जाता है.
इसमें पूरे Page को पुनः Reload करने की कोई आवश्यकता नहीं होती है इसमें केवल Page के कुछ हिस्से को पुनः Reload किया जाता है जिसे पुनः Reload करने के लिए आवश्यक माना जाता है.

Ajax के उपयोग

आज के समय में ऐसे बहुत से वेब ऍप्लिकेशन्स हैं जो Ajax टेक्नोलॉजी का उपयोग कर रहे है इनके कुछ नाम आप नीचे देख सकते है -

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 की तुलना में छोटा और तेज है.

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 और Server के बीच यातायात यात्रा को कम करता है.
AJAX एक वेब सर्वर के लिए अतुल्यकालिक कॉल करने की क्षमता के लिए अनुमति देता है.
AJAX ऍप्लिकेशन्स क्लाइंट पर एसिंक्रोनस होता हैं इसलिए इसे बहुत ही संवेदनशील माना जाता है.
AJAX क्लाइंट ब्राउज़र को उपयोगकर्ता को एक बार फिर से कार्य करने की अनुमति देने से पहले सभी डेटा के आने की प्रतीक्षा से बचने की अनुमति देता है.
AJAX XMLHTTP Object प्राप्त करने के अलावा सभी Processing सभी Browser Types के लिए समान है क्योंकि यह JavaScript मे उपयोग किया जाता है.
AJAX आधारित एप्लीकेशन पर बहुत कम Server Bandwidth का इस्तेमाल करता हैं क्योंकि इसमे पूरे Page को Reload करने की कोई आवश्यकता नही होती है.

Disadvantage of Ajax

AJAX सभी ब्राउज़रों पर नहीं चलता है.
Google Ajax के पेजों को इंडेक्स नहीं कर सकता है.
AJAX एप्लिकेशन में सुरक्षा कम होती है. करने कोई भी अजाक्स के लिए लिखे गए स्रोत कोड को देख सकता है.
आज के समय के केवल ब्राउज़र जो XMLHttpRequest जावास्क्रिप्ट ऑब्जेक्ट का समर्थन करते हैं वे AJAX पेज की सही व्याख्या करने में सक्षम माने जाते है.

Ajax in Hindi Examples

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

Google Maps

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

https://maps.google.com/

Google Suggest

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

https://www.google.com/webhp?complete=1&hl=en

Gmail

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

https://gmail.com/

Yahoo Maps

Yahoo Maps के द्वारा यह पता किया जा सकता है की अब आप कहाँ जा रहे हैं यह एक बहुत अच्छा Web Applincatios है.

https://maps.yahoo.com/

Ajax in Hindi XMLHttpRequest

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

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

यह Background मे Client से Data को Send करता है.
यह Server से Data को प्राप्त करता है.
इसे पुनः Reload किए बिना Webpage पर अपडेट करते है.

Properties of XMLHttpRequest object

Property	Description
onReadyStateChange	यह Stores Function को या Function के नाम को स्वचालित रूप से हर बार ReadyState Property मे बदलता है.
readyState	यह अनुरोध की स्थिति को Represents करता है जिसकी Ranges 0 से लेकर 4 तक होती है. 0: Request को Initialized नहीं किया गया. 1: Server कनेक्शन की स्थापना की. 2: HEADERS_RECEIVED भेजने () को कहा जाता है और Headers और स्थिति उपलब्ध है. 3: LOADING Data को Download करना और ResponseText Data को रखती है. 4: Request Finished हो गयी हैऔर प्रतिक्रिया तैयार है.

Property

Description

onReadyStateChange

यह Stores Function को या Function के नाम को स्वचालित रूप से हर बार ReadyState Property मे बदलता है.

readyState

यह अनुरोध की स्थिति को Represents करता है जिसकी Ranges 0 से लेकर 4 तक होती है.

0: Request को Initialized नहीं किया गया.
1: Server कनेक्शन की स्थापना की.
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()	यह Request Send करता है.
void send(string)	यह Oost Request Sends करता है.
setRequestHeader(header,value)	यह Request Headers को Add करता है.

सभी Modern Browsers XMLHttpRequest Object का समर्थन करते हैं IE 5 और IE 6 को छोड़कर एक 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 का समर्थन करते है IE 5 और IE 6 को छोड़कर एक 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 IE 5 और IE 6 के पुराने 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 का उपयोग करता हैं.

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

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

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