Implementation of Ajax submission waiting for the server to respond to friendly prompts

As we all know, when a client sends an Ajax request to the server, there will be a process of waiting for the server to respond. When the network environment is good and the server load is small, A request with less complex business logic may be processed at once and return the response results. However, 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 users who are waiting for the operation results, the waiting time is very long. If you have never had such an operation experience, you think about waiting for a car at the bus stop when someone else is late on a date or when someone else is in a hurry. I believe you will feel the same way and let the users endure this kind of suffering, the web era, which emphasizes user experience, is a secret and is unacceptable for the purpose of "creating value for users and allowing users to enjoy the convenience and convenience brought by e-commerce. Although I cannot change the long response time caused by objective environmental factors, I can tell users what the system is doing and make them feel that the system cares about their feelings, and willing to communicate with them affectionately, rather than the traditional software, as rigid, domineering, cold, good, not to mention the truth, let's look at my practices.

First, I declare that what I am introducing is not how powerful, how amazing, how high the technology is, how many years ahead of human civilization, I started to have it in the Xianfeng age. However, it was a matter of others. Here I will introduce myself with a letter and a letter, aiming to exchange and share, in order to sort out your own ideas, let's get started:

<Form ID = 'loginformid 'action = "#" method = "Post" onsubmit = "Return false; "> <br/> <input type =" hidden "id =" tenantid "name =" tenantid "value =" 1b0000d9c-1855-4ebf-93c8-bbbb6c878801 "/> <br/> <Div class =" formrow "> <br/> <label> User Name: </label> <br/> <input type = "text" name = "username" id = "username"/> <br/> </div> <br/> <div class = "formrow"> <br/> <label> password: </label> <br/> <input type = "password" name = "PWD" id =" PWD "/> <br/> </div> <br/> <Div class =" otherchooice "> <br/> <input type =" checkbox "name =" isrempwd" id = "isrempwd"/> <br/> <label for = "isrempwd"> Remember password </label> <br/> </div> <br/> <Div class = "formbtn"> <br/> <a id = "loginbtn" href = "javascript: void (0) "mce_href =" javascript: void (0) "Class =" loginbtn "Title =" click to log on to the origin commercial platform "> </a> <br/> <a href =" # "mce_href =" # "id =" forgetpwd "> forgot password? </A> <br/> </div> <br/> <input type = "Submit" id = 'submitbtn '/> <br/> </form> 

This is the HTML code of the login form. It is nothing special. My goal is to make it easier for everyone to understand the following JavaScript code. As you can see, the submit button in the form is not a traditional <input type = "Submit"/> label, but a <A> </a> label. Why is a used? I think it is relatively simple to use a to control styles. The most important thing is that its hover attributes are compatible with various browsers, in this case, I would like to make some dazzling results much simpler, instead of writing some hack to be compatible with the damn IE6. But in fact, the above Code does not see how a is associated with the login request. Don't worry, send it:

// Add a click event for the logon button <br/> $ ("# loginbtn "). click (function () {<br/> loginsubmit (); <br/> }); 

So what does the loginsubmit method do? Let's take a look at the code first:

/** <Br/> * click the logon button and choose response method <br/> */<br/> function loginsubmit () {<br/> // check the status in loginconfig, if the logon verification result is loaded, No Logon verification request is sent <br/> If (loginconfig. isloadingdata) {<br/> return; <br/>}< br/> var username = $. trim ($ ("# username "). val (); <br/> var Pwd = $. trim ($ ("# PWD "). val (); <br/> var tenantid = $. trim ($ ("# tenantid "). val (); <br/> If (username = "") {<br/> quicktips ("username", "Enter the user name first "); <br/> return; <br/>}< br/> If (Pwd = "") {<br/> quicktips ("PWD ", "Enter the password"); <br/> return; <br/>}< br/> loginwaiting (); <br/> checklogin (username, PWD, tenantid ); <br/>} 

This method is actually used for processing before submitting a verification login information request, such as null value judgment. Maybe you have read the first line of the method about loginconfig. the judgment of isloadingdata is confusing. Let's first introduce this variable. loginconfig is the object literal quantity configured for login information, and isloadingdata indicates whether data is currently being loaded, if this parameter is set to true, an Ajax request has been sent, but no response has been received from the server. If it is set to false, no request is waiting for response. This mechanism is used to prevent the client from sending Ajax requests without receiving requests from the server because the user continuously clicks the logon button, this causes unnecessary loads on both the client and server.

In the code that continues, there is a quicktips method, which is used to display some quick prompts. For example, quicktips indicates that the user is prompted to enter the user name near the input box whose ID is username, I will not introduce it much here. After some regular checks are completed, execute the loginwaiting method. This method is the key to this blog, that is, to display friendly login information to users. Afterwards, immediately execute the checklogin method and submit a login verification request to the server. Originally, these two actions should be executed strictly at the same time, but Javascript is single-threaded. Therefore, it's just a bit eccentric. Let's take a look at what the loginwaiting method has done:

/** <Br/> * a login request has been sent, and some other processes in the server response process (including disabling the logon button, replacing the background image of the logon button, and switching the prompt information) <br/> */<br/> function loginwaiting () {<br/> $ ("# loginbtn "). ATTR ("disabled", true); <br/> $ ("# loginbtn" ).css ("background-position", "right "); <br/> var waitingtext = "verifying logon information. Please wait"; <br/> $ ("# forgetpwd" pai.html (waitingtext ); <br/> var I = 1; <br/> waitinginterval = setinterval (function () {<br/> var DOTS = ""; <br/> if (I> 6) {<br/> I = 0; <br/> DOTS = ""; <br/>} else {<br/> for (var k = 0; k <I; k ++) {<br/> DOTS + = "> "; <br/>}< br/> $ ("# forgetpwd" pai.html (waitingtext + dots); <br/> I ++; <br/>}, 500); <br/>} 

First, set the disabled attribute of the logon button to true. The purpose of this Code is to set this button to unavailable, but in fact, this is not valid in many browsers, therefore, it is just a method to hide your ears and ears. To achieve this goal, we should rely on the following code. The second code is to change the orientation of the background image of the logon button. It was previously left-to-right and now right-to-left. What am I doing? Let's take a look at what this image looks like. *-*, on, God, and csdn blogs do not support uploading images, so they cannot be shown to you, in fact, it is just a common practice to place the original image of an image on the left, put a grayscale image on the right (that is, the background image for the button when the button is unavailable). What are the advantages of combining the two images into one? One is the pressure on the server, because one image means that the browser only needs to send a request to the server, and the two images mean two requests. The second, that is, the most important thing, is that the browser does not load the images used on all pages at a time, but shows which images are loaded at a time, if two images are separated, when we switch the background image of the button, the browser will load slowly, which will lead to blank background during the switching process, this is what no one wants to see. If we used to make an image, we only need to slide the loaded image to the left or right, it's convenient and quick, and it's suitable for both ages ^ _ ^. What do you mean?

As you can see from the HTML of the form, there is a link to retrieve the password on the right side of the login button. During the login response process, there is no need for this link, it seems a little redundant, so I decided to replace it with the friendly waiting information, $ ("# forgetpwd" ).html (waitingtext); this Code does this, in this way, the feeling is almost the same, but what are the disadvantages of the old feeling? By the way, I am angry. At this time, I think that in other web sites or software, when performing operations in the background, there will usually be dynamic points like ellipsis that keep beating, a little like the progress bar, it feels good, so I decided to make such an effect to make the prompt more friendly and keep up with the trend, it feels better to use scheduled execution for this effect. Let's use setinterval. The code below will not be explained much. Remember to use clearinterval after logincomplete.