Experience creating an Ajax application
At the beginning
This article is about writing an Ajax application. If to speak more simply - then, about writing a site - that works without reloads. Quick, easy, affordable. This article will not be considered the server side code, there will be only examples for better understanding.
I have long been intrigued by the topic of writing a site in which several components (for example, flash players) do not reboot with each link following the links, but continue to hum songs. Then one day, with courage, I began to think about the structure of such an application. What eventually happened - read below.
Let's start
To get started, we need a few js-plugins - namely:
First, this is familiar to
First, create a folder, for example jstemp - in this folder will be jquery-tmpl templates. You also need to create at least one template, for example, the main page template. We create in the jstemp folder a subfolder main in which there will be a page.html file
The file is a simple html code:
')
<div id="name_of_page">${Content.name}</div> <div id="info_of_page">${Content.info}</div> Essence of the work
At that moment, when the user enters the page, our ajax application contacts the server, with the current link and parameters, and waits for JSON in response. We parse the resulting JSON into the js-object and send it to the jquery-tmpl plugin, which puts the data from the object on the shelves and shows the desired template to our user. And also, if the user decides that he does not need the current page, and will try to switch to another - the ajax application will immediately catch its action and do the same procedures, only with a new link, on which the user would like to go, and return result of work.
Implementation
First, let's write the start page:
<!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>
Note the presence of a div with id = "content_wrap" - it will load loaded templates into it.
Next, write the initial content download.
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);// . });
At this stage, if everything is fine, then you can load the main page. For example, I'll write a very tiny server code:
<?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 } ?>
Now, when referring to main / page - should be removed
Home page
All sorts of information
Hooray! 3/4 done. Now we will write a simple script to catch clicks on links.
/** * */ $("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; } });
and put this code in the same included.js
The purpose of this file is simple: When loading html text - scripts that have already been on the pages do not want to work with it, for this purpose included.js comes to the rescue
But what about working with forms, you ask? Yes Easy!
Working with forms
For example, create a template user / login.html
and put the code in it:
{{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}}
And in the same included.js should be added:
/** * */ $('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; });
Update the server code to make it clear by example what happens:
<?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 <? } ?>
When POST request from the page, we check whether the user is authorized, and if so, output an error, and remove the form, otherwise, check the user login, if it does not exist, output the Message, otherwise we send the user to the main page.
In custody
In conclusion I want to say that this method is not the most correct, and even more ideal, but it deserves a place to be. I hope the topic of the article was interesting, and maybe, even someone will find the article itself useful.
Thanks for attention.
Update: link to sorts
Source: https://habr.com/ru/post/127376/
All Articles