Ajax Kya Hai




AJAX tutorial beginners और professionals के लिए AJAX technology के Concepts और उदाहरणों को शामिल करता है.

AJAX Asynchronous JavaScript और XML के लिए एक acronym शब्द है.

यह 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 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 कर सके.

Why Use jQuery Instead

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 पूरा नहीं है .

Important Features of Ajax

  • यह web page को तेज़ बना देता है.

  • यह server technology के लिये Independent है .

  • Ajax web page की Performance को Increase करता है.

  • Ajax मे किसी submit button पर दबाव डालने और पूरी website को reloading करने की आवश्यकता नही है.

  • पूरे page को पुनः reload करने की कोई आवश्यकता नहीं है केवल page के कुछ हिस्से को पुनः reload किया जाता है, जिसे पुनः reload करने के लिए आवश्यक है.

  • XMLHTTP object को प्राप्त करने के अलावा सभी processing सभी browser types के लिए समान है क्योंकि JavaScript उपयोग किया जाता है.

  • Ajax का इस्तेमाल तेजी से और अधिक interactive web applications का विकास करने के लिये किया जाता है.

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

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 HTTP Protocol पर संपर्क करता है.

  • AJAX server technology पर Independent काम करता है.

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

  • AJAX का उपयोग आप तेजी से और अधिक interactive web applications को develop करने के लिये सकते है .

  • AJAX आधारित application कम server bandwidth का उपयोग करते हैं क्योंकि complete 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 पर अपडेट करते है .

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 हो गयी हैऔर प्रतिक्रिया तैयार है.

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();


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 का इस्तेमाल होता है.

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 के लिए अलग है.