Ajax asynchronous request instance

1. problem Analysis user management display page: usermanagement. tpl (also called V in MVC) user management data sending page: usermanagement. php (also known as M in MVC, that is, the model) is used to obtain the execution of the user's queue. A parameter is required: userna... syntaxHighlight

1. Problem Analysis

User Management display page: usermanagement. tpl (also known as V in MVC, that is, view)

User management data sending page: usermanagement. php (also known as M in MVC, that is, Model)

To obtain the execution of a user's queue, you need a parameter: username. I originally thought about usermanagement on the data sending page. php directly runs the command and sends the result to the display page. This is feasible in principle, but there are more than 70 users, that is to say, after more than 70 people complete the execution, my page will be displayed. The processing method here is synchronous, that is, the page cannot be seen if the result is not returned. The result is: the page is stuck. Even if the page can be accessed, normal people cannot wait because the execution of a command takes 3 or 4 seconds.

The practical solution is to use ajax asynchronous requests, with emphasis on Asynchronization. The logic of user name processing is not in usermanagement. in php, it is transferred to usermanagement_show_queues.js. For the loaded page, each row represents a user and is read row by row. That is to say, ajax is started row by row to request results from the server, because an asynchronous page is displayed normally, it does not affect other events.

2. ajax code

[Javascript] $ (). ready (function (){
$ ('# Userlist_table tr'). each (function (I, item ){
If (I> 1 ){
$. Ajax ({
Url: '../csm/showuserqueue-ajax.php ',
Type: 'get ',
Data: 'username = '+ $ (this). children (). eq (2). text (),
DataType: 'text ',
Success: function (data ){
$ ('# Userlist_table tr'). eq (I). children (). eq (8). text (data );
},
Error: function (XMLHttpRequest, textStatus, errorThrown ){
Alert (XMLHttpRequest. status );
Alert (XMLHttpRequest. readyState );
Alert (textStatus );
}
});
}
});
});

$ (). Ready (function (){
$ ('# Userlist_table tr'). each (function (I, item ){
If (I> 1 ){
$. Ajax ({
Url: '../csm/showuserqueue-ajax.php ',
Type: 'get ',
Data: 'username = '+ $ (this). children (). eq (2). text (),
DataType: 'text ',
Success: function (data ){
$ ('# Userlist_table tr'). eq (I). children (). eq (8). text (data );
},
Error: function (XMLHttpRequest, textStatus, errorThrown ){
Alert (XMLHttpRequest. status );
Alert (XMLHttpRequest. readyState );
Alert (textStatus );
}
});
}
});
});
3. Code Parsing

Note: $ ('# userlist_table tr '). each () traverses the table row by row. In function (I, item), I represents the id of a row in the table.

Success: $ ('# userlist_table tr '). eq (I ). children (). eq (8 ). text (data); At the beginning, I used: $ (this ). children (). eq (8 ). text (data); in this way, it cannot be displayed at all, and $ ('...... ') undefined, so we can use the previous method to write. Isn't it marked?

4. Implementation

1. Send an asynchronous request after the page is loaded

2. After the request result is returned, it is displayed on the page

 

Through this, I have a deeper understanding of ajax Asynchronization and understand when to use Asynchronization and synchronization. Haha, come on! Keep learning every day !!