Ajax login exit in JavaScript summary of some methods

Version One
The idea is to reserve a JS hook in the page, and then send the AJAX request to the back end after the page is loaded, to determine if the user is logged in, and to write the corresponding text in the hook. So the version one produced ...

The code is as follows

Copy Code

(function ($) { var user = Window.user = {}; User Data User.data = {}; User status, 0 not logged in, non 0 is considered logged in, scalable to user level User.status = 0; /** * Initialization * @return {Object} User Object */ User.init = function () { Responsible for requesting the user to log in from back-end Ajax, and returning user-related information if they are logged on, otherwise as not logged in Changes the status status of the user after the request is completed and writes the user information to the User.data         $.get (back-end URL, function (res) {              if (res.error = 0) {//return value with back-end contract                  user.status = 1;                 User.data.userName = res.data.username;//impersonate user name             } else {                 User.status = 0;                 user.data = {};            } Render Status to Page User._renderhtml (); }, ' json '); Simulate an inert method to prevent a page from being used more than once User.init = function () { return user; } return user; } /** * User Login * @param {Function} callback callback * @return {Object} User Object */ User.login = function (callback) { if ("function" = = typeof callback) { if (user.status!== 0) {//If user is logged in, run callback directly, parameter is user data Callback.call (user, user.data); } else { When not logged in to eject the user login layer, let it log on, after the completion of the login to refresh the current page, of course, can also like Youku do not refresh the page, but to do a lot of work, here does not explain } } return user; } /** * Render user status to page, currently used for simulation */ user._renderhtml = function () { var html; if (user.status!== 0) {//logged in html = ' Hello ' + user.data.userName + ', <a href= ' # ' > Exit </a> '; } else { html = ' Please login <a href= ' # ' > Login </a> '; } $ ("#J_bar_html"). HTML (HTML); } } (JQuery)); This can be done on the page: <a href= "javascript:;" id= "J_set_fav" > click Collection </a> <script type= "Text/javascript" > User.init ();//Initialize User $ ("#J_set_fav"). On ("click", Function () { User.login (function () {//callback must be used in login state, if no login will execute draw out login box let user log in Alert ("being collected"); }); }); </script>

Version Two
So the page may need to determine whether the user is logged in, and exit the login, on the basis of version one to add check and exit methods, but these exits and checks are only based on the return value of the backend, and exit is only the front end of static exit, of course, you can also send Ajax backwards

code is as follows	copy code
/**   * Front end exit  * @return {Object} User Object  */ User.exit = function () {     user.status = 0 ;     user.data = {};     user._renderhtml ()//Reset page status     return user } /**  * Check that the user is logged on  * @return {Boolean} True to log on, false is not logged on  */ User.check = function () { br>     return user.status!== 0; }

After the above code after the front end of the login is basically completed, but because each time to request the backend, and the request is asynchronous, if the return response time is too long, then in this time period to use User.login, User.check is not correct, Because it is completed after the Ajax can correctly set the user's login status, which is like the Domready event, the DOM tree did not establish the success of the use of Dom objects, the error ... So she has domready, we have userready ... So version three has ...
Version Three
Add the Ready event based on version two to ensure that the code must be executed before the user is initially completed ...

The code is as follows

Copy Code

var IsReady = false,//User is initially finished Readylist = [];//initialization callback list /** * Render user status to page, currently used for simulation */ user._renderhtml = function () { // ... Runlist ()///Because the page has been rendered, you can perform a ready callback event } /** * User Ready Event * @param {Function} callback after initial completion callback * @return {Object} User Object */ User.ready = function (callback) { if ("function" = = typeof (callback)) { if (IsReady) {//if the initial completion Callback.call (user, user.data); else {//if not, append to callback list Readylist.push ({ Callback:callback }); } } return user; } /** * Execute Callback Event */ function Runlist () { var i = 0, len = readylist.length; if (Len > 0) { for (; i<len;i++) { Readylist.callback && readyList.callback.call (user, user.data); } } IsReady = true;//set to already initialized Readylist.length = 0;//Reset Callback Runlist = $.noop;//Inert method }

This is used to ensure that the event is not bound until the user's judgment is complete, thus resolving the loss of the user experience caused by the error of judgment:

The code is as follows

Copy Code

<a "href=" javascript:; "id=" J_set_fav > Click Collection </a> <script type= "Text/javascript"     User.init ()///Initialize user         user.ready (function () {          if (User.check ()) {alert ("Logged on");} else {alert ("not logged in");}         $ ("#J_set_fav"). On ("click", Function () {              User.login (function () {//callback must be used in login state, if no login will perform draw out login box let user log in                 alert ("being collected");            });        });    }); </script>

The entire front end login, exit probably the architecture is like this, of course, can also butt the third party login, registration and other methods. Can also expand some user-related operations, such as: Collection Ah, add attention ah, and so on.
Note: Just code ideas, specific code can be optimized, can be streamlined, and according to the actual situation to order different functions.