Simple Example of calling WebService through Ajax

In Ajax, the browser can directly call WebService through javascript. The following describes how to implement it:

 

Step 1: Create an asmx file named ajaxservice In the WS directory.

 

Using system;
Using system. Collections. Generic;
Using system. LINQ;
Using system. Web;
Using system. Web. Services;

/// <Summary>
/// Ajaxservice Summary
/// </Summary>
[WebService (namespace = "http://tempuri.org/")]
[Webservicebinding (conformsto = wsiprofiles. basicprofile1_1)]
//To allow ASP. Net ajax to call this web service from a script, uncomment the downstream service.
[System. Web. Script. Services. scriptservice]
Public class ajaxservice: system. Web. Services. WebService {

Public ajaxservice (){

// If you use the designed component, uncomment the following line
// Initializecomponent ();
}

 

[Webmethod]
Public String helloworld (string s ){
Return "Hello World" + S;
}
}

 

Step 2: Set the service attribute of scriptmanager for the default. aspx page:

 

There are two ways to achieve this:

(1) Add scriptmanager directly on the default. aspx page (note that scriptmanager should be placed at the top of all other Ajax controls)

<Asp: scriptmanager id = "scriptmanager1" runat = "server">
<Services>
<Asp: servicereference Path = "~ /WS/ajaxservice. asmx "/>
</Services>
</ASP: scriptmanager>

(2) programming: Write the following code in the page_load event of the default. aspx. CS file:

Servicereference sr = new servicereference ();

Sr. Path = "~ /WS/ajaxservice. asmx ";

Scriptmanager1.services. Add (reference );

 

Step 3: Add display elements and JS functions to the default. aspx page

<Div>
<Asp: scriptmanager id = "scriptmanager1" runat = "server">
<Services>
<Asp: servicereference Path = "~ /WS/ajaxservice. asmx "/>
</Services>
</ASP: scriptmanager>
<Input id = "button1" type = "button" value = "Ajax call WebService" onclick = "callajax ()"/>
<Input id = "tbmsg" type = "text"/>
<Input id = "tbshow" type = "text"/>
</Div>

JS calls a <SCRIPT> </SCRIPT> of WS.

<SCRIPT type = "text/JavaScript" Language = "JavaScript">
Function callajax (){
Ws = ajaxservice. helloworld (document. getelementbyid ("tbmsg"). Value, onend );
Return false;
}

 

Function onend (result ){
Document. getelementbyid ("tbshow"). value = result;
}
</SCRIPT>

Description: ajaxservice. the helloworld () method is critical. You can write the required code in the WS file according to your actual needs. You can find that no ajaxservice is defined on the page. helloworld () is a JS function. In fact, this method is automatically generated by scriptmanager. At runtime, scriptmanager will generate a client proxy for each servicereference object. ajaxservice is ajaxservice. asmx. the agent of the ajaxservice class defined in CS.

The helloworld () method is a remote call of the helloworld method defined in ajaxservice. asmx. CS. But ajaxservice. asmx. the helloworld In the CS file has only one string parameter. when accessing the client and JS program, another parameter is added. This parameter is a reference to another function, indicating that when the call ends, the name of the automatically called method, and the return value of helloworld is used as the parameter of this method. Therefore, the onend (result) method is defined.