Home > Developer > Web Develop
Some sentiment:
Work has been very busy recently. I haven't updated my blog for a long time. There's a lot of stuff to write about. You can only write slowly. What can really be said, can be called the real mastery of it.
I like a word: "Paper to the end of the light, I know this matter to preach." Therefore, in the outside of work, do some dome and test pass, only put on the internet, or is not respect for knowledge.
Let's cut to the chase.
WebService and Ajax (I mean the jquery framework), everyone is not unfamiliar. Let's look at an example today. Ajax calls the WebService method under the same domain. (Remember that it is the same domain, that is, the WebService page to invoke is under the same website as the AJAX request page). On the asynchronous domain call, I'll take it slowly.
Here's how:
First, create a new Web site with VS2008. That doesn't have to be explained.
Second, the site into the jquery framework, I use here is jquery-1.4.2.min.js. No, from the Internet.
Third, add "Web service" to the website
Iv. Add the jquery framework to the site, adding a callwebservice.js file to process the call
When done, the site framework structure for (specific site, specific analysis):
Basically done. Because it's just some code copying.
1.default.aspx page. This is the page that invokes the WebService service.
<title>ajax Call webservice</title>
<script src= "Js/jquery-1.4.2.min.js" type= "Text/javascript" ></script>
<script src= "Js/callwebservice.js" type= "Text/javascript" ></script>
<body>
<form id= "Form1" runat= "Server" >
<div>
<input id= "Btncallhello" type= "button" value= "Call Hellowebservice"/>
Name: <input id= "txtname" type= "text"/><br/>
<input id= "btncallbody" type= "button" value= "Call Hellosomebody"/>
Study Number: <input id= "Txtstusid" type= "text"/><br/>
Name: <input id= "Txtstuname" type= "text"/><br/>
Gender: <input id= "Txtstusex" type= "text"/><br/>
Age: <input id= "Txtstuage" type= "text"/><br/>
<input id= "Btnsinstuinfo" type= "button" value= "Call Setstudentinfo"/><br/>
<input id= "Btnmulstuinfos" type= "button" value= "Call Getmulstudentinfos"/>
</div>
<div id= "Backdata" ></div>
</form>
</body>
2.mywebservice.asmx page. Service for WebService.
Using System;
Using System.Collections.Generic;
Using System.Linq;
Using System.Web;
Using System.Web.Services;
Namespace WebServiceTest
{
<summary>
Summary description of MyWebService
</summary>
[WebService (Namespace = "http://www.mywebaddr.com/")]
[WebServiceBinding (ConformsTo = wsiprofiles.basicprofile1_1)]
[System.ComponentModel.ToolboxItem (False)]
To allow the Web service to be called from the script using ASP. NET AJAX, uncomment the downstream.
[System.Web.Script.Services.ScriptService]
public class MyWebService:System.Web.Services.WebService
{
<summary>
Return statement session
</summary>
[WebMethod]
public string Hellowebservice ()
{
Return "Hello WebService";
}
<summary>
Return a greeting, by name
</summary>
[WebMethod]
public string Hellosomebody (string name)
{
Return "Hello" + name;
}
//<summary>
///Set up student entities and return to this entity
//</summary>
[WebMethod]
public Student setstudentinfo ( String name, string sex, int age,int sid)
{
Student stuinfo = new Student ();
stuinfo.sid = Sid;
stuinfo.name = Name;
stuinfo.sex = Sex;
stuinfo.age = age;
return stuinfo;
}
<summary>
Returns the generic data
</summary>
<returns></returns>
[WebMethod]
Public list<student> Getmulstudentinfos ()
{
list<student> stulist = new list<student> ();
for (int i = 0; i <; i++)
{
Student s = new Student ();
S.sid = i + 1;
S.name = "Tom" +S.SID;
S.sex = "male";
S.age = i + 1;
Stulist.add (s);
}
return stulist;
}
}
}
Note: We look at the signatures of these methods separately, which is important, because the method signature determines the rules you must follow, we use the Post method in this article, so we only give the method signature of the post.
1.HelloWebService
Description: The address of the requested page:/mywebservice.asmx/hellowebservice; The host address is: 192.168.0.194; Port number: If not 80 port, it must be given.
The full path to calling the service is: Http://192.168.0.194:85/MyWebService.asmx/HelloWebService. (Specific case, specific analysis)
2.HelloSomeBody
Description: The address of the requested page:/mywebservice.asmx/hellosomebody; The host address is: 192.168.0.194; Port number: If not 80 port, it must be given.
"Name=string" indicates that a parameter is required when the service is requested.
The full path to calling the service is: Http://192.168.0.194:85/MyWebService.asmx/HelloSomeBody. (Specific case, specific analysis)
3.SetStudentInfo
Description: The address of the requested page:/mywebservice.asmx/setstudentinfo; The host address is: 192.168.0.194; Port number: If not 80 port, it must be given.
Note the parameter description.
The full path to calling the service is: Http://192.168.0.194:85/MyWebService.asmx/SetStudentInfo. (Specific case, specific analysis)
4.GetMulStudentInfos
Description: The address of the requested page:/mywebservice.asmx/hellosomebody; The host address is: 192.168.0.194; Port number: If not 80 port, it must be given.
The full path to calling the service is: Http://192.168.0.194:85/MyWebService.asmx/GetMulStudentInfos. (Specific case, specific analysis)
3. The following is the core part, the AJAX scripting code that invokes the service. Callwebservice.js
$ (document). Ready (pageload);
How to execute on load
function Pageload () {
Bindcallhello ();
Bindcallbody ();
Bindgetsinglestudent ();
Bindgetmulstudents ();
}
Call Hellowebservice
function Bindcallhello () {
$ ("#btnCallHello"). Click (function () {
$.ajax ({
Type: "POST",//Access WebService use post to request
URL: "Http://192.168.0.194:85/MyWebService.asmx/HelloWebService",//Call URL (WebService combination of address and method name---wsurl/method name)
Data: {},//Here is the parameter to pass, for JSON format {Paraname:paravalue}
ContentType: "Application/json",//content encoding type when sending information to the server
Beforesend:function (XMLHttpRequest) {
Xmlhttprequest.setrequestheader ("Accept", "Application/json"); The type of data that is accepted. (It doesn't seem to work because the request/return type of WebService is the same, because JSON is requested, so the default is JSON)
},
Success:function (data) {
var jsonvalue = data;
alert (JSONVALUE.D);//Output JSON
},
Complete:function (XMLHttpRequest, Textstatus) {
var returntext = Xmlhttprequest.responsetext;
$ ("#backData"). HTML (returntext);//output server-side return data
}
});
});
}
Call Call Hellosomebody
function Bindcallbody () {
$ ("#btnCallBody"). Click (function () {
var name = $ ("#txtName"). Val ();
$.ajax ({
Type: "POST",//Access WebService use post to request
URL: "Http://192.168.0.194:85/MyWebService.asmx/HelloSomeBody",//Call URL (WebService combination of address and method name---wsurl/method name)
Data: "{name: '" + Name + "'}",//here is the parameter to pass, for JSON format {Paraname:paravalue}
ContentType: "Application/json",//content encoding type when sending information to the server
Beforesend:function (XMLHttpRequest) {
Xmlhttprequest.setrequestheader ("Accept", "Application/json"); The type of data that is accepted. (It doesn't seem to work because the request/return type of WebService is the same, because JSON is requested, so the default is JSON)
},
Success:function (data) {
var jsonvalue = data;
alert (JSONVALUE.D); Output JSON
},
Complete:function (XMLHttpRequest, Textstatus) {
var returntext = Xmlhttprequest.responsetext;
$ ("#backData"). HTML (returntext); Output server-side return data
}
});
});
}
Function bindgetsinglestudent () {
$ ("#btnSinStuInfo"). Click (function () {
var stusid = $ ("#txtStuSid"). Val ();
var stuname = $ ("#txtStuName"). Val ();
var stusex = $ ("#txtStuSex"). Val ();
var stuage = $ ("#txtStuAge"). Val ();
$.ajax ({
type: "POST",//Access WebService use post to request
URL: "Http://192.168.0.194:85/MyWebService.asmx/SetStudentInfo",//Call URL (WebService combination of address and method name---wsurl/method name)
Data: "{name: '" + stuname + "', Sex: '" +stusex+ "', Age: '" +stuage+ "', sid: '" +stusid+ "'}",//here is the parameter to pass, for JSON format {paraname: Paravalue}
ContentType: "Application/json",//content encoding type when sending information to the server
Beforesend:function (XMLHttpRequest) {
Xmlhttprequest.setrequestheader ("Accept", "Application/json"); The type of data that is accepted. (It doesn't seem to work because the request/return type of WebService is the same, because JSON is requested, so the default is JSON)
},
Success:function (data) {
var jsonvalue = data;
alert (JSONVALUE.D.SID); Output JSON
},
Complete:function (XMLHttpRequest, Textstatus) {
var returntext = Xmlhttprequest.responsetext;
$ ("#backData"). HTML (returntext); Output server-side return data
}
});
});
}
function bindgetmulstudents () {
$ ("#btnMulStuInfos"). Click (function () {
$.ajax ({
Type: "POST",//Access WebService use post to request
URL: "Http://192.168.0.194:85/MyWebService.asmx/GetMulStudentInfos",//Call URL (WebService combination of address and method name---wsurl/method name)
Data: {},//Here is the parameter to pass, for JSON format {Paraname:paravalue}
ContentType: "Application/json",//content encoding type when sending information to the server
Beforesend:function (XMLHttpRequest) {
Xmlhttprequest.setrequestheader ("Accept", "Application/json"); The type of data that is accepted. (It doesn't seem to work because the request/return type of WebService is the same, because JSON is requested, so the default is JSON)
},
Success:function (data) {
var jsonvalue = data;
Alert (jsonvalue.d[0). SID); Output JSON
},
Complete:function (XMLHttpRequest, Textstatus) {
var returntext = Xmlhttprequest.responsetext;
$ ("#backData"). HTML (returntext); Output server-side return data
}
});
});
}
Note: The relevant comments are written in detail and should be known to the people of the Earth. Should be playing the program of the Earth people know.
Ajax Call WebService (i)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
