How to implement AJAX submission wait for server response friendly hint information

As we all know, when the client sends an AJAX request to the server, there will be a process waiting for the server to respond, when the network environment is good and the server load is small, the business logic is not too complex request may be processed at once and return the results of the response, but when the network environment is not ideal or the request involves a large number of operations, The server response time may be long, especially for the users in operation, are looking forward to the results of the operation, the waiting time is extremely long, if you do not have such an operation experience, you recall the date when someone late or emergency out of the bus station when the taste of waiting for a bus, I believe you can feel empathy, and let the user endure such torment, to emphasize the user experience of the Web2.0 era, is a big bogey, is the pursuit of "create value for users, so that users enjoy the convenience of e-commerce" for the purpose of this I can not accept. Although I can't change the long response time of objective environmental factors, I can tell the user what the system is doing, let them feel that the system is very concerned about their feelings, and is willing to communicate with them, rather than the traditional software, rigid, overbearing, cold, well, not much to say, see my practice.

First of all, I am not introducing what is so powerful, how great, how high technology, can lead the human civilization how many years of practice, in fact, this practice, in the beginning of the salt harvest generation, but, it is someone else's business, the following introduction, is my own letter an alphabet knock, to exchange and share, Also in order to tidy up their own ideas, well, officially started:

<form id= ' Loginformid ' action= "#" method= "POST" onsubmit= "return false;" > <input type= "hidden" id= tenantid "name=" Tenantid "value=" 1b487d9c-1855-4ebf-93c8-bbbb6c 878801 "/> <div class=" Formrow "> <label> user name: </la  
                        bel> <input type= "text" name= "UserName" id= "UserName"/> </div> <div class= "Formrow" > <label> password: </la bel> <input type= "password" name= "pwd" id= "pwd"/> </  div> <div class= "Otherchooice" > <input "checkbox"  
                        Name= "Isrempwd" id= "isrempwd"/> <label for= "isrempwd" > Remember password </label> </div> <div CLAss= "Formbtn" > <a id= "loginbtn" href= "javascript:void (0)" mce_href= "javascript:void (0)" class= "LOGINBTN" title= "Click Login Origin Commercial platform" ></a> <a href= "#" mce_href= "#" id= "Forgetpwd "> Forgot Password?"  
                    </a> </div> <input type= "Submit" id= ' submitbtn '/> </form>

This is the login form of the HTML code, nothing special, my purpose is to read the following JS code can be more easily understood. As you can see, the Submit button in the form is not the label of a traditional <input type= "submit"/>, but a <a></a> why use a? I think it's easier to control the style with a. The most important thing is that its hover properties can be compatible with browsers, so I would like to do a little bit of the effect of a little more simple and do not have to write some hack to compatible with the damned IE6. In fact, however, the above code does not see how this a is associated with submitting a login request. Don't worry, send it at once:

More Wonderful content: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/ajax/

Add a click event for the login button  
$ ("#loginBtn"). Click (function () {  
     loginsubmit ();  
});

So what did the Loginsubmit method do? Take a look at the code first:

/** 
    * Login button Click response Method 
    *
    /function Loginsubmit () {  
        //Check the status in Loginconfig, if in the state of loading logon verification results, do not continue to send logon authentication request  
        if (loginconfig.isloadingdata) {return  
            ;  
        }  
       var userName = $.trim ($ ("#userName"). Val ());  
       var pwd = $.trim ($ ("#pwd"). Val ());  
       var Tenantid = $.trim ($ ("#tenantId"). Val ());  
        if (UserName = = "") {  
            quicktips ("UserName", "Please enter username first");  
            return;        
        }  
        if (pwd = = "") {  
            quicktips ("pwd", "Please enter password");  
            return;          
        }  
        Loginwaiting ();  
        Checklogin (Username,pwd,tenantid);  
    }

This method is actually used to do some processing before submitting a request for verification of login information, such as the judgement of NULL value, etc. Maybe you saw the first line of the method. About Loginconfig.isloadingdata This judgment will be more puzzled, first introduce this variable bar, Loginconfig is a login information configured object literal, and the isloadingdata is to mark whether the current loading data, for TR UE, indicates that an AJAX request has been sent, but has not yet received a response from the server, false to indicate that there are currently no requests waiting for a response. This mechanism is designed to prevent users from constantly clicking on the login button and causing the client to continue to send AJAX requests without a request from the server, resulting in unnecessary load on both the client and the server.

In the continued downward code, there is a method called Quicktips, which is used to display some quick hints, such as quicktips that prompts the user to enter the username near the input box with ID username, which is not much described here, and after some routine testing is completed, Execute Loginwaiting method, this method is the key of this blog, that is to start to display friendly login information to the user, after this, immediately executes Checklogin method, submits the login authentication request to the server, originally, these two actions should be in the strict sense of simultaneous execution, But JavaScript is single-threaded, so, only eccentric, hehe, to see what the Loginwaiting method did:

/** * has sent login requests, and so on some of the processing in the server response (including disabling the login button, replacing the login button background picture, switching the cue message, etc.)/function loginwaiting () {$ ("#  
        Loginbtn "). attr (" Disabled ", true);  
        $ ("#loginBtn"). CSS ("background-position", "right");  
        var waitingtext = "Verifying login information, please wait";  
        $ ("#forgetPwd"). HTML (waitingtext);  
        var i = 1;  
            Waitinginterval = setinterval (function () {var dots = "";  
                if (i > 6) {i = 0;  
            Dots = "";  
                }else{for (var k = 0;k < i;k++) {dots + = ">";  
            } $ ("#forgetPwd"). HTML (waitingtext+dots);  
        i++;  
    },500); }

First, set the disabled property of the login button to True, this code is meant to make this button unavailable, but in fact, in many browsers is not valid, so it is just a practice of self-deception, really to achieve this goal, or by the following code to achieve. The second code, to achieve is to change the login button background picture laying direction, before is from left to right, now is from right to left, what am I doing? Look at this picture exactly is what kind of *-*,on,god,csdn blog originally is not support upload pictures, so can not show this picture for you to see, in fact, is just a very common practice, that is, a picture of the original image on the left, The right side of a picture of the corresponding grayscale (that is, when the button is not available to the button to arrange the background picture), the two pictures together to become a piece of what benefits? One is the pressure of the server, because a picture means that the browser only needs to send a request to the server, and two will mean two times. The 2nd, and the most important, is that browser is not a one-time all pages used to load the picture back, but to show which one to load, if the two pictures are separated, when we switch the background picture of the button, the browser load a bit slow, will lead to this switch process, The background of the button is blank, this is anyone do not want to see the result, and we have to make a picture of it, just want to load good picture left or right to slide on it, convenient and quick, old and young salty ^_^, you say?

From the form's HTML can be seen, on the right side of the login button there is a link to retrieve the password, in the waiting for the login response process, the existence of this link is not necessary, even if it seems to be a bit superfluous, so I decided to replace it with friendly waiting information, $ ("#forgetPwd"). html (waitingtext); This code is to do this thing, so, feel, also almost, but the old feeling also shortcomings what, in the end what is missing? Right, a little bit angry, at this time, think of in other web sites or software, in the background operation, there will usually be a dynamic similar to the ellipsis point in the non-stop beating, a bit like the effect of the progress bar, feeling very good, so I also decided to do a such effect, so that the hint more friendly, also keep up with the trend, hehe, thought about , the feeling of such effect with timed execution will be better, then setinterval it, the following code does not explain slightly, remember after the Logincomplete clearinterval.