Geekly Articles each Day

Ajaxアプリケーションの作成経験

はじめに


この記事では、Ajaxアプリケーションの作成に焦点を当てます。 簡単に言えば、再起動せずに機能するサイトを作成することです。 高速、簡単、手頃な価格。 この記事では、サーバー側のコードについては説明しません。理解を深めるための例のみを示します。
私は長い間、いくつかのコンポーネント（たとえば、Flashプレーヤー）がリンクをクリックするたびに再起動せずに歌を口ずさむサイトを作成するというトピックに興味を持ちました。 そしてある日、勇気を得て、そのようなアプリケーションの構造について考え始めました。 最後に何が起こった-以下をお読みください。

始まり


最初に、いくつかのjsプラグインが必要です-すなわち：


第一に、それはすべての人によく知られています。まあ、ほとんどの人、jsフレームワークに。 2番目のファイルは、jqueryに基づくテンプレートエンジンです。これを使用します。 彼は私たちが必要とするものであるクライアント側で働いています。 jsオブジェクトをjsonに変換するには、jqueryへの小さな追加も必要です。

まず、jstempなどのフォルダーを作成します。このフォルダーにはjquery-tmplテンプレートがあります。 また、メインページテンプレートなど、少なくとも1つのテンプレートを作成する必要があります。 jstempフォルダーで、page.htmlファイルが格納されるメインのサブフォルダーを作成します
ファイルには単純なhtmlコードがあります。

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


仕事の本質

その時点で、ユーザーがページにアクセスすると、ajaxアプリケーションは現在のリンクとパラメーターでサーバーにアクセスし、応答でJSONを待ちます。 受信したJSONをjsオブジェクトに解析し、jquery-tmplプラグインに送信します。jquery-tmplプラグインは、シェルフ上のオブジェクトからのデータを整理し、目的のテンプレートをユーザーに表示します。 また、ユーザーが現在のページを必要としないと判断し、別のページに切り替えようとすると、ajaxアプリケーションはすぐにアクションをキャッチして同じ手順を実行します。仕事の結果。

実装


最初に、開始ページを作成します。

 <!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>


id = "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; } });


このコードを同じincluded.jsに入れます
このファイルの目的は単純です。htmlテキストをロードするとき、すでにページ上にあったスクリプトはそれを使用したくないため、included.jsが役立ちます。
しかし、フォームの操作についてはどうでしょうか？ はい、簡単です！

フォームを操作する

たとえば、テンプレートuser / 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}}


そして、同じincluded.jsに追加する必要があります：

 /** *   */ $('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リクエストを行う場合、ユーザーが承認されているかどうかを確認し、承認されている場合はエラーを表示し、フォームを削除します。そうでない場合は、ユーザーのログインを確認し、存在しない場合はメッセージを表示し、そうでない場合はユーザーをメインページに送信します

結論として


結論として、この方法は最も正確でなく、さらに理想的ではありませんが、あるべき場所であると言いたいと思います。 記事のトピックがおもしろいことを願っていますし、記事自体でさえ誰かに役立つかもしれません。

ご清聴ありがとうございました。
更新： 並べ替えへのリンク

Source: https://habr.com/ru/post/J127376/

More articles:


All Articles