AJAX Short Tutorial Notes Study Material with Examples in Hindi

AJAX Short Tutorial Notes Study Material with Examples in Hindi:-In this cyberpointsolution tutorial (Especially Concept of ajax in Hindi ) we are going to describe about the what is the use of AJAX in cyber programming in Hindi. And also we will describe that how can we use Ajax Technique in Web Pages. And why we use Ajax in Web Pages to make more interactive,secure and make more faster. When ever we want to learn any thing the things become more earlier is somebody/tutorial/study material taught us through Examples. Here we have tried to describe each and every concept of AJAX in Hindi in the light of JavaScript (CyberpointSolution.com) best Hindi Short tutorial using simple and best possible example. These examples are so simple that even a beginner who had never even heard about AJAX can easily learn and understand How AJAX works in Web Development. This is the best hindi tutorial/Study Material very beneficial for beginners as well as Professional.

What is AJAX in Hindi

AJAX , JavaScript द्वारा Provide की जाने वाली एक ऐसी सुविधा है , जिसका प्रयोग हम किसी वेब page को बिना Reload किये हुए उसमे Render करने के लिए Web Server से नए Data की Request कर सकते है | जयादातर Web Application का Layout एक सामान ही होता है और हर Page Reload पर पूरा Page अपने Layout के साथ फिर से Download होता है , जबकि Web Page के Content के साथ अलावा लेआउट से सम्बंधित विभ्हीन चीजे पूरी Web Site के दौरान बहुत कम बार Change होती है | जाहिर सी बात है की सामान प्रकार के Layout Related Contents के बार-बार Download होने से Web Page के Download होने की Speed कम होती है |

Benefits of Using AJAX in Hindi

लेकिन जब हम AJAX, तकनीक का प्रयोग करते है, तब हम पुरे Web Page को उसके पुरे लेआउट के साथ फिर से अपने Web Browser में Download नहीं करते बल्कि हम Web Page के किसी हिस्से मात्र को अथवा किसी हिस्से में दिखाई जाने वाले Content को ही Web Server से Download करते है | परिणामस्वरूप Web Page की Performance काफी ज्यादा बढ़ जाती है | इतना ही नहीं बार-बार web page Reload होने में लगने वाला समय की बचत होती है , जिसके वजह से User ,Web Page से जायदा बेहतर तरीके से Interact करता है | In This short Tutorial we will describe about the real use of AJAX.

History of AJAX in Hindi

AJAX तकनीक मूल रूप से 2005 के बाद अपने पूर्ण Effect के साथ Market में Launch हुयी है लेकिन वास्तव में ये तकनीक 1998 से किसी न किसी रूप में Web World में Exist थी लेकिन इसका उपयोग ज्यादा नहीं किया जता था क्योकि Developers को इसकी Power का अंदाजा नहीं था | Ajax तकनीक को विकसित करने में मूल रूप से XMLHttpRequest (XHR) Object का एक बहुत बार रोल था जिसे Microsoft ने विकसित किया था और अन्य Web Browser Venders ने इसे Copy किया |

XHR Object से पहले भी अन्य तरीको के माध्यम से AJAX जैसी सुविधा प्राप्त करने की कोसिस की जाती रही थी, जिसके अंतर्गत Hidden Iframe का प्रयोग बहुत ज्यादा किया जाता था | लेकिन XHR Object के विकास के साथ ही इस प्रकार के hACKS को पूरी तरह से छोरकर XHT Object को ही Use किया जाने लगा है |

Working of AJAX Study Material in Hindi

AJAX तकनीक में जब एक बार Data को Web Server में से Retrieve कर लिया जाता है , उसके बाद उस Data को DOM का प्रयोग करके web page में Insert किया जाता है | जैसे ही वह नया Data Web Page के Dom में Insert होता है, User Interaction के लिए Available हो जाता है | इस तरह से बिना web page को Reload किये हुए Web Browser में User Requirement के अनुसार नया Data Web Page में अत रहता है और किसी जरुरत को पूरा करने के लिए User को Web Page के Reload होने की Wait नहीं करना परता |

Role of XML in AJAX in Hindi Short Notes

AJAX तकनीक वास्तव में XML का कोंई विशेस Role नहीं है और हम किसी भी तरह के Data को AJAX तकनीक का प्रयोग करके Web Server से Access कर सकते है | लेकिन जिस समय AJAX का विकास हो रहा था , उस समय Cross-Platfrom Web Service Create करने के लिए XML का प्रयोग बहुत किया जा रहा था | परिणामस्वरूप इस Asynchronous JavaScript के साथ XML को भी जोरकर AJAX नाम तय किया गया लेकिन वास्तव में XML का Asynchronous JavaScript के साथ Directly कोंई सम्बन्ध नहीं है और ये हम चाहे तो XHL Data की जगह पर HTML Data को भी सामान प्रकार से USE कर सकते है |

यानि सरल शब्दों में कहे तो AJAX एक ऐसी तकनीक है जिसका प्रयोग करके हम बिना Web Page को Reload किये हुए Web Server से किसी Data को Retrieve कर सकते है और वह कोंई XML Formatted data हो सकता है , कोंई Text data हो सकता है या कोंई HTML Data हो सकता है | यानि Data किसी भी तरह का हो सकता है |

XMLHttpRequest Object in Hindi

Internet Explorer 5 सबसे पहले XHT Object Define किया गया था और इसे MSXML Library के एक Part के रूप में ActiveX Object की तरह Use किया गया था | इस प्रकार से Web Browsers में XHR Object के तिन Versions MSXML2.XMLHttp, MSXML2.XMLHttp.3.0, व MSXML2.XMLHttp.6.0 को Use किया जा सकता है |चुकी, इन Objects को MSXML Library के Part के रूप में Define किया गया था और Internet Explorer के अलग-अलग Objects को Define किया गया था , इसलिए हमे एक ऐसा Function Create करना होगा , जो स्वय इस बात का निर्णय ले सके किस Internet Explorer के कसी Version में इस Object का कोनसा Version Supported है और उस Version के XHR Object को Use करते सुए XHR Object को Use करते हुए XHR Object Create कर सके | इस जरुरत को पूरा करते हुए हम निम्नानुसार के Function Create कर सकते है:

Learn AJAX with Simple Example

Program Example of Ajax

//Function for IE versions prior to 7

Function createXHR(){

If(typeof arguments.callee.activeXString !=”string”){

Var versions=[“MSXML2.XMLHttp.6.0”,MSXML2.XMLHttp.3.0”,”MSXML2.XMLHttp”],i,len;

For(i=0, len=versions.length; i<len;i++)

{

Try{

New ActiveXObject(versions[i]);

Arguments.callee.activeXString=versions[i];

break;

}

Catch (ex)

{

//skip

}

Return new ActiveXObject(argumetns.callee.activeXString);

}

ये Function Internet Explorer में Available XHR Object के Most Recent Version का Object Create करता है |Internet Explorer में Available XHR Object के Most Recent Version का Object Create करता है | Internet Explorer 7+ व अन्य सभी Web Browsers जो XHR Object Support करते है, उन्हें XMLHttpRequest Constructor के माध्यम से निम्ननुसार Create किया जा सकता है :

var xhr =new XMLHttpRequest();

चुकी वर्तमान समय में Internet Explorer 6- तक के सभी Version के Web Browsers लगभग पूरी तरह से Market से समाप्त हो गए है और सभी लोग लगभग Updated Version के Modern Web Browsers Use कर रहे है,इसलिए यदि हम चाहे तो अब पिछले Function को हम चोर सकते है लेकिन 2010 तक Internet Explorer 6 भी काफी Use किया था,इसलिए उस समय उपरोक्त Function को Use करना जरुरी था |

फिर भी यदि आप Internet Explorer6-Versions के लिए भी xhr ऑब्जेक्ट का सपोर्ट चाहते है, तो हमारे पिछले Function को निम्नानुसार मॉडिफाई कर सकते है :

Program Example Using Ajax Technique

Function createXHR()

{

If(typeof XMLHttpRequest !=”undefined”)

{

Return new XMLHttpRequest();

}

else if(typeof ActiveXObject !=”undefined”)

{

If(typeof arguments.callee.activeXString !=”string”)

{

Var versions =[“MSXML2.XMLHttp.6.0”,”MSXML2.XMLHttp.3.0”,”MSXML2.XMLHttp”]

,I,len;

For(i=0,len=versions.length;i<len;i++)

{

Try{

new ActiveXObject(versions[i]);

arguments.callee.activeXString= versions[i];

break;

}

catch(ex){

//skip

}

Return new ActiveXOBjext(arguments.callee.active.XString);

}

else

{

throw new Error(“No XHR object available”);

}

in This Study Material of AJAX you can Learn Many Techniques of Ajax Programming in Cyber Security.

यदि हम इस मॉडिफाइड Function को Use करके अपना XHR object Create करते है तो वह IE5 से लेकर अभी तक के सभी Modern Internet Explorer Web Browsers में काम करेगा |

ये Function सबसे पहले इस बात को चेक करता है के क्या XMLHttpRequest Object Exist है या नहीं जो की लेटेस्ट XHR Object Version व सभी web Browsers में सपोर्टेड है |

यदि ये ऑब्जेक्ट EXIST न हो , तो ये Function अन्य Options द्वारा XHR Object Create करता है | जबकि यदि किस करणवश ऑब्जेक्ट create न हो पाए , तो ये Function एक Error Object Return करता है |इस फंक्शन्स का प्रयोग करके हम हमारा XHR Object निम्ननुसार create कर सकते है :

Var xhr = createXHR();

चुकी ये फंक्शन सभी Web Browsers के लिए Cross-Browser तरीके से कम करेगा , इसलिए इस Function को Use करते हुये हम जो भी XHR Object Create करेंगे , उन Objects को Use करके Develop किया गया Ajax Program सभी Web Browsers में समान रूप से Run होगा |

How to Use XHR Object in Hindi

XHR OBJECT को Use करते समय सबसे पहले हमें इसके open() Method को Call करना होता है , जो की तिन Parameters Accept करता है :

1 Request Type (“get”,”post”,etc…)

2 Request URL

3 Synchronous/Asynchronous Boolean Value

हम उपरोक्त तीनो Parameters को Specify करते हुए इस Method को निमनानुसार Use कर सकते है :

xhr.open(“get”,”login.php”,false);

ये Statement login.php File के लिए एक Synchronous GET Request Open करता है | यहाँ हमें कई बाते धयान रखनी होती है और सबसे पहली बात ये है की हम इस Method के दुसरे Parameter में जो URL Specify करते है , वह उस वेब पेज का Relative URL है ,जिस पर उपरोक्त कोड रन होगा | यदि हम चाहे तो यहाँ पर Absolute URL भी specify कर सकते है |

साथ ही हमें ये भी धयान रखना होता है की हम जो URL Specify कर रहे है , वह same Domain के Resource से सम्बंधित होना चाहिए | यानि हम हमारे Web Page में किसी दुसरे Domain के Data को Cross-Domain Form में Retrieve नहीं कर सकते और यदि हम ऐसा करने की कोशिश करते है , तो हमें Security Errors का सामना करना परता है | इस cyberpointsolution के Hindi tutorial में आप जान सकेंगे की आखिर xhr object को Use करते कैसे है|

दूसरी धयान रखने वाली बात ये है की open() Method को Use करने का मतलब ये नहीं है की हमने Request को Send कर दिया है | वास्तव में इस Method का केवल इतना मतलब है की हम किसी Request को Send करने के लिए Prepare कर रहे है |

अत: किसी Request को Send करने के लिए हमें इस XHR Object के send() Method को निमनानुसार Call करना होता है :

xhr.open(“get”,”login.php”,false);

xhr.send(null);

send() Method एक Single Argument Accept करता है , जो की वह Data होता है जो की Request की Body के रूप में Web Server पर Sent होता है | यदि हम इसमें कोई Data Specify करके Request Object की Body के रूप में Send करना नहीं चाहते , तो हमें इसमें null Pass करना जरुरी होता है , क्योकि कुछ Web Browsers इस Parameter को Compulsory रूप से Check करते है |

चुकी ये Request Synchronous है , इसलिए JavaScript Code तब तक Wait करता है , जब तक की Web Browser का JavaScript Interpreter Codes का आगे Execution करता है , उसके बाद ही Web Browser का JavaScript Interpreter Codes का आगे Execution करता है |

जब Web Server से Response प्राप्त होता है , तब XHR Object की विभ्भिन Properties उस Response के Data के अनुसार Fill हो जाती है | एक XHR Object की विभ्भिन Properties निमनानुसार होती है :

Properties of XHR Object in Hindi

responseText Property

इस Property में Response द्वारा आने वाली Body को Content या Text होता है |

responseXML Property

यदि Response में आने वाले Data का Content Type “text/xml” या “applicaton/xml” हो , तो इस Property में Response द्वारा आने वल्ली Body में Stored XML DOM Document होता है |

status Property

इस Property में Return होने वाले Response के HTTP Status होता है |

statusText Property

इस Property में Return होंने वाले Response का HTTP Status का Description होता है | जब Web Browser को कोई Response Receive होता है , तब सबसे पहले हमें status Property को इस बात को निश्चित करने के लिए Check करना होता है की Response सही तरीके से Return हुआ या नहीं |

सामान्यत: यदि इस Property में Status Code 200+ हो , तो ये इस बात का इंडिकेशन हा की Response Successfully Return हो गया है और responseText या responseXML Property में आगे की Processing के लिए Content Available है |लेकिन यदि status Property में 304 हो तो ये इस बात को Indicate करता है की Resource Modify नहीं हुआ है , इसलिए Content को Web Browser Cache से Retrieve किया गया है और इसका मतलब भी यही है की Response Successfully Return हुआ है | Response ठीक तरह से प्राप्त हुआ या नहीं इस बात को हम निमनानुसार Code द्वारा Check करते है :

Program Example of Ajax using XHR Object

xhr.open(“get”,”login.php”,false);

xhr.send(null);

if(xhr.status>=200 && xhr.status<300 || xhr.status==304)

{

alert(xhr.responseText);

}

else

{

alert(“request was unsuccessful:”+xhr.status);

}

ये Code या तो Server से Return होने वाले Content को Display करता है अथवा एक Web Server से Return होने वाले Error को Display करता है |

हमें हमेशा आगे की प्रोसेसिंग करने से पहले status Property को जरुर Check करना चाहिए लेकिन statusText पर ज्यादा भरोसा नहीं करना चाहिए क्योकि अलग-अलग Web Browser अलग-अलग तरह का statusText Return करते है |

responseText Property में हमेशा Response की Body में आने वाला Content होता है जबकि non-XML Data होने की स्थिति में responseXML Property में हमेशा null होता है |

हलाकि हम Synchronous Request Send कर सकते है, लेकिन जब हम Asynchronous Request Send करते है , तब JavaScript Response आने का Wait नहीं करता बल्कि अपना दूसरा काम करता रहता है | परिणामस्वरूप Web Page Freeze नहीं होता |

XHR Object की एक readStyle Property होती है , जिसका प्रयोग करके हम इस बात इंडिकेशन प्राप्त कर सकते है की Request/Response Cycle के विभ्भिन Phases में Currently कौनसा Phase Active है | इस Property में निमनानुसार कोई भी Value हो सकती है:

Uninitialized : इस Value के होने के मतलब है की open() Method को अभी तक Call नहीं किया गया है

1 . Open : इस Value के होने का मतलब है की open() मेथड को कॉल कर लिया गया है की लेकिन Request को Send करने के लिए sent() Method का प्रयोग अभी तक नहीं किया गया है |

Sent : इस Value के होने के मतलब है की send() Method को Call कर लिया गया है , लेकिन अभी तक कोई Response नहीं आया है |

3 . Receiving : इस Value के होने का मतलब है की कुछ Response Data आ चूका है |

Complete : इस Value के होने का मतलब है की Request किये गए Resource से सारा Data आ चूका है और आगे की Processing के लिए Available है |

How to Achieve Cross-Browser Compatibility in Hindi

जब भी readyState Property में Request/Response Cycle के विभ्भिन Phases से Pass होने के कारन उपरोक्त में से कोई Value Change होती है ,readystatechange Event Fire होता है | हम इस Property को प्रयोग करे readyState में Stored Value को चेक कर सकते है | सामान्यत: readyState की Value 4 होने पर हमारा आगे का काम करते है क्योकि इस मान के होने का मतलब है की Response पूरी तरह से आ चूका है |

onreadyStatechange Event Handler को हमें Cross-Browser Compatibility प्राप्त करने के लिए open() Method Call करने से पहले Assign करना होता है और ये काम हम निमनानुसार कर सकते है :

Program Example

var xhr = createXHR();

xhr.onreadystatechange =function()

{

If(xhr.readystate==4)

{

If(xhr.status>=200 && xhr.status<300 || xhr.status ==300)

alert(xhr.responseText);

else{

alert(“Request was unsuccessful:” +xhr.status);

}

};

xhr.open(“get”,”example.txt”,true);

xhr.send(null);

धयान दे की इस Code में हमने DOM Level 0 तरीके से Event Handler को XHR Object के साथ Attach किया है क्योकि सभी Web Browsers ,DOM Level 2 प्रकार के Event Attachment Style को ठीक तरह से सपोर्ट नही करते |

अन्य Event Handlers की तरह इस onreadystatechange Event Handler में कोई भी event Object Pass नहीं होता है , बल्कि हमें XHR Object के आधार पर ही ये तय करना होता है की आगे क्या करना |

इस Example में हमने xhr Object को onreadystatechange Event Handler के अन्दर Use किया है न की this Object के अन्दर क्योकि विभ्भिन Web Browsers this को अलग तरीके से Treat करते है , इसलिए यदि हम इसे this Object के अन्दर इसे Define करते है तो ये Function Fail हो सकता है | इसीलिए XHR Object Instance Variable को Use करना ज्यादा Secure होता है |

हम XHR Object के abort() Method का निमनानुसार प्रयोग करके किसी Asynchronous Request को Response प्राप्त होने से पहले ही Cancel भी कर सकते है :

xhr.abort();

इस Method को Call करने पर XHR Object Events को Fire करना बंद कर देता है और आने वाले Response के Data को अपनी Properties में Fill नहीं करता | जब एक बार Request Abort हो जाती है , तो फिर हमें XHR Object को Dereference करना जरुरी होता है , अन्यथा Memory Related Issues Gnerate होते है | यानि हमें उसी XHR Object की फिर से Reuse नहीं करना चाहिए , जिसे Abort किया है |अब हम इस Best Hindi Tutorila में आगे सिखंगे की कैसे Http Headers में सारी इनफार्मेशन ट्रान्सफर होती है.इस आखिरी short study Notes से आप बरी आसानी से समझ सकते है आखिर AJAX काम कैसे करता है |

What is HTTP Headers in Hindi

जैसाकि इस tutorial की सुरुआत में भी हमने HTTP Request व Response Objects के बारे में जाना था की हर HTTP Request व Response के साथ बहुत सारी Header इनफार्मेशन भी पर Transfer होती है और कभी-कभी हमें इन Headers को भी Use व Access करने की जरुरत परती है |

XHR Object विभ्भिन प्रकार के Methods द्वारा Request व Response दोनों प्रकार के Headers के Expose करने की सुविधा देता है | Default रूप से किसी XHR Request को Send करते समय हम निमन Headers को भी Send कर सकते है :

Accept

इसमें Web Browser द्वारा Handle सो सकने वाले Content Type की इनफार्मेशन होती है |

Accept-Charset

इसमें Web Browser जिन Character Set को Display कर सकता है, उनके भविष्य में इनफार्मेशन होती है |

Accept-Encoding

इसमें वेब ब्राउज़र द्वारा Handle हो सकने वाले Compression Encoding की इनफार्मेशन होती है |

Accept-Language

इसमें Web Browser जिस Language में Run हो रहा होता है ,उस Language की इनफार्मेशन होती है |

Connection

इसमें Web Browser द्वारा Web Server का साथ बनाये जाने वाले Connection के प्रकार (http,https,etc…) की इनफार्मेशन होती है|

Cookie

इसमें Web Browser द्वारा Set की गयी किसी Cookie की इनफार्मेशन होती है|

Host

इसमें Web Server पर Request करने वाले Domain की इनफार्मेशन होती है|

Referer

इसमें उस web Page का URL होता है, जो Request कर रहा है | इस Header का यही नाम है जबकि वास्तव में सही Spelling “Referrer”

User-Agent

इसमें उस Web Browser की User-Agent String होती है |

हलाकि अलग-अलग Web Browsers Request Send करते समय अलग-अलग तरह का Header Send कर सकते है, फिर भी इन Headers को सामान्यत: सबसे ज्यादा Use किया जाता है |

Additional Headers को Set करने के लिए हम setRequetHeader() Method का प्रयोग कर सकते है | ये Method Parameters के रूप में दो Arguments Accept करता है, जो की Header का नाम व Value को Represent करते है | Request Headers Send करने के लिए हमें इस Method को open() Method के बाद में लेकिन send() Method से पहले Call करना होता है | जैसे :

Program Example

var xhr =createXHR();

xhr.onreadystatechange=function()

{

If(xhr.readyState==4)

{

If(xhr.status>=200 && xhr.status<300 || xhr.status==304)

{

alert(xhr.responseText);

}

else

{

alert(“Request was unsuccesful:”+xhr.status);

}

};

xhr.open(“get”,”login.php”,true);

xhr.setRequestHeader(“customHeader”,”customValue”);

xhr.send(null);

Web Server इन Custom Headers को Read करके उससे सम्बंधित Action को तय करता है | हमेशा हमें Custom Headers को ही इसमें Specify करना चाहिए, न की उन Headers को , जिन्हें Web Browser सामान्य रूप से Send करता है | चुकी Default Headers को Specify करने पर Web Server Response Affected हो सकता है , क्योकि सभी Web Browsers Default Headers को Overwrite करने की Permission नहीं देते |

XHR Object Response Header से आने वाले Headers से आने वाले Headers को getResponseHeader() Method का प्रयोग करके प्राप्त कर सकते है | हम किसी Response से आने वाले सभी Headers को एक साथ Reterive करने के लिए getAllResponseHeaders() Method को Use कर सकते है | जैसे :

var myHeader=xhr.getResponseHeader(“MyHeader”);

var allHeaders xhr.getAllResponseHeaders();

Headers का प्रयोग एडिशनल Data Structure को Web Server से Web Browser पर Send करने के लिए Use कर सकते है |getAllResponseHeaders() Method सामान्यता: निमनानुसार Output Return करता है :

Date :Sun, 14 Nov 2013 12:10:30 GMT

Server :Apahe/1.3.29 (Unix)

Vary:Accept

X-Powered –By :PHP/5.3

Connection :close

Content-Type :text/html; charset=utf-8

ये Output हमें Response Headers को एक ही बार में Parse करने की सुविधा देता है ताकि हम सभी Header Names को एक ही बार में Find न की हर Header को Individually Check करे| Now the most important topic of Ajax in hindi we are going to discuss i;e get and post Request.so in this Short best hindi tutorial you can learn everything which is in AJAX.So read it Carefully.

What is Get Requests in Hindi

GET Request सबसे ज्यादा Use किया जाने वाला Request Method है| इसे सामान्तय: तब Use किया जाता है जब हमे URL के साथ Query String को Specify करना होता है | यदि जरुरी हो , तो Query String को Specify करना होता है | यदि जरुरी हो , तो हम Query String को URL के अंत में Append करके भी Request Send कर सकते है हलाकि हम इस जरुरत को POST Method का प्रयोग करके भी पूरा कर सकते है |

XHR Object के लिए इस Query String का Present होना जरुरी होता है साथ ही open() Method में Specify करने से पहले इस URL का Correctly Encoded होना भी जरुरी होता है |

GET Method का प्रयोग करते हुए Request Send करते समय सबसे बरी परशानी यही होती है की open() Function में Specify किया गया URL पूरी तरह से Correctly Encoded नही होता | इसलिए Query String के Name-Value Pair को encodeURIComponent() Method का प्रयोग करके Encode करने के बाद ही इसे open() Method में Pass किया जाना चाहिए |

जैसे :(Example)

xhr.open(“get”,”login.php?username=value1&password=value2”,ture);

चुकी URL को Properly Encode करना जरुरी होता है अन्यथा AJAX Request Fail हो जाता है |इस Conversion को हमें हमेशा Perform करना परता है इसलिए इस जरुरत को पूरा करने के लिए हम निमनानुसार एक Well Defined Function Create कर लेते है , ताकि हमें समान प्रकार का Code बार-बार न लिखना परे :

function addURLParameter(url,name,value)

{

url +=(url.indexOf)(“?”)==-1?”?”:”&”);

url +=encodeURIComponent(name) +”=”+encodeURIComponent(value);

return url;

}

ये Function तिन Parameters Accept करता है जहा पहला Parameter वह URL है, जिसके साथ Query String को Append करना है जबकि name व value Query String के Name Value Pair को Represent करते है |जब हम इस Function को Call करते है तो पहले Argument के रूप में Specified URL को ये Function इस बात का लिए Check करता है की उसके साथ पहले से Question Mark Attached है या नहीं |

यदि URL में पहले से Question Mark Exist हो, तो ये इस बात का इंडिकेशन है की URL के साथ पहले से कोई Query String Appended है| परिणामस्वरूप ये Function URL के अंत में एक Ampersand Symbol Attach कर देता है |लेकिन यदि URL में Question Mark Exist न हो , तो ये Function उस URL के अंत में एक Question Mark Append करता है और फिर Name Value Pair को Proper Ampersands का प्रयोग करते हुए एक Well Encoded URL Create करके Return करता है | इस Function को हम यदि अपने पिछले उदहारण Code के साथ करना चाहे , तो निमनानुसार कर सकते है ;

Example of Function Using Code

var url=”login.php”;

//Add the arguments

url=addURLParam(url,”name”,”karan”);

url=addURLParam(url,”book”,”JavaScript in hindi”);

//Initiate request

xhr.open(“get”,url,false);

What is POST Requests in Hindi

GET Method के बाद POST Method का प्रयोग करते हुए सबसे ज्यादा Request Send किया जाता है , जिसे सामान्यता: तब Use करते है जब हमें किसी Data को Web Server पर Save करना होता है | हर Post Request के साथ हमेशा कुछ न कुछ Data Request की Body के साथ Send किया जाता है, जबकि GET Method के साथ सामन्यात: कोई Data नहीं भेजा जाता |

POST Method का प्रयोग करने पर हम Request की बहुत सारा Data Send कर सकते है जो किसी भी फॉर्मेट का हो सकता है, जबकि GET Method के साथ हम केवल Query String भेजते है क्योकि GET Method अपने Request के साथ ज्यादा Data लेकर Web Server पर Send नहीं हो सकता |

POST Method को AJAX तकनीक में Use करते समय हमें open() Method में पहले Argument के रूप में “get” के स्थान पर “post” को निमनानुसार Use करना होता है :

xhr.open(“post”,url,false);

POST Method को Use करते समय हमें हमेशा कुछ Data Web Server पर Send करना होता है|

Role of XHR Object in POST Requests in Hindi

XHR Object को मूल रूप से XML Data के लिए Design किया गया था इसलिए हम किसी XML DOM Document को XHR Object के माध्यम से Request में Send कर सकते है जो की Serialize होने के बाद Request Body के रूप में Web Server पर Send होता है | लेकिन हम किसी String को भी ठीक उसी प्रकार से Request Body में Send कर सकते है जिस तरह से कीसी xml DOM Document को Send करते है |

जिस तरह से Web Form Submission करते समय Form के Data Web Browser के Address Bar में दिखाई नहीं देते | ठीक उसी तरह से Default रूप से Ajax तकनीक का प्रयोग करते समय भी POST Request के Data Appear नहीं होते है |

इसलिए Web Server पर कोई Server Side Script इस Post Request के साथ Pass होने वाले Data को Extract करता है | फिर भी हम XHR Object का प्रयोग करके किसी Form को Web Server पर Send करने का एक उदहारण देख सकते है जो की निमनानुसार है :

Program Example

function submitData(){

var xhr=createXHR();

xhr.onreadystatechange=function(){

if(xhr.readyState==4)

{

If(xhr.status>=200 && xhr.status <300 || xhr.status==304)

{

alert(xhr.responseText);

}

Else

{

alert(“Request was unsuccessful:”+xhr.status);

}

};

xhr.open(“post”,”login.php”,true);

xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

var form =document.getElementById(“user-info”);

xhr.send(serialize(form));

}

Explanation of this programming Example of Ajax in Hindi

इस उदहारण में हमने सबसे पहले Form के Content-Type Header को “application/x-www.form-urlencoded” value से Set किया है, जो की Form का Content Type है | फिर हमने एक Appropriate Format की String Create किया है |

चुकी यदि Web Page पर Form पहले से Exist हो तो उसे Serialize करने के बाद XHR Object के माध्यम से Send करना होता है और POST Data भी उसी तरह से Send होता है जिस तरह से Query String Send होता है |

अत: Form के Data को Serialize करने के लिए serialize() Function को Use कर सकते है जो की Form से Web सर्वर पर Send किये जाने वाले सारे Data को पूरी तरह से एक String में Convert कर देता है |हमारे उदहारण में हम ये मान रहे है की हमारे Web Page पर एक Form है जिसका ID “user-info” है | इसलिए हमने निमन Statement द्वारा अपने Form के सारे Reference को एक Variable में स्टोर किया है :

var form=document.getElementById(“user-info”);

फिर Form के Data को हमने निमन Statement द्वारा Serialize करने के बाद Web Server पर Send किया है :

xhr.send(serialize(form));

How to Retrieve Post Request form PHP Code in Hindi

इस Function में Form के Data को serialize किया गया है , जिसका ID “user-info” है | इसलिए इस POST Request को Web Server को Server Side Script द्वारा निमनानुसार PHP Code के माध्यम से Reterive किया जा सकता है :

Program Example

//File Name:login.php

<?php

header(“Content-Type:text/palin”);

echo<<<EOF

Name:{$_POST[‘user-name’]}

Email:{$_POST[‘user-email’]}

EOF;

यहाँ धयान में रखने वाली एक मुख्य बात ये है की यदि हम हमारे उदहारण प्रोग्राम की तरह ही किसी प्रोग्राम में Content-Type Header को Specify न करे, तो Current Page के Form का Data,Web Server पर $_POST Super Global Variable द्वारा Access नहीं किया जा सकेगा | उस स्थिति में POST Request से आने वाले Data को Web Server पर Capture करने के लिए हमें $HTTP_ROW_POST_DATA का प्रयोग करना परेगा |

चुकी POST Request के साथ हमें कुछ Extra Settings करनी परती है | यानि हमें Content-Type Header को Specify करना परता है व Form के Data को Serialize करना परता है , आदि | इलसिए POST Request की तुलना में GET Request की Speed कम से कम दुगुना तेज होती है |