Use jquery and Ajax technology to periodically update a column of data in the GridView _jquery

See a problem: Periodically update the state text in a column of the GridView. Now there is a thought: the GridView will eventually generate the table, so we update the columns of the table through Ajax in the page, thus achieving the Ajax update GridView effect.

Specific implementation:

Prepare an XML file to store the data to be updated, start a timer in the page, call a function every 5 seconds, get the data in the XML through $.ajax, parse the XML, traverse the table row, match the data to be updated, update.

Getuserlist.xml

Define a userlist root node, each of the bottom useritem corresponds to a data, UID can be understood as the primary key, Ustatus is the most recent state.

<?xml version= "1.0" encoding= "Utf-8"?>
<UserList>
<UserItem><UID>1</UID> <UStatus> Close </UStatus></UserItem>
<UserItem><UID>2</UID><UStatus> Close </UStatus></UserItem>
<UserItem><UID>3</UID><UStatus> Open </ustatus ></UserItem>
</UserList>

Test.html

The exact logic is written all over this side.

Finally, put the required files to a browsing site below, open test.html.
Wait 5 seconds and you'll see the effect.

Because of the problem of IE, open directly under the folder will not be able to parse the XML file (parsererror) problem, so it is recommended to be able to run the site below, or with another browser to open.

The Ps:gridview is a successor to the DataGrid, and while there is a DataGrid in the Framework 2, the GridView is already at the forefront of history, and the trend to replace the DataGrid is overwhelming. The GridView and DataGrid functions are similar in that they display data from a data source in a Web page, and a row of data from a data source, that is, a record, is displayed as a row in the output table on a Web page.
The GridView, compared to the DataGrid, has the following advantages, more functional, because the provision of smart tag panel (that is, show smart tag) more user-friendly, commonly used sorting, paging, updating, delete and other operations can be zero code to achieve! With the PagerTemplate attribute, you can customize the user navigation page, which means that pagination controls are more arbitrary. The GridView and DataGrid are also different on the event model, and the DataGrid control throws a single event, and the GridView control raises two events, one that occurs before the operation, one that occurs after the operation, and a multiple-bit ***ing event before the operation. Event multiple-bit ***ed events, such as sorting events and sorted events, rowdeleting and rowdeleted events after the operation.
The way the ListView and GridView Refresh the interface is to invoke adapter.notifydatasetchanged () to refresh the interface.
However, this method has its drawbacks, he is the interface of the data to refresh all again, regardless of whether the data changes.