Multiple methods for JS calling background methods for Data Interaction

Data Interaction between the front-end and the backend is required in many aspects during project development. Several Typical common methods are to use the AutopostBack attribute of the control and Button to submit a form. However, these are all conditional. AutoPostBack is real-time, but will refresh the page. Button submission forms cannot implement real-time data interaction. Of course, ajax cannot be omitted when it comes to data interaction between the foreground and the background. ajax achieves Asynchronous interaction between the foreground and the background data and ensures real-time and partial refreshing. However, some data does not require Asynchronous interaction. For example, when the interactive data is the condition for the next execution, you must wait until the data front-end interacts with the background data to continue executing the program. Therefore, it is necessary to master the method of js interaction with background data.

Method 1

Background method:
Copy codeThe Code is as follows:
<SPAN style = "COLOR: # ff0000"> // The WebMethod must be identified. </SPAN>
[System. Web. Services. WebMethod]
<SPAN style = "COLOR: # ff0000"> // note that public and static methods must be called at the front end. </SPAN>
Public static string Say (string name)
{
String result = "Hello:" + name;
Return result;
}

Front-end js:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function btnClick (){
PageMethods. Say ("you", funReady, funError); <SPAN style = "COLOR: # ff6666"> // call the background method in js </SPAN>
}
<SPAN style = "COLOR: # ff0000"> // callback function. The result is the data returned by the background method. </SPAN>
Function funReady (result ){
Alert (result );
}
<SPAN style = "COLOR: # ff0000"> // error handling function. err indicates the error message returned by the background method. </SPAN>
Function funError (err ){
Alert ("Error:" + err. _ message );
}
</Script>
<Asp: ScriptManagerID = "ScriptManager1" runat = "server" EnablePageMethods = "true"/>
<Inputtype = "button" onclick = "btnClick ()" value = "test"/>

Method 2

Background method:
Copy codeThe Code is as follows:
Protected string Say (string strCC)
{
StrCC = "Hello! "+ StrCC;
Return strCC;
}

Front-end js:
Copy codeThe Code is as follows:
Function Show ()
{
Var v = "China ";
Var s = '<% = Say ("' + v + '") %>'; // hello! "+ V +"
Alert (s );
} <P style = "MARGIN: 0in; FONT-FAMILY: Arial; COLOR: #666666; FONT-SIZE: 9pt "> <input type =" button "onclick =" Show () "value =" Submit "/> </P>

Method 3

Background method:
Copy codeThe Code is as follows:
<SPAN style = "COLOR: #666666"> // The WebMethod must be identified.
[System. Web. Services. WebMethod]
// </SPAN> <SPAN style = "COLOR: # ff0000"> note that you need to call the method on the front-end, public and static </SPAN> <SPAN style = "COLOR: #666666">
Public static string Say (string name)
{
String result = "Hello:" + name;
Return result;
}
</SPAN>

Front-end js:
Copy codeThe Code is as follows:
<SPAN style = "COLOR: #666666"> <script type = "text/javascript">
Function btnClick (){
// </SPAN> <SPAN style = "COLOR: # ff0000"> call the page background method. parameters required by the preceding method are as follows, next is the js function to be executed when the method callback is successful, and the last is the js function to be executed when the method callback fails </SPAN> <SPAN style = "COLOR: #666666">
WebSerCustomer. Say ("you", function (ress) {// ress is the data returned by the background method, and Say is the method on the webservice WebSerCustomer. axms page.
Alert (ress)
});
}
</Script>
<Asp: ScriptManager ID = "ScriptManager1" runat = "server">
<Services> <asp: ServiceReference Path = "~ /WebSerCustomer. asmx "/> </Services> // Page name of the WebSerCustomer. asmx background webservice class
</Asp: ScriptManager>

<Input type = "button" onclick = "btnClick ()" value = "test"/> </SPAN>

Summary
For methods 1 and 3, identify System. web. services. webmethod can declare a method that can be called through the client js function, and the background method must be declared as public and static. It is precisely because the method should be declared as static, these two methods have limitations, that is, the static method only allows access to static member variables. Therefore, to use these two methods to call the background method, the background method cannot access non-static member variables.

For method 2, although there are no restrictions on the background method, the foreground call is read-only, and the parameters passed to the background by the foreground do not actually exist, that is, it cannot be obtained from the background. Therefore, method 2 is suitable for calling the background method for processing and returning it to the client. It is not suitable for uploading data to the background for background use.