🙇🏽 👩🏽‍🎤 🔌 अजाक्स एप्लिकेशन बनाने में अनुभव 👍🏻 👆 ☝️

शुरुआत में

यह लेख अजाक्स एप्लिकेशन लिखने पर केंद्रित होगा। सरल शब्दों में, यह रिबूट के बिना काम करने वाली साइट लिखने के बारे में है। तेज, आसान, सस्ती। यह आलेख सर्वर-साइड कोड पर चर्चा नहीं करेगा, बेहतर समझ के लिए केवल उदाहरण होंगे।
मैं एक साइट लिखने के विषय से लंबे समय से जुड़ा हुआ हूं, जिसमें कई घटक (उदाहरण के लिए, फ़्लैश प्लेयर) लिंक पर प्रत्येक क्लिक के साथ पुनरारंभ नहीं होते हैं, लेकिन गीतों को जारी रखें। और फिर एक दिन, साहस प्राप्त करने के बाद - मैं इस तरह के एक आवेदन की संरचना के बारे में सोचने लगा। अंत में क्या हुआ - नीचे पढ़ें।

nachnems

सबसे पहले, हमें कुछ js प्लगइन्स चाहिए - अर्थात्:

सबसे पहले, यह सभी के लिए परिचित है , ठीक है, शायद लगभग सभी को - जेएस फ्रेमवर्क। दूसरी फ़ाइल टेम्पलेट इंजन है, जो jquery पर आधारित है, हम इसका उपयोग करेंगे - क्योंकि वह क्लाइंट की तरफ से काम करता है, जो हमें चाहिए। Jquery का एक छोटा सा जोड़ js वस्तुओं को json में बदलने के लिए भी आवश्यक है।

सबसे पहले, एक फ़ोल्डर बनाएं, उदाहरण के लिए jstemp - इस फ़ोल्डर में jquery-tmpl टेम्प्लेट होंगे। आपको कम से कम एक टेम्पलेट बनाने की भी आवश्यकता है, उदाहरण के लिए, मुख्य पृष्ठ टेम्पलेट। Jstemp फ़ोल्डर में, मुख्य सबफ़ोल्डर बनाएँ जिसमें page.html फ़ाइल होगी
फ़ाइल में एक सरल HTML कोड है:

<div id="name_of_page">${Content.name}</div> <div id="info_of_page">${Content.info}</div>

काम का सार

उस समय, जब उपयोगकर्ता पृष्ठ पर जाता है, तो हमारा अजाक्स एप्लिकेशन वर्तमान लिंक और मापदंडों के साथ सर्वर तक पहुंचता है, और प्रतिक्रिया में JSON का इंतजार करता है। हम प्राप्त JSON को एक js- ऑब्जेक्ट में पार्स करते हैं और इसे jquery-tmpl प्लगइन पर भेजते हैं, जो अलमारियों पर ऑब्जेक्ट से डेटा को व्यवस्थित करता है, और हमारे उपयोगकर्ता को वांछित टेम्पलेट दिखाता है। और यह भी, अगर उपयोगकर्ता यह तय करता है कि उसे वर्तमान पृष्ठ की आवश्यकता नहीं है, और किसी अन्य पर स्विच करने की कोशिश करता है - अजाक्स एप्लिकेशन तुरंत अपनी कार्रवाई को पकड़ लेगा और वही प्रक्रियाएं करेगा, केवल नए लिंक के साथ जो उपयोगकर्ता जाना चाहता था और वापस लौटना चाहता था काम का नतीजा।

कार्यान्वयन

सबसे पहले, प्रारंभ पृष्ठ लिखें:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="Javascript" src="js/jquery-1.5.min.js"></script> <script language="JavaScript" src="js/jquery.tmpl.js"></script> <!----> <script language="JavaScript" src="js/jquery.tmplPlus.min.js"></script> <!----> <script language="JavaScript" src="js/jquery.json-2.2.min.js"></script> <!-- $.toJSON --> <title></title> <style type="text/css"> body { font: 11pt Arial, Helvetica, sans-serif; margin: 0; } h1 { font-size: 36px; margin: 0; color: #fc6; } h2 { margin-top: 0; } #header { padding: 10px; } #sidebar { float: left; border: 1px solid #eee; width: 20%; padding: 5px; margin: 10px 10px 20px 5px; } #sidebar p { margin-left:20px; } #content { margin: 10px 5px 20px 25%; padding: 5px; border: 1px solid #eee; } #footer { background: #eee; padding: 5px; color: #fff; clear: left; } .error { padding:10px; width:80%;background-color:#ff4f4f; } </style> </head> <body> <div id="header"><h1> -  .</h1></div> <div id="sidebar"> <h2></h2> <p><a href="#"></a></p> <p><a href="#page/about"> </a></p> <p><a href="#page/contacts"></a></p> <p><a href="#page/somepage"> -  </a></p> <p><a href="#user/login"></a></p> </div> <div id="content"> <h2> -   </h2> <div id="content_wrap"></div><!--      --> </div> <div id="footer">© 1</div> </body> </html>

हम आईडी = "content_wrap" के साथ एक div की उपस्थिति पर ध्यान देते हैं - लोड किए गए टेम्पलेट्स को इसमें लोड किया जाएगा।

अगला, हम सामग्री के प्रारंभिक लोडिंग को लिखते हैं।

 var user = {}; /** *   hash  #   **/ function hash() { return document.location.hash.replace('#',''); } function load(u) { console.log('loading page '+ u +':'); $.ajax({ url: "/" + u,//   ,    , //..    -     index.php, //      ,    type: "GET", data: "action=pageLoad&url="+u+"", // action=pageLoad    -  ,    JSON success: function(msg){//  ,     -     ,  ,     var arr = $.parseJSON(msg); console.log('success'); if (arr.my) {//  ,    arr.my    //    user = { a: (arr.my.id)?true:false, id:arr.my.id, login: arr.my.login, site_login: arr.my.site_login, status: arr.my.status } } document.location.hash = u; render(arr, u); console.log("load template"); } }); } function render(data, url) { // ,  data -  ,   ; url -  main/page , user/login $("#content_wrap").show().html('');//     html-,       $.get("jstemp/"+ url +".html", function(template) {// html  -  console.log("Template finded at jstemp/"+ url +".html"); $.tmpl(template, { Content: data//   tmpl ,        Content }).appendTo('#content_wrap');//  #content_wrap $("#content_wrap").prepend("<script language='JavaScript' src='js/included.js' />");//      . }); } $(function(){//,    DOM if (hash()) {//   var url = hash();//    ,   #  . } else { var url = 'main/page';//   -    } load(url);// . });

इस स्तर पर, यदि सब कुछ ठीक है, तो आप मुख्य पृष्ठ को लोड कर सकते हैं। उदाहरण के लिए, मैं एक बहुत छोटा सर्वर कोड लिखूंगा:

 <?php if(isset($_GET['action'])&&$_GET['action']=='pageLoad'){ switch($_GET['url']) { case 'page/contacts': $arr = array('name'=>'', 'info'=>'       ,     .'); break; case 'page/about': $arr = array('name'=>' ', 'info'=>'      .'); break; case 'page/somepage': $arr = array('name'=>'  ', 'info'=>'   -  '); break; case 'main/page': default: $arr = array('name'=>' ', 'info'=>'  '); break; } echo json_encode($arr); } else { ?>  Html ,   . <?php } ?>

अब, जब मुख्य / पृष्ठ तक पहुंच हो - प्रदर्शित किया जाना चाहिए

मुख्य पृष्ठ
सभी प्रकार की जानकारी

हुर्रे! 3/4 किया। अब हम लिंक पर क्लिक को पकड़ने के लिए एक सरल स्क्रिप्ट लिखेंगे।

 /** *    */ $("a[href^='#']").unbind('click');//   ,        . $("a[href^='#']").click(function(e){// -  ,    href    # var url = $("a:hover").attr('href').replace("#",""); if (page_url != url) { if (url) load(url); else load('main/page'); return false; } });

और इस कोड को उसी शामिल करें। js
इस फ़ाइल का उद्देश्य सरल है: html पाठ लोड करते समय, पहले से ही पृष्ठों पर मौजूद स्क्रिप्ट इसके साथ काम नहीं करना चाहती हैं, इसमें शामिल हैं। बचाव में आता है।
लेकिन रूपों के साथ काम करने के बारे में आप क्या पूछते हैं? हाँ आसान!

रूपों के साथ काम करें

उदाहरण के लिए, टेम्पलेट उपयोगकर्ता / login.html बनाएँ
और इसमें कोड डालें:

 {{if Content.error}}<!--    ,     --> <div class="error login">${Content.error}</div> {{else}} <form class="form" id="login" action="" method="POST"> <div class="error" style="display:none;" id="message_login"></div><!--  id    - message_[id__] --> <table> <tr> <td></td> <td><input name="username[login]" type="text" value="" /></td> </tr> <tr> <td></td> <td><input type="password" name="username[password]" value="" /></td> </tr> <br /> <tr> <td colspan="2"><input value="" style="width: 300px; height: 70px;" type="submit" /></td> </tr> </table> </form> {{/if}}

और उसी में शामिल होना चाहिए।

 /** *   */ $('form').submit(function() {//   var form = $(this); var method = form.attr('method'); // method  var id = form.attr('id'); // id  $.ajax({ //url:  , ..      . type: method, data: "ajax=1&"+form.serialize(), //        +  ajax -   ,    JSON success: function(msg){ var arr = $.parseJSON(msg); if (arr.message) $("#message_"+id).show().html(arr.message);//  message( ),       . if (arr.go) { //   go -        ,    -   . if (arr.go == '' || arr.go == '/') arr.go = 'main/page'; page.load(arr.go);//   } } }); return false; });

हम सर्वर कोड को एक उदाहरण के साथ स्पष्ट करने के लिए अपडेट करेंगे कि क्या हो रहा है:

 <?php error_reporting(0); session_start(); if(isset($_POST['username'])){//    if(!$_SESSION['user']){//    $user = $_POST['username']; if($user['login']!='test'){ //    test,  message echo json_encode(array('message'=>' '.$user['login'].'  ')); } else {//        $_SESSION['user'] = $user['login']; //  . echo json_encode(array('go'=>'/')); } } else {// error     echo json_encode(array('error'=>'  .')); } } else if(isset($_GET['action'])&&$_GET['action']=='pageLoad'){ switch($_GET['url']) { case 'page/contacts': $arr = array('name'=>'', 'info'=>'       ,     .'); break; case 'page/about': $arr = array('name'=>' ', 'info'=>'      .'); break; case 'page/somepage': $arr = array('name'=>'  ', 'info'=>'   -  '); break; case 'main/page': default: $arr = array('name'=>' ', 'info'=>'  '); break; } echo json_encode($arr); } else { ?>   html  <? } ?>

पृष्ठ से POST अनुरोध करते समय, हम यह जांचते हैं कि क्या उपयोगकर्ता अधिकृत है, और यदि ऐसा है, तो त्रुटि प्रदर्शित करें, और फ़ॉर्म को निकालें, अन्यथा, उपयोगकर्ता के लॉगिन की जाँच करें, यदि यह मौजूद नहीं है, तो संदेश प्रदर्शित करें, अन्यथा, उपयोगकर्ता को मुख्य पृष्ठ पर भेजें।

निष्कर्ष में

अंत में, मैं यह कहना चाहता हूं कि यह विधि सबसे सही नहीं है, और इससे भी अधिक आदर्श है, लेकिन यह एक जगह होने के योग्य है। मुझे उम्मीद है कि लेख का विषय दिलचस्प था, और शायद यहां तक कि लेख स्वयं किसी के लिए उपयोगी होगा।

आपका ध्यान देने के लिए धन्यवाद।
अपडेट: लिंक को सॉर्ट करने के लिए