Ajax asynchronous refresh implements database update

The previous article is about the interface. Next I will write about how to write the data into the database without refreshing.

When we change a certain score of a person or a certain number of people, we do not need to write data into the database.
First, we need to declare the XMLHttpRequest object Copy codeThe Code is as follows: // declare the XMLHttpRequest object
Var xmlHttp;
Function createXMLHTTP (){
If (window. XMLHttpRequest ){
XmlHttp = new XMLHttpRequest (); // Mozilla Browser
}
Else if (window. ActiveXObject ){
Try {
XmlHttp = new ActiveXObject ("Msxml2.XMLHTTP"); // old IE version
}
Catch (e)
{}
Try {
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP"); // new version of IE
}
Catch (e)
{}
If (! XmlHttp ){
Window. alert ("You cannot create an XMLHttpRequest object instance! ");
Return false;
}
}
}

At the same time, a callback function is required to determine whether the modification is successful.Copy codeThe Code is as follows: // update or add the callback function of the record (check whether the score is successful)
Function ModifyScore ()
{
If (xmlHttp. readyState = 4)
{
// If (xmlHttp. status = 200)
{
If (xmlHttp. responseText = "true ")
{
}
Else
{
// Alert ("score failed. Please rate again or contact the Administrator ");
}
}
}
}

After the preparation is complete, the following is a key step:
Because you need to write data to the database when modifying the score, you only need to increase the value of the drop-down box in the previous blog (when selecting items cyclically) and execute the following code:Copy codeThe Code is as follows: // obtain the peer evaluation ID
Var criticsID = checkbox [I]. value;
// Write the modified value to the database
// Obtain the project score
Var scoreAll = document. getElementById ("score" + checkbox [I]. value + srcElem. id + "");
Var accessAllScore = scoreAll. outerText;
// Obtain the Project ID
Var assess = document. getElementById ("assess" + srcElem. id );
Var assessID = assess. title;
CreateXMLHTTP (); // create an XMLHttpRequest object
// Pass data to another page for execution
Var url = "CriticsAgainAjax. aspx? CriticsID = "+ criticsID +" & assessID = "+ assessID +" & accessAllScore = "+ accessAllScore +" & Event = allCriticsInfo ";
XmlHttp. open ("Post", url, true );
// XmlHttp. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded ");
XmlHttp. onreadystatechange = AnswerOneKindQuestion;
XmlHttp. send (null );

Finally, we only need to get the parameters in CriticsAgainAjax. aspx and write them to the database.Copy codeThe Code is as follows: // get Parameters
If (Request. QueryString ["Event"]. ToString () = "allCriticsInfo ")
{
String criticsID = Request. QueryString ["criticsID"]. ToString ();
String assessID = Request. QueryString ["assessID"]. ToString ();
String accessAllScore = Request. QueryString ["accessAllScore"]. ToString ();
}

After the parameters are passed in, it is easy to write data to the database.
In this way, the result displayed on the front-end is that the data is not refreshed and is always written to the database. It is just a good job of division of labor to hand over the dirty work to the CriticsAgainAjax. aspx page.
In addition to writing less refresh, ajax is an asynchronous operation, that is, throwing data to CriticsAgainAjax on the js page. after the aspx, he continues to execute the program. He does not consider CriticsAgainAjax. if aspx is executed successfully, it may throw 100 pieces of data, and it takes three seconds to write data to the database. However, the throwing time is very fast and may be a few seconds at, so the user will feel very good, he does not need to wait half a day after the selection to continue the execution.