AJAX and XML Tutorial In Hindi

AJAX and XML Tutorial In Hindi :-  Short Tutorial Of Ajax In (Hindi):


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

AJAX Short Tutorial Notes Study Material with Examples in Hindi
AJAX Short Tutorial Notes Study Material with Examples in Hindi

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   किसी  भी   तरह   का  हो  सकता   है |

AJAX Short Tutorial Notes Study Material with Examples in Hindi
AJAX Short Tutorial Notes Study Material with Examples in Hindi

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

Learn AJAX with Sample Examples
Learn AJAX with Sample Examples

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 होगा |

AJAX Short Tutorial Notes Study Material with Examples in Hindi
AJAX Short Tutorial Notes Study Material with Examples in Hindi

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  हो  सकती   है:

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

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

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

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

  1. 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.

AJAX Short Tutorial Notes Study Material with Examples in Hindi
AJAX Short Tutorial Notes Study Material with Examples in Hindi

 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  कम  से  कम  दुगुना  तेज  होती  है |

 


AJAX Short Tutorial Notes Study Material with Examples in Hindi

Follow Us On Cyber Point Solution Youtube Channel : Click Here

Follow Us on Social Platforms to get Updated : twiter,  facebookGoogle Plus

Learn More Ethical Hacking and Cyber Security click on this link. cyber security